Data Table

React data table with sortable columns, row selection, a floating bulk actions bar, hover row actions, sticky header, three densities and skeleton loading.

src/registry/ui/data-table.tsx/r/data-table.json

Invoices

NL Northwind Labs billing@northwind.io	INV-2041	Paid	Sep 24	$12,400
AR Acme Robotics ap@acme.dev	INV-2040	Pending	Sep 22	$3,890
G Globex finance@globex.com	INV-2039	Overdue	Sep 12	$890
I Initech peter@initech.co	INV-2038	Paid	Sep 10	$5,200
UH Umbrella Health ops@umbrella.health	INV-2037	Paid	Sep 8	$21,750
H Hooli gavin@hooli.xyz	INV-2036	Refunded	Sep 3	$1,450
SI Stark Industrial pepper@stark.io	INV-2035	Pending	Aug 29	$9,980
WF Wayne Freight lucius@wayne.co	INV-2034	Paid	Aug 27	$6,300

Sort, select, hover a row

Installation#

bash

npx shadcn@latest add @minidev/data-table

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/data-table.json

Usage#

tsx

import { DataTable } from "@/components/ui/data-table"

export function Example() {
  return (
    <DataTable
      data={filtered}
      columns={[
        { id: "name", header: "Name", sortValue: (r) => r.name, cell: (r) => r.name },
        { id: "plan", header: "Plan", cell: (r) => r.plan },
        { id: "status", header: "Status", cell: (r) => (
          <StatusBadge tone={r.status === "active" ? "success" : r.status === "past_due" ? "danger" : "warning"}>{r.status}</StatusBadge>
        ) },
      ]}
    />
  )
}

API reference#

DataTable props
Prop	Type	Default
`columns`	`Column<T>[]`	`SAMPLE_COLUMNS`
`data`	`T[]`	`SAMPLE_ROWS`
`getRowId`	`(row: T, index: number) => string`	`(_r, i) => String(i)`
`selectable`	`boolean`	`-`
`selected`	`string[]`	`-`
`onSelectedChange`	`(ids: string[]) => void`	`-`
`bulkActions`	`(ids: string[]) => React.ReactNode`	`-`
`rowActions`	`(row: T) => React.ReactNode`	`-`
`onRowClick`	`(row: T) => void`	`-`
`defaultSort`	`Sort`	`null`
`density`	`Density`	`"default"`
`loading`	`boolean`	`-`
`maxHeight`	`number \| string`	`-`
`empty`	`React.ReactNode`	`-`
`caption`	`string`	`-`
`className`	`string`	`-`