Table
Data table with dot notation, variants, and responsive overflow.
Preview
| Name | Role | Status |
|---|---|---|
| Alice | Engineer | Active |
| Bob | Designer | Active |
| Charlie | PM | Away |
Installation
npx drivn add tableUsage
1 import { Table } from "@/components/ui/table" 2 3 export default function Page() { 4 return ( 5 <Table> 6 <Table.Header> 7 <Table.Row> 8 <Table.Head>Name</Table.Head> 9 <Table.Head>Role</Table.Head> 10 <Table.Head>Status</Table.Head> 11 </Table.Row> 12 </Table.Header> 13 <Table.Body> 14 <Table.Row> 15 <Table.Cell>Alice</Table.Cell> 16 <Table.Cell>Engineer</Table.Cell> 17 <Table.Cell>Active</Table.Cell> 18 </Table.Row> 19 <Table.Row> 20 <Table.Cell>Bob</Table.Cell> 21 <Table.Cell>Designer</Table.Cell> 22 <Table.Cell>Active</Table.Cell> 23 </Table.Row> 24 </Table.Body> 25 </Table> 26 ) 27 }
Striped
Alternating row backgrounds for easier scanning.
| Name | Role | Status |
|---|---|---|
| Alice | Engineer | Active |
| Bob | Designer | Active |
| Charlie | PM | Away |
Bordered
Visible cell borders for structured data.
| Name | Role | Status |
|---|---|---|
| Alice | Engineer | Active |
| Bob | Designer | Active |
| Charlie | PM | Away |
API Reference
Table
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "striped" | "bordered" | "default" | Visual style of the table |
className | string | — | Additional CSS classes to apply |
children | ReactNode | — | Table sub-components (Caption, Header, Body, Footer) |
Table.Caption
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply |
children | ReactNode | — | Caption text content |
Table.Header
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply |
children | ReactNode | — | Table.Row elements containing header cells |
Table.Body
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply |
children | ReactNode | — | Table.Row elements containing data cells |
Table.Footer
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply |
children | ReactNode | — | Table.Row elements for footer content |
Table.Row
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply |
children | ReactNode | — | Table.Head or Table.Cell elements |
Table.Head
| Prop | Type | Default | Description |
|---|---|---|---|
scope | "col" | "row" | "colgroup" | "rowgroup" | "col" | Defines the cells this header relates to |
align | "left" | "center" | "right" | — | Text alignment within the cell |
className | string | — | Additional CSS classes to apply |
children | ReactNode | — | Header cell content |
Table.Cell
| Prop | Type | Default | Description |
|---|---|---|---|
colSpan | number | — | Number of columns the cell should span |
align | "left" | "center" | "right" | — | Text alignment within the cell |
className | string | — | Additional CSS classes to apply |
children | ReactNode | — | Cell content |