Table

Tables display tabular data with sortable columns and keyboard navigation. Built on the same navigator pattern as List, the Table component auto-derives columns from your data or accepts custom column definitions with labels, formatters, and alignment.

Notable features:

• Auto-derives columns from data keys — get started with just an array of objects
• Click column headers to sort (ascending → descending → none)
• Hold Shift and click to sort by multiple columns
• Keyboard navigation with arrow keys, Home, End, and Enter to select
• Custom columns with labels, width, alignment, and cell formatters
• Compose with SearchFilter for powerful filtering

Basic Example

Pass an array of objects to the data prop. The Table auto-derives column headers from the object keys. Click a row to select it:

Sorting

All columns are sortable by default. Click a column header to cycle through ascending, descending, and unsorted states. Hold Shift while clicking to add secondary sort columns.

Custom Columns

Provide a columns array to control which fields are shown, their labels, width, alignment, and how values are formatted. Here's an example column definition:

The formatter function receives the cell value and the full row object, returning a display string. Set sortable: false on a column to disable sorting for that column.

Filtering with SearchFilter

The SearchFilter component parses search queries into structured filters. Compose it with Table by passing the filtered data:

SearchFilter supports free text search (matches all columns), column:value syntax, and comparison operators like age>30, salary>=90000.