Skip to content
Drivn

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
classNamestring—Additional CSS classes to apply
childrenReactNode—Table sub-components (Caption, Header, Body, Footer)

Table.Caption

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply
childrenReactNode—Caption text content

Table.Header

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply
childrenReactNode—Table.Row elements containing header cells

Table.Body

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply
childrenReactNode—Table.Row elements containing data cells

Table.Footer

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply
childrenReactNode—Table.Row elements for footer content

Table.Row

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply
childrenReactNode—Table.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
classNamestring—Additional CSS classes to apply
childrenReactNode—Header cell content

Table.Cell

PropTypeDefaultDescription
colSpannumber—Number of columns the cell should span
align"left" | "center" | "right"—Text alignment within the cell
classNamestring—Additional CSS classes to apply
childrenReactNode—Cell content