1. Plugins
  2. addSortBy

Plugins

addSortBy

addSortBy sorts table rows by column values.

Options

Options passed into 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].

Column Options

Options passed into column definitions.

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

disable?: boolean

Disables sorting on the column.

Defaults to false.

compareFn?: (leftValue, rightValue) => number

Receives a left and right value to compare for sorting.

If leftValue should come before rightValue, return a negative number.

If rightValue should come before leftValue, return a positive number.

Otherwise if both values are equal in sorting priority, return 0.

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

Receives the value of the column cell and returns the value to sort the column on.

Useful for sorting a column that contains complex data.

If a number is returned, sort numerically. If a string is returned, sort alphabetically.

If an array is returned, sort on the first non-matching element.

Defaults to (value) => value.

invert?: boolean

Reverses the underlying sorting direction.

Useful for sorting negative numbers i.e. ascending order becomes -1, -2, -3...

Defaults to false.

Prop Set

Extensions to the view model.

Subscribe to .props() on the respective table components.

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.sort} <!-- HeaderRow props -->
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.sort} <!-- HeaderCell props -->
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

HeaderCell

order: 'asc' | 'desc' | undefined

The order of the data column represented by the header cell. If undefined, the data column is not sorted.

disabled: boolean

Whether the data column represented by the header cell has sorting disabled.

toggle: (event: Event) => void

Toggles sorting on the data column represented by the header cell (from 'asc' to 'desc' to undefined).

clear: () => void

Clears sorting on the data column represented by the header cell.

BodyCell

order: 'asc' | 'desc' | undefined

The order of the data column on which the body cell is. If undefined, the data column is not sorted.

Plugin State

State provided by addSortBy.

const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.sort;

preSortedRows: Readable<BodyRow<Item>[]>

The view model rows before sorting.

sortKeys: WritableSortKeys

The active sorting keys.

WritableSortKeys is equivalent to Writable<SortKey[]> with an additional toggleId method.

WritableSortKeys#toggleId: (id: string, options: { multiSort: boolean }) => void

Toggles sorting on the column with id (from 'asc' to 'desc' to undefined).

WritableSortKeys#clearId: (id: string) => void

Clears sorting on the column with id.

SortKey

export interface SortKey {
  id: string;
  order: 'asc' | 'desc';
}

Examples

Simple sorting