Skip to content
Drivn logoDrivn

Table

Data table with dot notation, variants, and responsive overflow.

Preview

NameRoleStatus
AliceEngineerActive
BobDesignerActive
CharliePMAway

Installation

npx drivn add table

Usage

1import { Table } from "@/components/ui/table"
2
3export 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.

NameRoleStatus
AliceEngineerActive
BobDesignerActive
CharliePMAway

Bordered

Visible cell borders for structured data.

NameRoleStatus
AliceEngineerActive
BobDesignerActive
CharliePMAway

API Reference

Table

PropTypeDefaultDescription
variant"default" | "striped" | "bordered""default"Visual style of the table
classNamestringAdditional CSS classes to apply
childrenReactNodeTable sub-components (Caption, Header, Body, Footer)

Table.Caption

PropTypeDefaultDescription
classNamestringAdditional CSS classes to apply
childrenReactNodeCaption text content

Table.Header

PropTypeDefaultDescription
classNamestringAdditional CSS classes to apply
childrenReactNodeTable.Row elements containing header cells

Table.Body

PropTypeDefaultDescription
classNamestringAdditional CSS classes to apply
childrenReactNodeTable.Row elements containing data cells

Table.Footer

PropTypeDefaultDescription
classNamestringAdditional CSS classes to apply
childrenReactNodeTable.Row elements for footer content

Table.Row

PropTypeDefaultDescription
classNamestringAdditional CSS classes to apply
childrenReactNodeTable.Head or Table.Cell elements

Table.Head

PropTypeDefaultDescription
scope"col" | "row" | "colgroup" | "rowgroup""col"Defines the cells this header relates to
align"left" | "center" | "right"Text alignment within the cell
classNamestringAdditional CSS classes to apply
childrenReactNodeHeader cell content

Table.Cell

PropTypeDefaultDescription
colSpannumberNumber of columns the cell should span
align"left" | "center" | "right"Text alignment within the cell
classNamestringAdditional CSS classes to apply
childrenReactNodeCell content