Data Table
Configuration-driven data grid. Pass columns and rows to get hairline inset dividers, row hover, a selected-row accent edge, and a mobile column-priority fold that tucks low-priority columns behind a per-row info tooltip instead of a horizontal scrollbar.
| 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/andromeda-data-table2
For dark mode, add the dark class to your <html> element:
<html class="dark">Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | Array<{key: string, header: string, 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}> | DEFAULT_COLUMNS | Column definitions. `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 | 'track-02' | Identifies the current row shown with an active measurement edge. |
| className | string | '' | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | {} | Inline styles applied to the root element. |
AI Canvas