Skip to main content

Sorting

Prop enableSorting — engine behaviour, default true.

Guide​

When to use it​

On by default — click a header to sort, shift-click to add a secondary sort. Turn it off for grids where order is fixed (a ledger, a ranked list).

How it works​

Wraps the engine's sorting with multi-column support and per-column sort functions (column.sortFn: 'alphanumeric', 'basic', 'datetime', or your own).

Gotchas​

  • The row-number column (enableRowNumbers) never sorts — it always numbers the current view.
  • At the million-row tier, sort server-side via manual mode; the flag stays the same.

Live example​

Example source
import React from 'react'
import { BstTableMui } from '@bloomskill/table-mui'
import type { BstTableColumn } from '@bloomskill/table-engine'
import '@bloomskill/table-engine/styles.css'

type Row = { id: string; name: string; team: string; role: string; score: number }
const seed: Row[] = [
  { id: '1', name: 'Ada Lovelace',   team: 'Platform', role: 'Engineer', score: 92 },
  { id: '2', name: 'Alan Turing',    team: 'Research', role: 'Scientist', score: 88 },
  { id: '3', name: 'Grace Hopper',   team: 'Platform', role: 'Engineer', score: 95 },
  { id: '4', name: 'Katherine J.',   team: 'Research', role: 'Analyst',  score: 90 },
  { id: '5', name: 'Edsger Dijkstra',team: 'Platform', role: 'Architect',score: 84 },
]
const columns: BstTableColumn<Row>[] = [
  { id: 'name',  accessorKey: 'name',  header: 'Name' },
  { id: 'team',  accessorKey: 'team',  header: 'Team' },
  { id: 'role',  accessorKey: 'role',  header: 'Role' },
  { id: 'score', accessorKey: 'score', header: 'Score', sortFn: 'basic' },
]

export default function App() {
  return (
    <BstTableMui data={seed} columns={columns} getRowId={(r) => r.id}
      pagination={{ pageSize: 5 }} />
  )
}
Loading live example…

Overview​

Layerenable* (engine, resolved in useBstTable)
Typeboolean
Defaulttrue
Maps tov9 enableSorting
Status✅ done
Settings sheetData operations

Column context handed to the headerCell class/style slot. / export interface BstHeaderSlotContext { columnId: string } /* Consumer-owned class names for the grid's structural slots — the custom-CSS hook. Static strings for fixed parts; headerCell / row / cell also accept a function for per-item classes. Every slot composes with (never replaces) the built-in bst-* classes, so themes keep working. root targets the same element as the <BstTable className> prop (the scroll wrapper). Slots map to: root→.bst-table-scroll, table→<table>, header→<thead>, headerRow→header <tr>, headerCell→<th>, filterRow→the per-column filter <tr>, body→<tbody>, row→body <tr>, cell→body <td>, empty→the "No rows" <td>. / export interface BstClassNames<TData extends RowData = any> { root?: string table?: string header?: string headerRow?: string headerCell?: string | ((ctx: BstHeaderSlotContext) => string | undefined) filterRow?: string body?: string row?: string | ((ctx: BstRowContext<TData>) => string | undefined) cell?: string | ((ctx: CellRenderProps<TData>) => string | undefined) empty?: string } /** Inline styles / CSS variables per structural slot — parallels {@link BstClassNames}. / export interface BstStyles<TData extends RowData = any> { root?: React.CSSProperties table?: React.CSSProperties header?: React.CSSProperties headerRow?: React.CSSProperties headerCell?: | React.CSSProperties | ((ctx: BstHeaderSlotContext) => React.CSSProperties | undefined) filterRow?: React.CSSProperties body?: React.CSSProperties row?: React.CSSProperties | ((ctx: BstRowContext<TData>) => React.CSSProperties | undefined) cell?: React.CSSProperties | ((ctx: CellRenderProps<TData>) => React.CSSProperties | undefined) empty?: React.CSSProperties } /* Engine-behaviour toggles (§12 enable* layer). OOTB data features default ON (opt-out); heavy features (editing, validation) default OFF (opt-in). / export interface BstTableEngineToggles { /** Column sorting. Maps to v9 enableSorting. Default: true.

Enable it​

<BstTableMui
  data={rows}
  columns={columns}
  enableSorting
/>

Swap BstTableMui for BstTableShadcn (and the CSS import) for the shadcn skin — same props.

Spec coverage​

Spec codes (A1, C2, X8, …) are Bst-Table's internal requirement IDs from the capability matrix; P0–P2 mark the delivery phase. They are traceability tags, not part of the public API.

  • K1 · Dynamic cell styling — ✅ built. v0.10.0 slots + v0.18.0 conditionalFormats
  • K2 · Dynamic row styling — ✅ built. slots (classNames.row/styles.row) + row-scope rules