Data Table

Sortable columns — click a header to cycle

Columns with sortable: true cycle none → ascending → descending → none on click and emit aria-sort on the active header. Sort uses locale-aware numeric comparison so "12" sorts after "2", not before it. Alignments are logical (start / center / end) so price + area columns flip correctly in RTL.

Sizes — sm · md · lg

Three sizes match the Table component's density scale so the two compose visually. Use sm for admin lists, md as the default, and lg when the table is the page's centerpiece.

Empty state — built-in + EmptyState pattern

When data is empty, DataTable renders the emptyMessage in a single full-width row. For richer empty UX (filtered-zero, no-data-yet), render an EmptyState below the table or in place of it.

…or render a richer EmptyState

Clickable rows — onRowClick

Pass onRowClick to make whole rows navigable. The cursor switches to pointer and hover tints. Nested interactive children (Buttons, DropdownMenu triggers) should call e.stopPropagation() if they need to bypass the row click.