DataTable

Usage

Use it for:

• Lists of records people scan, sort and act on (transactions, tasks, invoices).
• Bulk actions on a selection.

Avoid it when:

• Fewer than ~5 rows of reference data: a plain Table or a list reads better.
• Cells need inline editing like a spreadsheet: use the database TableView module.
• Cards with images or rich previews: use a Grid of Cards.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

Examples

Transactions: sorting, selection and pagination

Controlled sort and selection; the page slices the sorted rows and Pagination moves through them. Category and Account hide on small screens (hideBelow).

Uncontrolled sorting, row click and sticky header

Without sort the table sorts itself (numbers numerically, text naturally, dates in order). maxHeight keeps the header in view. onRowClick makes the merchant cell a button.

Built-in paging

pageSize pages the sorted rows and adds a Pagination footer; pass page / onPageChange to control it. Sorting returns to page 1.

Loading and empty

API Reference

DataTable

Generic over the row type: DataTable<Row>.

DataTableColumn

One column definition.

Accessibility

Keyboard:

• Tab: header checkbox → sort buttons → each row’s checkbox and row button, in reading order.
• Space: toggles a checkbox. Enter / Space on a sort button cycles the sort; on a row button, opens the row.
• ← →: scroll the table container when it is wider than the screen.

ARIA and semantics:

• Native table semantics with aria-sort on sortable headers.
• The select-all checkbox is mixed (indeterminate) when some rows on the page are selected.
• Row checkboxes are named "Select <first column text>" (override with getRowLabel).
• Row click never nests controls: the keyboard target is one button in the first cell, and clicks on other controls in the row are ignored.
• While loading, the table is aria-busy and a polite status says "Loading"; skeletons are hidden from assistive technology.