DataTable

Shared Components

Full-featured data table built on TanStack Table with column filtering, sorting, pagination, CSV export, and mobile responsive card view.

Search and sortFaceted filtersSelectionPagination and export

Open preview

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

data-table.tsx

"use client";

import {
  DataTable,
  DataTableColumnHeader,
} from "@dashboardpack/core/components/shared/data-table";
import { Badge } from "@dashboardpack/core/components/ui/badge";
import { type ColumnDef } from "@tanstack/react-table";

type Project = { name: string; owner: string; status: string };
const projects: Project[] = [
  { name: "Website refresh", owner: "Alex Morgan", status: "Active" },
  { name: "Mobile app", owner: "Sam Kim", status: "Planned" },
  { name: "Design system", owner: "Jordan Lee", status: "Active" },
  { name: "Customer portal", owner: "Alex Morgan", status: "Planned" },
  { name: "Analytics", owner: "Sam Kim", status: "Active" },
  { name: "Onboarding", owner: "Jordan Lee", status: "Active" },
];
const columns: ColumnDef<Project>[] = [
  {
    accessorKey: "name",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Project" />
    ),
    meta: { exportHeader: "Project" },
  },
  { accessorKey: "owner", header: "Owner" },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <Badge
        variant={row.original.status === "Active" ? "success" : "secondary"}
      >
        {row.original.status}
      </Badge>
    ),
    filterFn: (row, id, values: string[]) => values.includes(row.getValue(id)),
  },
];

export default function DataTableExample() {
  return (
    <div className="w-full">
      <DataTable
        columns={columns}
        data={projects}
        searchPlaceholder="Search projects…"
        enableRowSelection
        enableColumnPinning
        exportFilename="projects"
        perPageOptions={[5, 10, 20]}
        facetedFilters={[
          {
            columnId: "status",
            title: "Status",
            options: [
              { label: "Active", value: "Active" },
              { label: "Planned", value: "Planned" },
            ],
          },
        ]}
      />
    </div>
  );
}

Usage

Define typed TanStack columns and pass a data array. The example supports search, sorting, status filters, selection, pagination, column controls, and export. Use server for backend-driven pagination; see the Data Grid and Export guides for advanced behavior.

Import

import {
  DataTable,
  DataTableColumnHeader,
} from "@dashboardpack/core/components/shared/data-table";

Available in the included @dashboardpack/core package. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

DataTable props
Prop	Type / Default	Description
columns	`ColumnDef<TData, TValue>[]` Default: required	Typed column definitions.
data	`TData[]` Default: required	Rows to display.
enableRowSelection	`boolean` Default: false	Enable row selection.
facetedFilters	`{ columnId; title; options? }[]` Default: —	Configure column filter menus.
server	`ServerPagination` Default: —	Backend-driven sorting, filtering, and paging.
onCellEdit	`(params: CellEditParams<TData>) => void \| Promise<void>` Default: —	Commit edits declared by column meta.editable.
viewsKey	`string` Default: —	Enable persisted and shareable table views.
enableColumnPinning	`boolean` Default: false	Enable start/end pinning.
exportFilename	`string` Default: export	Base filename for CSV and XLSX exports.

Build with these too

Table EmptyState

Continue with the Data Grid and Export guides.