Components / Data Table
Data Table
Every tabular area list: accounts, live posts, invoices. One component owns the sticky header, sorting, skeleton loading, row click, selection, and infinite scroll.
import { DataTable, type DataTableColumn } from '@layers/ui/data-table'Rendered stock
House rules
- DataTable is the one table. Area lists render through it, never a hand-rolled table element or a stack of row divs.
- Numeric columns set align="right" and cellClassName="tabular-nums".
- Sorting is a two-state toggle between ascending and descending. Uncontrolled tables supply sortValue per column; server-sorted tables pass sortField, sortDirection, and onSort with pre-sorted data.
- List data behind the table is cursor-paginated; infinite scroll goes through onScroll plus isFetchingMore, and loading renders skeleton rows via isLoading.