Sorting, Grouping & Summaries

Every data column sorts on a header click, cycling ascending, descending, unsorted. sortable: false takes that away; a synthetic column has no value to sort by and never had it.

Grouping is the other way round: you opt a column in. Bucketing an email or a free-text note makes one group per row, so it is not offered to every column that holds a value. groupable: true says yes, groupable: false says no, and with neither set the column follows sortable: true — marking a column sortable already says it is a dimension worth organising the table by.

<Table
  {items}
  {columns}
  viewDefaults={{ sort: { column: 'salary', direction: 'desc' }, pageSize: 5 }}
/>

<Table
  {items}
  {columns}
  viewDefaults={{ groupBy: 'department' }}
  groupOrder={['Platform', 'Product', 'Design', 'Data']}
/>

Summary rows aggregate a column across rows. When the table is grouped, each group gets its own summary row; without grouping, a single total row is appended below the data. Pass prefs={{ defaults: { summaries: […] } }} to enable summaries declaratively — users can also add and remove them at runtime via the header menu or the SmartFilterBar's summary control.

Summaries are a preference, not a view setting. Sorting and grouping decide which rows a reader sees, which makes them worth sharing and worth putting in a link — they live on the view. A summary row changes how the same rows are presented, so it belongs to this reader on this device and stays in web storage: viewDefaults for the former, prefs for the latter.

<Table
  {items}
  {columns}
  viewDefaults={{ groupBy: 'department', pageSize: 12 }}
  prefs={{ defaults: { summaries: [{ column: 'salary', type: 'sum' }] } }}
/>

A summary is { column, type } plus an optional formatter; the full shape is SummaryConfig. type is sum, avg, min, max or count, and count is the one that does not do arithmetic: it counts the rows that have a value at all. The four others skip rows whose value is not a number, and show a dash when none is.

A summary covers every row matching the current search and filters, not the page on screen. The pager moves under a total that stays put.

Which columns offer summaries is controlled per column: summable: true opts a column in, summable: false opts it out. When the flag is unset, columns with dataType: 'number' are summable automatically. Give the table a preference store (prefs={{ storage: 'employees' }}) and summary selections survive reloads, alongside column visibility and column order.

Every column header exposes a ⋮ menu (visible on hover and keyboard focus) that bundles the per-column actions, with no SmartFilterBar required. Each entry asks the same question the toolbar's tool of that name asks, so a column is never groupable from one and not from the other:

const columns: Column<Employee>[] = [
  { accessor: 'name', title: 'Name', sortable: true },
  { accessor: 'department', title: 'Department', sortable: true, groupable: true },
  {
    accessor: 'salary',
    title: 'Salary',
    sortable: true,
    summable: true,
    dataType: 'number',
    align: 'right'
  }
];

Hiding and restoring columns is covered in Column Configuration → Column Visibility.