Data Table

Data-driven table with sorting, selection, loading, and empty states.

Preview

NameEmailRoleStatus


Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Charlie Brown	charlie@example.com	Viewer	Inactive
Diana Prince	diana@example.com	Admin	Active
Eve Wilson	eve@example.com	Editor	Pending

Installation

npx drivn add data-table

Usage

1 import { useState } from "react"
2 import { DataTable } from "@/components/ui/data-table"
3 
4 const columns = [
5   { id: "name", header: "Name" },
6   { id: "email", header: "Email" },
7   { id: "role", header: "Role" },
8 ]
9 
10 const users = [
11   { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "Admin", status: "Active" },
12   { id: "2", name: "Bob Smith", email: "bob@example.com", role: "Editor", status: "Active" },
13   { id: "3", name: "Charlie Brown", email: "charlie@example.com", role: "Viewer", status: "Inactive" },
14   { id: "4", name: "Diana Prince", email: "diana@example.com", role: "Admin", status: "Active" },
15   { id: "5", name: "Eve Wilson", email: "eve@example.com", role: "Editor", status: "Pending" },
16 ]
17 
18 export default function Page() {
19   return (
20     <DataTable
21       data={users}
22       columns={columns}
23       rowKey="id"
24     />
25   )
26 }

Sortable

Click column headers to cycle through ascending, descending, and unsorted.


Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Charlie Brown	charlie@example.com	Viewer
Diana Prince	diana@example.com	Admin
Eve Wilson	eve@example.com	Editor

Row Selection

Checkbox column with select all and individual row toggling.

0 of 5 selected

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Charlie Brown	charlie@example.com	Viewer
Diana Prince	diana@example.com	Admin
Eve Wilson	eve@example.com	Editor

Custom Cells

Use the cell renderer for badges, icons, or action buttons.

Name	Role	Status
Alice Johnson	Admin	Active
Bob Smith	Editor	Active
Charlie Brown	Viewer	Inactive
Diana Prince	Admin	Active
Eve Wilson	Editor	Pending

Search Filter

Use the toolbar slot with an Input to filter rows.

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Charlie Brown	charlie@example.com	Viewer
Diana Prince	diana@example.com	Admin
Eve Wilson	eve@example.com	Editor

Column Visibility

Use a Select with Checkboxes inside the Menu to toggle columns.

NameEmailRoleStatus

Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Charlie Brown	charlie@example.com	Viewer	Inactive
Diana Prince	diana@example.com	Admin	Active
Eve Wilson	eve@example.com	Editor	Pending

Empty State

Name	Email	Role
No results.

Loading State

Name	Email	Role

With Pagination

Slice data externally and use DataTable.Pagination in the footer slot.

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Charlie Brown	charlie@example.com	Viewer

Page 1 of 2

Variants

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Charlie Brown	charlie@example.com	Viewer
Diana Prince	diana@example.com	Admin
Eve Wilson	eve@example.com	Editor

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Charlie Brown	charlie@example.com	Viewer
Diana Prince	diana@example.com	Admin
Eve Wilson	eve@example.com	Editor

API Reference

DataTable

Prop	Type	Default	Description
`data`	T[]	—	Array of row data objects
`columns`	ColumnDef<T>[]	—	Column definitions array
`rowKey`	string	—	Property name used as unique row key
`variant`	"default" \| "striped" \| "bordered"	"default"	Visual variant passed to the underlying Table
`sortable`	boolean	false	Enable sorting on all columns
`onSortChange`	(sort: { id: string; direction: "asc" \| "desc" }) => void	—	Callback when sort state changes
`selectable`	boolean	false	Enable row selection checkboxes
`onSelectionChange`	(keys: Set<string>) => void	—	Callback when selection changes
`loading`	boolean	false	Show skeleton loading rows
`toolbar`	ReactNode	—	Content rendered above the table
`footer`	ReactNode	—	Content rendered below the table
`className`	string	—	Additional class on the root

ColumnDef

Prop	Type	Default	Description
`id`	string	—	Unique column identifier
`header`	string	—	Column header label
`cell`	(value: unknown, row: T) => ReactNode	—	Custom cell renderer
`align`	"left" \| "center" \| "right"	—	Cell text alignment
`width`	string	—	Fixed column width (CSS value)
`sortable`	boolean	—	Override root sortable for this column

DataTable.Pagination

Prop	Type	Default	Description
`page`	number	—	Current active page (1-based)
`pageCount`	number	—	Total number of pages
`onPageChange`	(page: number) => void	—	Callback when page changes
`className`	string	—	Additional class on the nav

1	import { useState } from "react"
2	import { DataTable } from "@/components/ui/data-table"
3
4	const columns = [
5	{ id: "name", header: "Name" },
6	{ id: "email", header: "Email" },
7	{ id: "role", header: "Role" },
8	]
9
10	const users = [
11	{ id: "1", name: "Alice Johnson", email: "alice@example.com", role: "Admin", status: "Active" },
12	{ id: "2", name: "Bob Smith", email: "bob@example.com", role: "Editor", status: "Active" },
13	{ id: "3", name: "Charlie Brown", email: "charlie@example.com", role: "Viewer", status: "Inactive" },
14	{ id: "4", name: "Diana Prince", email: "diana@example.com", role: "Admin", status: "Active" },
15	{ id: "5", name: "Eve Wilson", email: "eve@example.com", role: "Editor", status: "Pending" },
16	]
17
18	export default function Page() {
19	return (
20	<DataTable
21	data={users}
22	columns={columns}
23	rowKey="id"
24	/>
25	)
26	}