Manual Installation

Copy and paste all DataTable components into your project manually.

Prerequisites

Before copying the components, make sure you have:

A React project (Next.js, Vite, etc.)
Shadcn UI set up in your project (Installation Guide)
TailwindCSS configured
TypeScript (recommended)

Using the Base UI generation ("style": "base-nova")? Prefer the CLI install — the shadcn CLI adapts the source to Base UI idioms (asChild → render) at install time. The raw files copied on this page target the Radix (new-york) generation.

Architecture Note

The DataTable components use a two-layer architecture for maximum flexibility:

Components (data-table-*.tsx in /components folder) - Context-aware wrapper components that use useDataTable() hook to automatically get the table from DataTableRoot context. These eliminate prop drilling and are the recommended way to use components:
- DataTableSearchFilter, DataTableFilterMenu, DataTableSortMenu, DataTablePagination, etc.
Filters (table-*.tsx in /filters folder) - Core implementation components that accept a table prop directly and read from the TanStack Table instance (like table.state, table.setGlobalFilter(), etc.). These can be used standalone:
- TableSearchFilter, TableFilterMenu, TableSortMenu, etc.

Why this architecture?

Use DataTable* components from their direct paths (e.g. @/components/niko-table/components/data-table-pagination) when you want context-based, zero-config usage
Use Table* components from filters (e.g. @/components/niko-table/filters/table-pagination) when you want to build custom components or manage the table instance yourself
All filter components use TanStack Table hooks directly, giving you full control

Installation Steps

Install the required dependencies

This registry targets TanStack Table v9:
pnpm add @tanstack/react-table@^9
You also need lib/data-table-features.ts from the files below — that is the tableFeatures() registration DataTableRoot passes to useTable. See Table Features.
Install the required Shadcn UI components

The registry handles most Shadcn dependencies automatically, but for manual installation you need:
pnpm dlx shadcn@latest add button input dropdown-menu
Copy the custom table component

The DataTable requires a custom components/ui/table.tsx with a TableComponent export. Copy it from the manual installation files below, or install it via the registry CLI (see the Installation Guide).
Copy all DataTable components

Copy all the files below into your project, maintaining the directory structure shown.
Update import paths

Update the import paths in the copied files to match your project structure. The components use:
- @/components/ui/ for Shadcn UI components
- @/components/niko-table/ for DataTable components
- @/lib/ for utility functions
Ensure your project has the @/ path alias pointing at your src/ directory (or replace @/ with your own alias in the copied code). Use direct file imports only (no barrel exports): import from the specific file (e.g. @/components/niko-table/core/data-table-root, @/components/niko-table/lib/constants) so bundlers can tree-shake. This matches the shadcn pattern of one entry point per component.

Verify installation

Create a simple test to verify everything is working:

1
import { DataTableRoot } from "@/components/niko-table/core/data-table-root"
2
import { DataTable } from "@/components/niko-table/core/data-table"
3
import {
4
  DataTableHeader,
5
  DataTableBody,
6
} from "@/components/niko-table/core/data-table-structure"
7

8
const columns = [
9
  { accessorKey: "name", header: "Name" },
10
  { accessorKey: "email", header: "Email" },
11
]
12

13
const data = [
14
  { id: "1", name: "John Doe", email: "[email protected]" },
15
  { id: "2", name: "Jane Smith", email: "[email protected]" },
16
]
17

18
export function TestTable() {
19
  return (
20
    <DataTableRoot data={data} columns={columns}>
21
      <DataTable>
22
        <DataTableHeader />
23
        <DataTableBody />
24
      </DataTable>
25
    </DataTableRoot>
26
  )
27
}

Project Structure

After copying all files, your project structure should look like this:

1
your-project/
2
├── src/
3
│   ├── components/
4
│   │   ├── ui/
5
│   │   │   ├── table.tsx          # Updated Shadcn table component
6
│   │   │   ├── button.tsx
7
│   │   │   ├── input.tsx
8
│   │   │   ├── dropdown-menu.tsx
9
│   │   │   └── ...                # Other Shadcn components
10
│   │   │
11
│   │   └── niko-table/
12
│   │       │
13
│   │       ├── core/                        # Core table components
14
│   │       │   ├── data-table.tsx                                  # Container + scroll wrapper
15
│   │       │   ├── data-table-root.tsx                             # Top-level provider + table options
16
│   │       │   ├── data-table-context.tsx                          # useDataTable() context
17
│   │       │   ├── data-table-error-boundary.tsx                   # Error boundary wrapper
18
│   │       │   ├── data-table-structure.tsx                        # Header, Body, EmptyBody, Skeleton, Loading, LoadingMore
19
│   │       │   ├── data-table-row-dnd-structure.tsx               # Row DnD body
20
│   │       │   ├── data-table-column-dnd-structure.tsx            # Column DnD header/body
21
│   │       │   ├── data-table-virtualized-structure.tsx            # VirtualizedHeader, VirtualizedBody, VirtualizedEmptyBody, VirtualizedSkeleton, VirtualizedLoading, VirtualizedLoadingMore
22
│   │       │   ├── data-table-virtualized-row-dnd-structure.tsx   # Virtualized row DnD body
23
│   │       │   └── data-table-virtualized-column-dnd-structure.tsx # Virtualized column DnD header/body
24
│   │       │
25
│   │       ├── components/                  # Context-aware user-facing components
26
│   │       │   ├── data-table-search-filter.tsx
27
│   │       │   ├── data-table-view-menu.tsx
28
│   │       │   ├── data-table-view-dnd-menu.tsx
29
│   │       │   ├── data-table-filter-menu.tsx
30
│   │       │   ├── data-table-sort-menu.tsx
31
│   │       │   ├── data-table-clear-filter.tsx
32
│   │       │   ├── data-table-faceted-filter.tsx
33
│   │       │   ├── data-table-slider-filter.tsx
34
│   │       │   ├── data-table-date-filter.tsx
35
│   │       │   ├── data-table-inline-filter.tsx
36
│   │       │   ├── data-table-pagination.tsx
37
│   │       │   ├── data-table-export-button.tsx
38
│   │       │   ├── data-table-row-dnd.tsx
39
│   │       │   ├── data-table-column-dnd.tsx
40
│   │       │   ├── data-table-column-resize.tsx                   # Opt-in <DataTableColumnResize />
41
│   │       │   ├── data-table-column-auto-fit.tsx                 # Opt-in <DataTableColumnAutoFit /> (even-split fill)
42
│   │       │   ├── data-table-column-actions.tsx
43
│   │       │   ├── data-table-column-header.tsx
44
│   │       │   ├── data-table-column-title.tsx
45
│   │       │   ├── data-table-column-sort.tsx
46
│   │       │   ├── data-table-column-hide.tsx
47
│   │       │   ├── data-table-column-pin.tsx
48
│   │       │   ├── data-table-column-group.tsx
49
│   │       │   ├── data-table-column-filter.tsx
50
│   │       │   ├── data-table-column-filter-trigger.tsx
51
│   │       │   ├── data-table-column-faceted-filter.tsx
52
│   │       │   ├── data-table-column-date-filter-options.tsx
53
│   │       │   ├── data-table-column-slider-filter-options.tsx
54
│   │       │   ├── data-table-aside.tsx
55
│   │       │   ├── data-table-selection-bar.tsx
56
│   │       │   ├── data-table-toolbar-section.tsx
57
│   │       │   ├── data-table-row-context-menu.tsx                 # Per-row right-click menu primitive (+ open-row highlight)
58
│   │       │   ├── data-table-row-context-menu-slot.tsx            # Declarative <DataTableRowContextMenuSlot> for a body
59
│   │       │   ├── data-table-row-menu.tsx                         # Polymorphic RowMenuItem/Sub/… + DataTableRowMenuScope + useDataTableRow
60
│   │       │   └── data-table-empty-state.tsx
61
│   │       │
62
│   │       ├── grid/                        # Data Grid (optional — editable spreadsheet layer)
63
│   │       │   ├── core/                      # DataGrid, context, features, columns context
64
│   │       │   ├── cells/                     # Text / number / select / date / checkbox editors
65
│   │       │   ├── components/                # Clipboard, fill, move, toolbar, status bar, …
66
│   │       │   ├── hooks/                     # useDataGrid, useGridColumns, useGridChanges, …
67
│   │       │   ├── config/                    # Keyboard shortcuts map
68
│   │       │   └── types/                     # CellState, GridRow, …
69
│   │       │
70
│   │       ├── filters/                     # Core filter implementations (accept `table` prop directly)
71
│   │       │   ├── table-search-filter.tsx
72
│   │       │   ├── table-faceted-filter.tsx
73
│   │       │   ├── table-slider-filter.tsx
74
│   │       │   ├── table-range-filter.tsx
75
│   │       │   ├── table-date-filter.tsx
76
│   │       │   ├── table-inline-filter.tsx
77
│   │       │   ├── table-filter-menu.tsx
78
│   │       │   ├── table-clear-filter.tsx
79
│   │       │   ├── table-view-menu.tsx
80
│   │       │   ├── table-view-dnd-menu.tsx
81
│   │       │   ├── table-sort-menu.tsx
82
│   │       │   ├── table-pagination.tsx
83
│   │       │   ├── table-export-button.tsx
84
│   │       │   ├── table-row-dnd.tsx
85
│   │       │   ├── table-column-dnd.tsx
86
│   │       │   ├── table-column-actions.tsx
87
│   │       │   ├── table-column-title.tsx
88
│   │       │   ├── table-column-sort.tsx
89
│   │       │   ├── table-column-hide.tsx
90
│   │       │   ├── table-column-pin.tsx
91
│   │       │   ├── table-column-group.tsx
92
│   │       │   ├── table-column-faceted-filter.tsx
93
│   │       │   ├── table-column-slider-filter.tsx
94
│   │       │   └── table-column-date-filter.tsx
95
│   │       │
96
│   │       ├── config/                      # Configuration + feature detection
97
│   │       │   ├── data-table.ts
98
│   │       │   └── feature-detection.ts
99
│   │       │
100
│   │       ├── hooks/                       # Custom React hooks
101
│   │       │   ├── use-debounce.ts
102
│   │       │   ├── use-derived-column-title.ts
103
│   │       │   ├── use-generated-options.ts
104
│   │       │   ├── use-keyboard-shortcut.ts
105
│   │       │   ├── use-data-table-flash.ts                      # flashRows / flashCells helpers
106
│   │       │   └── use-data-table-scroll.ts                     # scrollRowIntoView helper
107
│   │       │
108
│   │       ├── lib/                         # Utility functions
109
│   │       │   ├── constants.ts
110
│   │       │   ├── data-table.ts
111
│   │       │   ├── data-table-features.ts                   # TanStack Table v9 tableFeatures() + createDataTableColumnHelper
112
│   │       │   ├── filter-functions.ts
113
│   │       │   ├── filter-rows.ts
114
│   │       │   ├── build-faceted-options.ts
115
│   │       │   ├── format.ts
116
│   │       │   ├── styles.ts
117
│   │       │   ├── column-resize-handle.tsx                     # Shared resize grip (headers)
118
│   │       │   ├── flex-columns.ts                              # Flex fill + header-fit width resolution (on by default)
119
│   │       │   ├── use-header-min-widths.ts                     # Header-fit: measure header labels off-DOM to floor widths
120
│   │       │   ├── use-column-auto-fit.ts                       # Opt-in even-split fill: grow resizable columns to width on load
121
│   │       │   ├── use-column-sizing-persistence.ts             # Opt-in: persist resized widths to localStorage
122
│   │       │   ├── create-scroll-handler.ts                     # Shared scroll-listener factory used by every body
123
│   │       │   ├── render-cell-content.tsx                      # Grouped / aggregated / placeholder cell renderer
124
│   │       │   └── row-click.ts                                    # Shared row-click guard used by every body
125
│   │       │
126
│   │       └── types/                       # TypeScript types
127
│   │           └── index.ts
128
│   │
129
│   └── lib/
130
│       └── utils.ts                         # cn() utility (already in your project)
131
│
132
└── package.json

Prefer the CLI install when you only need a subset — each registry item pulls its own dependencies. Manual copy is best when you want the full tree (including optional Data Grid under grid/).

All Components

Browse and copy individual files below (includes grid/ when present on disk):

Additional Dependencies

For advanced features, you may need additional dependencies:

URL State Management (nuqs)

For URL state persistence in tables:

pnpm add nuqs

Virtualization

For virtualized tables (and Data Grid):

pnpm add @tanstack/react-virtual

Sortable Rows / Column DnD

For drag-and-drop row or column reordering, install @dnd-kit/* as used by the row-dnd / column-dnd registry items, or follow the DiceUI Sortable installation guide.

Next Steps

Now that you have all the components installed, check out the examples:

Simple Table - Basic table with no pagination
Basic Table - Add pagination and sorting
Search Table - Add search functionality
Faceted Filter Table - Add advanced filtering
Column Resize Table - Drag / double-click column widths
Data Grid - Editable spreadsheet on top of the virtualized table
Advanced Table - All features combined
Components catalog - Every @niko-table/* registry item