Table
A generic, selectable data table: column definitions drive fully custom cell rendering.
| Customer | Plan | Status |
|---|---|---|
 Amara Kalu | Pro | active |
 Ravi Menon | Team | trial |
 Chidi Duru | Pro | churned |
A column that is not data
Table<T> is generic: every column's key must be a field of your row type (keyof T & string). A delete button or a menu is not data, so give the row type an optional never field for it and render the control. A key that is not on the row type does not compile.
| Customer | |
|---|---|
| Olivia Carter | |
| Noah Kim |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | TableColumn<T>[] | Column definitions: key, header, optional render(). | |
| rows | T[] | The row data. | |
| selectable | boolean | false | Adds a checkbox column for row selection. |
| reorderable | boolean | false | Enables drag-to-reorder on rows. |
| bordered | boolean | true | Draws the table's own container border/radius. |
| responsive | 'auto' | 'default' | 'stacked' | 'auto' | 'auto' switches to a stacked card layout below 640px. |
Why it works this way
Why
- Rows are 44px with subtle dividers for dense, comparable data. Selection uses a lightly shadowed checkbox rather than a heavy outline, so a table of many rows stays calm.
Don't
- Don't use a table for layout, or for a handful of items. Use List items or Cards.