Table Data
Renders a table from a column definition and a set of rows.
| Track | ||
|---|---|---|
Configurations
Supported configurations for this component.
Configurations
2 examplesSelected row
| Track | ||
|---|---|---|
No selection
| Track | ||
|---|---|---|
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | Array<{key: string, header: React.ReactNode, width?: string|number, align?: 'left'|'center'|'right', hideBelow?: 'md', fold?: 'info'|'meta'|'none', infoValue?: (row: object) => React.ReactNode, primary?: boolean, color?: string|((row: object) => string), render?: (row: object) => React.ReactNode, sortable?: boolean, sortValue?: (row: object) => string|number}> | DEFAULT_COLUMNS | Column definitions. `sortable` makes the header a sort control; `sortValue` supplies what to compare when the cell is visual or the raw field would sort wrong. `hideBelow:'md'` hides the column on phones; it then folds into the per-row info tooltip (`fold:'info'`, the default), the primary column's mobile sub-line (`fold:'meta'`), or nowhere (`fold:'none'`). `infoValue` supplies the textual value shown in a fold (use it for visual cells like meters); `render` is the desktop cell. |
| rows | Array<object> | DEFAULT_ROWS | Row objects consumed by the column definitions. |
| getRowKey | (row: object) => string|number | DEFAULT_GET_ROW_KEY | Returns a stable key for each row. |
| onRowClick | (row: object) => void | DEFAULT_ON_ROW_CLICK | Runs when a non-interactive area of a row is clicked. |
| selectedRowKey | string|number|null | null | Key of the current row, shown with an active measurement edge. Null or omitted marks no row. |
| selectable | boolean | false | Adds a leading checkbox column with a select-all in the header. Selection is controlled: pass `selectedKeys` and handle `onSelectionChange`. |
| selectedKeys | Array<string|number> | [] | Keys of the currently selected rows. Only read when `selectable`. |
| onSelectionChange | (keys: Array<string|number>) => void | - | Called with the next full selection whenever a row checkbox or the select-all is toggled. |
| defaultSort | {key: string, dir: 'asc'|'desc'} | - | Column the table opens sorted by. Omit and every sortable header shows its neutral marker until the reader picks one — a table that arrives pre-sorted with no one having asked reads as a bug. |
| onSortChange | (sort: {key: string, dir: 'asc'|'desc'}) => void | - | Called after each header click. The table sorts itself either way; this is for callers that mirror the state elsewhere. |
| layout | 'fixed'|'auto' | 'fixed' | Column sizing. `fixed` splits the width evenly (or by each column's `width`); `auto` lets the content set it, which a wide operational table needs. |
| dividers | boolean | true | Draws the inset hairline under every row but the last. Set false for a table that separates its rows by rhythm alone; the header keeps its rule either way, since that one divides two different things rather than two rows of the same thing. |
| className | string | '' | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | {} | Inline styles applied to the root element. |
AI Canvas