Neumorphism UI

Data Table

Use DataTable for collections that need sorting, filtering, pagination, or row selection. Use Table for simpler static rows.

Preview

Workspace project management

Search and filter projects, sort columns, select rows across pages, and change the page size using one table state.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/data-table

Install the shared base once, then add components and their dependencies with the CLI.

Workspace project management

npx shadcn@latest add @neumorphism-ui/data-table @neumorphism-ui/checkbox @neumorphism-ui/input @neumorphism-ui/select @neumorphism-ui/button
Registry JSON

Usage

Define data and columns, create the TanStack table with the required features, and pass it to DataTable. Compose search, column headers, and pagination around the same table instance.

"use client";

import { columnVisibilityFeature, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
import { DataTable } from "@/components/ui/data-table";

const features = tableFeatures({ columnVisibilityFeature, rowSelectionFeature, rowSortingFeature });
const data = [{ name: "Atlas", seats: 12 }, { name: "Beacon", seats: 4 }];
const columns = [
  { accessorKey: "name", header: "Project", enableSorting: false },
  { accessorKey: "seats", header: "Seats", enableSorting: false },
];

export default function Example() {
  const table = useTable({ features, data, columns });
  return <DataTable table={table} caption="Workspace projects" />;
}

API Reference

The caller's TanStack Table instance owns data and state; these components render it. The illustrative example uses stable row IDs to retain selection across filtering and pages.

ComponentPropTypeDefaultDescription
DataTabletableReactTable<TFeatures, TData>—The TanStack Table instance containing row models and state.
DataTablecaption / emptyMessage / childrenstring / ReactNode—Table caption, empty-result text and a composed search/filter toolbar.
DataTablePaginationlabels / pageSizesPaginationLabels / number[]—Localize navigation and page counts, and choose page sizes.

Accessibility

  • 01

    Includes a caption, aria-sort on sortable headers and a keyboard-focusable scrolling region.

  • 02

    Distinguish current-page selection from the total selected count. Server pagination requires caller-managed selection state.