Data Table

Render typed records using a reusable TanStack Table v9 composition.

View component source ↗

Preview

Example

A minimal example to get started.

Project	Status
Design system	Active
Website	Draft

Installation

Install this component and its dependencies in a project initialized with shadcn.

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

Usage

This is the basic example. Use the Code tab above for the selected example. Adjust import aliases to match your project.

import { createColumnHelper } from "@tanstack/react-table";

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

export default function Example() {
  const helper = createColumnHelper<typeof dataTableFeatures, { name: string; status: string }>();
  const columns = helper.columns([
    helper.accessor("name", { header: "Project" }),
    helper.accessor("status", { header: "Status" }),
  ]);
  return (
    <DataTable
      columns={columns}
      data={[
        { name: "Design system", status: "Active" },
        { name: "Website", status: "Draft" },
      ]}
    />
  );
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

DataTable

DataTable properties
Prop	Type	Default	Description
`columns`Required	ColumnDef<{}, TData>[] ColumnDef<{}, TData>[]	`—`	Column definitions describing how each record is displayed.
`data`Required	TData[] TData[]	`—`	Records provided to the component.
`emptyMessage`	ReactNode ReactNode	`"No results."`	Content displayed when no records are available.

Usage notes

Define columns with createColumnHelper and pass records as data. This minimal composition can be extended with table features such as sorting and pagination.