Data table

Shows rows with search, filters, sorting, selection, and pagination.

Projects

Search Projects

Project	Owner	Status	Open tasks	Budget
Studio North	Maya Chen	In progress	12	$24,800
Atlas	Sam Rivera	Review	8	$18,500
Field Notes	Jo Park	Published	3	$9,600
Signal	Maya Chen	In progress	18	$42,000
Morrow	Alex Kim	Review	5	$13,200
Orbit	Sam Rivera	Published	21	$31,800
Grain	Jo Park	On hold	0	$6,800
Horizon	Alex Kim	In progress	14	$27,300

Showing 1–8 of 24 rows

data-table-demo.tsx

"use client";import { Badge } from "@/components/vip-ui/badge";import { DataTable, type DataTableColumn } from "@/components/vip-ui/data-table";type Project = {  id: string;  name: string;  owner: string;  status: "In progress" | "Review" | "Published" | "On hold";  tasks: number;  budget: number;};const projects: Project[] = [  {    id: "north",    name: "Studio North",    owner: "Maya Chen",    status: "In progress",    tasks: 12,    budget: 24800,  },  {    id: "atlas",    name: "Atlas",    owner: "Sam Rivera",    status: "Review",    tasks: 8,    budget: 18500,  },  {    id: "field",    name: "Field Notes",    owner: "Jo Park",    status: "Published",    tasks: 3,    budget: 9600,  },  {    id: "signal",    name: "Signal",    owner: "Maya Chen",    status: "In progress",    tasks: 18,    budget: 42000,  },  {    id: "morrow",    name: "Morrow",    owner: "Alex Kim",    status: "Review",    tasks: 5,    budget: 13200,  },  {    id: "orbit",    name: "Orbit",    owner: "Sam Rivera",    status: "Published",    tasks: 21,    budget: 31800,  },  {    id: "grain",    name: "Grain",    owner: "Jo Park",    status: "On hold",    tasks: 0,    budget: 6800,  },  {    id: "horizon",    name: "Horizon",    owner: "Alex Kim",    status: "In progress",    tasks: 14,    budget: 27300,  },  {    id: "relay",    name: "Relay",    owner: "Maya Chen",    status: "Review",    tasks: 7,    budget: 15600,  },  {    id: "tidal",    name: "Tidal",    owner: "Sam Rivera",    status: "On hold",    tasks: 2,    budget: 8200,  },  {    id: "folio",    name: "Folio",    owner: "Jo Park",    status: "Published",    tasks: 11,    budget: 22400,  },  {    id: "ember",    name: "Ember",    owner: "Alex Kim",    status: "In progress",    tasks: 9,    budget: 19700,  },  {    id: "pioneer",    name: "Pioneer",    owner: "Maya Chen",    status: "Review",    tasks: 16,    budget: 35500,  },  {    id: "arc",    name: "Arc",    owner: "Sam Rivera",    status: "Published",    tasks: 4,    budget: 11900,  },  {    id: "grove",    name: "Grove",    owner: "Jo Park",    status: "In progress",    tasks: 13,    budget: 28600,  },  {    id: "current",    name: "Current",    owner: "Alex Kim",    status: "Review",    tasks: 6,    budget: 14300,  },  {    id: "lantern",    name: "Lantern",    owner: "Maya Chen",    status: "On hold",    tasks: 1,    budget: 7400,  },  {    id: "harbor",    name: "Harbor",    owner: "Sam Rivera",    status: "In progress",    tasks: 20,    budget: 38500,  },  {    id: "outline",    name: "Outline",    owner: "Jo Park",    status: "Published",    tasks: 10,    budget: 20400,  },  {    id: "summit",    name: "Summit",    owner: "Alex Kim",    status: "Review",    tasks: 15,    budget: 33700,  },  {    id: "lucent",    name: "Lucent",    owner: "Maya Chen",    status: "Published",    tasks: 2,    budget: 10100,  },  {    id: "weave",    name: "Weave",    owner: "Sam Rivera",    status: "In progress",    tasks: 17,    budget: 36100,  },  {    id: "frame",    name: "Frame",    owner: "Jo Park",    status: "Review",    tasks: 5,    budget: 12800,  },  {    id: "tempo",    name: "Tempo",    owner: "Alex Kim",    status: "In progress",    tasks: 19,    budget: 40100,  },];const statusVariants = {  "In progress": "accent",  Review: "warning",  Published: "success",  "On hold": "neutral",} as const;const currency = new Intl.NumberFormat("en-US", {  style: "currency",  currency: "USD",  maximumFractionDigits: 0,});const columns: DataTableColumn<Project>[] = [  {    id: "name",    header: "Project",    cell: (row) => <span className="font-medium">{row.name}</span>,    sortValue: (row) => row.name,  },  {    id: "owner",    header: "Owner",    cell: (row) => row.owner,    sortValue: (row) => row.owner,  },  {    id: "status",    header: "Status",    cell: (row) => (      <Badge variant={statusVariants[row.status]} dot>        {row.status}      </Badge>    ),    sortValue: (row) => row.status,  },  {    id: "tasks",    header: "Open tasks",    align: "end",    cell: (row) => <span className="tabular-nums">{row.tasks}</span>,    sortValue: (row) => row.tasks,  },  {    id: "budget",    header: "Budget",    align: "end",    cell: (row) => (      <span className="tabular-nums">{currency.format(row.budget)}</span>    ),    sortValue: (row) => row.budget,  },];export function DataTableDemo() {  return (    <DataTable      label="Projects"      rows={projects}      columns={columns}      getRowId={(row) => row.id}      getSearchText={(row) => `${row.name} ${row.owner} ${row.status}`}      pageSize={8}    />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-data-table.json

Column filters

A filtered column also needs sortValue.

Invoices

Search Invoices

Customer

Region

Status

Invoice	Customer	Region	Status	Amount
INV-1048	Acme Studio	Americas	Paid	$2,400
INV-1049	Northstar Labs	Europe	Overdue	$1,180
INV-1050	Fieldwork Co.	Asia Pacific	Pending	$3,750
INV-1051	Meridian Health	Americas	Paid	$890
INV-1052	Paperplane	Europe	Pending	$1,560
INV-1053	Atlas Works	Asia Pacific	Overdue	$4,200
INV-1054	Goodside	Americas	Paid	$640

Showing 1–7 of 22 rows

data-table-column-filters-demo.tsx

"use client";import { Badge } from "@/components/vip-ui/badge";import { DataTable, type DataTableColumn } from "@/components/vip-ui/data-table";type Invoice = {  id: string;  customer: string;  region: "Americas" | "Europe" | "Asia Pacific";  status: "Paid" | "Pending" | "Overdue";  amount: number;};const invoices: Invoice[] = [  {    id: "INV-1048",    customer: "Acme Studio",    region: "Americas",    status: "Paid",    amount: 2400,  },  {    id: "INV-1049",    customer: "Northstar Labs",    region: "Europe",    status: "Overdue",    amount: 1180,  },  {    id: "INV-1050",    customer: "Fieldwork Co.",    region: "Asia Pacific",    status: "Pending",    amount: 3750,  },  {    id: "INV-1051",    customer: "Meridian Health",    region: "Americas",    status: "Paid",    amount: 890,  },  {    id: "INV-1052",    customer: "Paperplane",    region: "Europe",    status: "Pending",    amount: 1560,  },  {    id: "INV-1053",    customer: "Atlas Works",    region: "Asia Pacific",    status: "Overdue",    amount: 4200,  },  {    id: "INV-1054",    customer: "Goodside",    region: "Americas",    status: "Paid",    amount: 640,  },  {    id: "INV-1055",    customer: "Morrow Design",    region: "Europe",    status: "Pending",    amount: 2100,  },  {    id: "INV-1056",    customer: "Beacon Media",    region: "Asia Pacific",    status: "Paid",    amount: 3250,  },  {    id: "INV-1057",    customer: "Pioneer Systems",    region: "Americas",    status: "Overdue",    amount: 2870,  },  {    id: "INV-1058",    customer: "Evergreen Co.",    region: "Europe",    status: "Paid",    amount: 1290,  },  {    id: "INV-1059",    customer: "Grain Partners",    region: "Asia Pacific",    status: "Pending",    amount: 1950,  },  {    id: "INV-1060",    customer: "Harbor Group",    region: "Americas",    status: "Pending",    amount: 4740,  },  {    id: "INV-1061",    customer: "Orbit Creative",    region: "Europe",    status: "Overdue",    amount: 780,  },  {    id: "INV-1062",    customer: "Folio Agency",    region: "Asia Pacific",    status: "Paid",    amount: 3640,  },  {    id: "INV-1063",    customer: "Tidal Research",    region: "Americas",    status: "Paid",    amount: 1720,  },  {    id: "INV-1064",    customer: "Signal House",    region: "Europe",    status: "Pending",    amount: 2260,  },  {    id: "INV-1065",    customer: "Frame & Form",    region: "Asia Pacific",    status: "Overdue",    amount: 3150,  },  {    id: "INV-1066",    customer: "Lucent Labs",    region: "Americas",    status: "Overdue",    amount: 980,  },  {    id: "INV-1067",    customer: "Summit Works",    region: "Europe",    status: "Paid",    amount: 5120,  },  {    id: "INV-1068",    customer: "Weave Studio",    region: "Asia Pacific",    status: "Pending",    amount: 1470,  },  {    id: "INV-1069",    customer: "Tempo Health",    region: "Americas",    status: "Paid",    amount: 2590,  },];const statusVariants = {  Paid: "success",  Pending: "accent",  Overdue: "warning",} as const;const currency = new Intl.NumberFormat("en-US", {  style: "currency",  currency: "USD",  maximumFractionDigits: 0,});const columns: DataTableColumn<Invoice>[] = [  {    id: "id",    header: "Invoice",    cell: (row) => <span className="font-medium">{row.id}</span>,    sortValue: (row) => row.id,  },  {    id: "customer",    header: "Customer",    cell: (row) => row.customer,    sortValue: (row) => row.customer,    filter: { type: "text" },  },  {    id: "region",    header: "Region",    cell: (row) => row.region,    sortValue: (row) => row.region,    filter: {      type: "select",      options: [        { id: "Americas", name: "Americas" },        { id: "Europe", name: "Europe" },        { id: "Asia Pacific", name: "Asia Pacific" },      ],    },  },  {    id: "status",    header: "Status",    cell: (row) => (      <Badge variant={statusVariants[row.status]} dot>        {row.status}      </Badge>    ),    sortValue: (row) => row.status,    filter: {      type: "select",      options: [        { id: "Paid", name: "Paid" },        { id: "Pending", name: "Pending" },        { id: "Overdue", name: "Overdue" },      ],    },  },  {    id: "amount",    header: "Amount",    align: "end",    cell: (row) => (      <span className="tabular-nums">{currency.format(row.amount)}</span>    ),    sortValue: (row) => row.amount,  },];export function DataTableColumnFiltersDemo() {  return (    <DataTable      label="Invoices"      rows={invoices}      columns={columns}      getRowId={(row) => row.id}      getSearchText={(row) => `${row.id} ${row.customer}`}      pageSize={7}      selectable={false}    />  );}

Resizable columns and row actions

Set width on a column to set its starting width. onRowAction runs when a user clicks a row or presses Enter on it.

Support tickets

Ticket	Title	Requester	Priority
T-311	Export fails for reports with more than 10,000 rows	Maya Chen	High
T-312	Add a dark theme to the invoice PDF	Sam Rivera	Low
T-313	Password reset email arrives late	Jo Park	Medium
T-314	Team invite link expires too soon	Alex Kim	Medium

Showing 1–4 of 4 rows

Select a row to open the ticket.

data-table-resizable-demo.tsx

"use client";import { useState } from "react";import { DataTable, type DataTableColumn } from "@/components/vip-ui/data-table";type Ticket = {  id: string;  title: string;  requester: string;  priority: "Low" | "Medium" | "High";};const tickets: Ticket[] = [  {    id: "T-311",    title: "Export fails for reports with more than 10,000 rows",    requester: "Maya Chen",    priority: "High",  },  {    id: "T-312",    title: "Add a dark theme to the invoice PDF",    requester: "Sam Rivera",    priority: "Low",  },  {    id: "T-313",    title: "Password reset email arrives late",    requester: "Jo Park",    priority: "Medium",  },  {    id: "T-314",    title: "Team invite link expires too soon",    requester: "Alex Kim",    priority: "Medium",  },];const priorityRank = { Low: 0, Medium: 1, High: 2 };const columns: DataTableColumn<Ticket>[] = [  {    id: "id",    header: "Ticket",    cell: (ticket) => <span className="font-medium">{ticket.id}</span>,    sortValue: (ticket) => ticket.id,    width: 110,  },  {    id: "title",    header: "Title",    cell: (ticket) => <span className="block truncate">{ticket.title}</span>,    width: "2fr",    minWidth: 160,  },  {    id: "requester",    header: "Requester",    cell: (ticket) => ticket.requester,    sortValue: (ticket) => ticket.requester,    width: "1fr",  },  {    id: "priority",    header: "Priority",    cell: (ticket) => ticket.priority,    sortValue: (ticket) => priorityRank[ticket.priority],    width: 120,  },];export function DataTableResizableDemo() {  const [opened, setOpened] = useState<string | null>(null);  return (    <div className="grid w-full max-w-3xl gap-2">      <DataTable        label="Support tickets"        rows={tickets}        columns={columns}        getRowId={(ticket) => ticket.id}        resizable        selectable={false}        onRowAction={(key) => setOpened(String(key))}      />      <output aria-live="polite" className="text-sm text-muted-foreground">        {opened ? `Opened ${opened}` : "Select a row to open the ticket."}      </output>    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Table (opens in a new tab).

DataTable

label: stringRequired: Names the table and its search and pagination controls.
rows: readonly T[]Required: All the rows. The table searches, filters, sorts, and pages them in the browser.
columns: readonly DataTableColumn<T>[]Required: Column definitions. The first column labels each row.
getRowId: (row: T) => KeyRequired: Returns a unique, stable key for each row.
getSearchText: (row: T) => string: Shows a search field. Return all the text that search can find in a row.
pageSize: number = 5: Rows on each page.
selectable: boolean = true: Shows a selection checkbox in each row. Select all selects only the rows on the current page.
selectedKeys: Iterable<Key>: The selected row keys, controlled. The selection stays when the page, search, or filters change.
defaultSelectedKeys: Iterable<Key>: The row keys that are selected at first, uncontrolled. Without it, no rows are selected.
onSelectionChange: (keys: Set<Key>) => void: Receives selected row keys, including keys on other pages.
disabledKeys: Iterable<Key>: Rows that cannot be selected or focused.
onRowAction: (key: Key) => void: Called when a user clicks a row or presses Enter on it. The checkbox still selects the row.
resizable: boolean = false: Adds a resize handle to each column header.

DataTableColumn

id: stringRequired: A stable key for the column.
header: stringRequired: The visible column header. A column filter uses it as its label.
cell: (row: T) => ReactNodeRequired: Renders the cell for a row.
sortValue: (row: T) => string | number: Turns on sorting for the column. Return a string or a number. Column filters use this value too.
align: "start" | "end" = "start": Aligns the header and cells. Use end for numbers.
width: number | string: Starting width in pixels, a percentage, or a fraction such as "2fr".
minWidth: number | string: Smallest width the column can resize to.
filter: { type: "text" } | { type: "select"; options: readonly SelectOption[] }: Adds a text or single-choice filter for a column with sortValue. Filters combine with search before sorting and pagination.