Data Table
One component, 724 by 369, and no variant axis anywhere. The only page in the kit that publishes a finished thing rather than a set of switches.
A finished table rather than a kit of parts
Data Table is the only page in the kit that publishes a single component with no variant axis at all. There is nothing to switch: you drop in one 724 by 369 table and edit the rows. A table's variability is in its data and its columns, and neither of those is something a variant dropdown can hold.
| Part | Size | Detail |
|---|---|---|
| Header | 724 × 64 | 16 above and below, filter left, Columns right |
| Head Row | 724 × 40 | labels at weight 500, a sort arrow on the wide column |
| Row 1 to 5 | 724 × 41 | 40 of content plus its own 1px rule at the foot |
| Cells | 32 · 118 · 431 · 99 · 44 | 8px side padding, 6px gap; amount is right aligned |
| Footer | 724 × 60 | selection count left, Previous and Next right at radius 8 |
The filter field is a real Input instance, the Columns button a real Button, and every checkbox a real Checkbox. The rows and cells are local boards rather than instances of the Table component, so column widths stay editable without detaching anything. Change base.border once and the rules, the field and the buttons all move together.
shadcn/ui hangs a dropdown off both the Columns button and each row's dots: a checkbox list of hideable columns on one, and Copy payment ID, a rule, then View customer and View payment details on the other. The Penpot file draws both at rest, which is all a design file can do, so they are wired up in the preview above. Hide a column and the wide one absorbs the space, keeping the table at 724.
In the Invoices example the two selected rows had their checkbox painted base.primary but with no tick inside: the instance had been recoloured rather than switched to the Checked variant, so it read as a solid dark square. Both are now the real checked Checkbox, and the table's size is unchanged.
The same table twice, with different data
852 by 1101, holding two copies. Payments has nothing selected and the filter still showing its placeholder; Invoices has a query typed in, two rows picked and the footer counting them. Both are the same component, which is the point being made. Switch between them at the top of this page.
One component, no variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Data Table
Because what varies in a table is its data and its columns, and neither fits in a variant dropdown. Drawing Rows: 5 · 10 · 20 as an axis would triple the file for no gain, since you edit the rows either way. It is the one component here published as a finished thing.
No, the rows and cells are local boards. Table is published separately with its own cell variants, but a data table needs column widths you can drag, and a local board lets you do that without detaching. What is borrowed is everything interactive: the filter is an Input, the Columns and pager buttons are Buttons, and every checkbox is a Checkbox.
The extra pixel is the rule. Every body row carries its own 1px base.border along the bottom rather than the table drawing dividers between them, so deleting a row takes its rule with it and nothing has to be tidied up afterwards.
A 44px cell holding Tabler's horizontal dots, the row action menu. It is centred on body rows and empty in the head, which is why that one cell is the only place where the head row and the body rows do not line up their alignment.