Data display

Table

No consumers

Rows and columns of comparable data, with a sticky header row.

Importimport { Table } from "@/components/ui/Table";
Sourcesrc/components/ui/Table

Real table elements, so rows and columns are announced as such. Use a table when the reader will compare values down a column — a list of items each with one label is a list, not a table.

Default

TableRow takes selected for the highlighted state. TableCaption and TableFooter are available for a summary row.

PageStatusUpdated
Home
Published
2 hours ago
About
Draft
Yesterday
Pricing
Scheduled
Last week

Props

TableRow

PropTypeDefaultDescription
selectedbooleanApplies the selected-row fill.

Table parts

PropTypeDefaultDescription
Table / TableHeader / TableBody / TableFooter / TableHead / TableCell / TableCaptionnative table attributesThin styled wrappers around the corresponding HTML elements.