Plugins

addSortBy

addSortBy sorts table rows by column values.

# Options

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 $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: { ... },
    },
  }),
]);

# 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

{#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

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