@edux-design/tables
v0.0.1
Published
Unstyled table primitives that let consumers describe table structure declaratively without inheriting any opinionated styles.
Readme
@edux-design/tables
Unstyled table primitives that let consumers describe table structure declaratively without inheriting any opinionated styles.
Installation
npm install @edux-design/tablesUsage
import { Table, Caption, Head, HeaderRow, HeaderCell, Body, Row, Cell } from "@edux-design/tables";
<Table>
<Caption>Invoices</Caption>
<Table.Head>
<HeaderRow>
<HeaderCell>Invoice #</HeaderCell>
<HeaderCell>Amount</HeaderCell>
</HeaderRow>
</Table.Head>
<Body>
<GroupRow>
<Cell colSpan={2}>Q1</Cell>
</GroupRow>
<Row>
<Cell>2024-001</Cell>
<Cell>$120.00</Cell>
</Row>
</Body>
</Table>All components simply render the matching HTML element and forward refs/props, so teams can apply their own design systems as needed.
Row striping
Pass isStriped to Table to alternate row background colors (e.g., bg-bg-base and bg-bg-minimal).
<Table isStriped>
<Head>
<HeaderRow>
<HeaderCell>A</HeaderCell>
<HeaderCell>B</HeaderCell>
</HeaderRow>
</Head>
<Body>
<Row>
<Cell>1</Cell>
<Cell>2</Cell>
</Row>
<Row>
<Cell>3</Cell>
<Cell>4</Cell>
</Row>
</Body>
{/* Rows render with alternating `bg-bg-base` and `bg-bg-minimal` */}
</Table>Draggable rows (optional)
Grouped rows
Use Table.GroupedRow to render a single, full-width row without inner cell borders, with a subtle background.
<Table>
<Head>
<HeaderRow>
<HeaderCell>A</HeaderCell>
<HeaderCell>B</HeaderCell>
<HeaderCell>C</HeaderCell>
</HeaderRow>
</Head>
<Body>
<Row>
<Cell>1</Cell>
<Cell>2</Cell>
<Cell>3</Cell>
</Row>
<Table.GroupedRow>Section summary or note</Table.GroupedRow>
</Body>
</Table>Notes:
- Spans all columns automatically.
- Uses
bg-bg-minimal-5background.
Enable row reordering with dnd-kit by setting draggable on Table and handling onReorder.
import { Table, Head, HeaderRow, HeaderCell, Body, Row, Cell } from "@edux-design/tables";
function Example() {
const [rows, setRows] = React.useState([
{ a: 1, b: 2, c: 3 },
{ a: 4, b: 5, c: 6 },
]);
return (
<Table draggable onReorder={({ fromIndex, toIndex }) =>
setRows((prev) => {
const next = prev.slice();
const [moved] = next.splice(fromIndex, 1);
next.splice(toIndex, 0, moved);
return next;
})
}>
<Head>
<HeaderRow>
<HeaderCell>A</HeaderCell>
<HeaderCell>B</HeaderCell>
<HeaderCell>C</HeaderCell>
</HeaderRow>
</Head>
<Body>
{rows.map((r, i) => (
<Row key={`${r.a}-${i}`}>
<Cell>{r.a}</Cell>
<Cell>{r.b}</Cell>
<Cell>{r.c}</Cell>
</Row>
))}
</Body>
</Table>
);
}Notes:
- The drag handle appears inside the first cell of each row.
onReorderis onTableand receives{ fromIndex, toIndex }.- Dragging is limited to within the same
Table.Body.