addSortBy

addSortBy sorts table rows by column values.

Options

const table = createTable(data, {
  sort: addSortBy({ ... }),
});

const table = createTable(data, {
  sort: addSortBy({ ... }),
});

initialSortKeys?: SortKey[]

Sets the initial sort keys.

Defaults to [].

disableMultiSort?: boolean

Disables multi-sorting for the table.

Defaults to false.

isMultiSortEvent?: (event: Event) => boolean

Allows overriding the default multi-sort behavior.

Takes an Event and returns whether the action triggers a multi-sort.

Defaults to multi-sort on shift-click.

toggleOrder?: ()[]

Allows customization of the toggling order. This cannot contain duplicate values. Set this to ['asc', 'desc'] to disable toggling to an unsorted column.

Defaults to ['asc', 'desc', undefined].

serverSide?: boolean

If true, the sort plugin will have no effect on the rows of the table. Instead, you can control sorting by updating the table’s data. The plugin’s state can be used as variables in your data-fetching query to get sorted data from the server directly.

Defaults to false.

Column Options

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      sort: { ... },
    },
  }),
]);

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      sort: { ... },
    },
  }),
]);

disable?: boolean

Disables sorting on the column.

getSortValue?: (value) => string | number | (string | number)[]

Returns the value to sort by, for cell values that are not directly comparable.

compareFn?: (left, right) => number

A custom comparison for the column.

invert?: boolean

Inverts the sort order of the column.

Prop Set

HeaderCell props cell.current.props.sort

order: "asc" | "desc" | undefined

Current sort order for this column.

toggle: (event: Event) => void

Function to toggle sorting on this column.

clear: () => void

Function to clear sorting on this column.

disabled: boolean

Whether sorting is disabled for this column.

BodyCell props cell.current.props.sort

order: "asc" | "desc" | undefined

Current sort order for this column.

Interactions

• With addSubRows, sub-rows are sorted within their parent; parents are ordered among themselves and children among their siblings.
• Sorting runs before addPagination and addVirtualScroll, so a sort always reorders the whole data set, not just the visible page.

Plugin State

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { sortKeys } = pluginStates.sort

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { sortKeys } = pluginStates.sort

sortKeys: SortKeys

The active sort keys, a Box<SortKey[]> with two helpers. Read or assign sortKeys.current; every write assigns a new array.

sortKeys.current // [{ id: 'age', order: 'desc' }]
sortKeys.current = [{ id: 'name', order: 'asc' }]
sortKeys.toggleId('age') // advance the column through the toggle order
sortKeys.toggleId('age', { multiSort: false }) // replace the other keys
sortKeys.clearId('name')

sortKeys.current // [{ id: 'age', order: 'desc' }]
sortKeys.current = [{ id: 'name', order: 'asc' }]
sortKeys.toggleId('age') // advance the column through the toggle order
sortKeys.toggleId('age', { multiSort: false }) // replace the other keys
sortKeys.clearId('name')

createSortKeys(initialKeys) builds a standalone SortKeys (it replaces the 6.x createSortKeysStore).

preSortedRows: ReadonlyBox<BodyRow[]>

The rows before sorting was applied.

Examples

sortKeys.current = []