Column Sorting

Overview

Sorting allows users to list the data in ascending or descending order. There are three ways for a user to sort:

Clicking on the header-cell icon: This will toggle the order from ascending to descending and vice versa.
Using the sort menu: Users can also use the sort menu to strictly determine the order of the data.
Multi-column sorting: Hold the Shift key while clicking on the second sort button.

Loading example...

Implementing column sorting

You must opt-in to column sorting by setting the features.sort prop to true or utilzing the options object. Doing so will display the sorting options in the column menu.

Loading example...

Multi-column Sorting

Multi-column sorting is enabled by default on the toggle sort button. To use multi-column sorting hold the Shift key while clicking on the second sort button.

Loading example...

Custom Comparator

A comparator determines how two cell values should be sorted. The default comparator uses the vanilla JavaScript basic comparison of a and b.

When using the accessorFn method, the comparator uses the value returned from the accessorFn callback provided as the first argument.

To provide a custom comparator, you can pass a function as the features.sort.comparator option.

Note

Dates will naturally sort in order without any customization. This example just shows how to customize the sorting behavior.

Loading example...

Options

The sort feature accepts either a boolean or an object with the following properties:

Loading example...

Params	Required	Description
`firstSortDirection`	`false`	The initial sort direction for the column.
`comparator`	`false`	A custom comparator function for sorting.

Overview

Sorting allows users to list the data in ascending or descending order. There are three ways for a user to sort:

Clicking on the header-cell icon: This will toggle the order from ascending to descending and vice versa.

Using the sort menu: Users can also use the sort menu to strictly determine the order of the data.

Multi-column sorting: Hold the Shift key while clicking on the second sort button.

Loading example...

Custom Comparator

A comparator determines how two cell values should be sorted. The default comparator uses the vanilla JavaScript basic comparison of a and b.

When using the accessorFn method, the comparator uses the value returned from the accessorFn callback provided as the first argument.

To provide a custom comparator, you can pass a function as the features.sort.comparator option.

Note

Dates will naturally sort in order without any customization. This example just shows how to customize the sorting behavior.

Loading example...

Options

The sort feature accepts either a boolean or an object with the following properties:

export type SortOptions<TData, TKey extends keyof TData> = {
  firstSortDirection?: SortDirection
  comparator?: Comparator<TData[TKey]>
}

export type SortDirection = 'asc' | 'desc' | null
export type Comparator<TValue> = (a: TValue, b: TValue) => number

Loading example...

Params	Required	Description
`firstSortDirection`	`false`	The initial sort direction for the column.
`comparator`	`false`	A custom comparator function for sorting.