Introduction

Open-code React data tables for shadcn/ui—composable DataTable* components, TanStack Table state, and copy-paste registry installs.

What is Niko Table?

Nobody’s table, everyone’s solution.

Just like Shadcn, Niko Table is not a component library. Instead, it’s a comprehensive DataTable component that you copy into your project and customize to your needs. It’s built with TanStack Table and Shadcn UI, providing enterprise-grade features while remaining fully under your control.

Why Use This DataTable?

🚀 Production-Ready

Built for real-world applications with features like:

Sorting (single and multi-column)
Filtering (global search and column filters)
Pagination (client and server-side)
Row selection and bulk actions
Column visibility and reordering
Virtual scrolling for large datasets
Export to CSV

🎯 Progressive Complexity

Start simple and add features as you need them:

Simple Table - Just render data (< 5 minutes)
Basic Table - Add pagination and sorting (+ 5 minutes)
Search Table - Add global search (+ 5 minutes)
Filter Table - Add column filters (+ 10 minutes)
Advanced Table - Add virtualization, sidebars, etc. (+ 15 minutes)

🛠️ Fully Customizable

Since you own the code, you can:

Modify any component
Add custom features
Change styling
Integrate with your backend
No version lock-in

♿ Accessible by Default

Built on your shadcn generation’s primitives (Radix UI or Base UI) with semantic table markup where possible:

Keyboard support in sort/filter menus and toolbar controls
ARIA labels on filter triggers, sliders, and clear actions
Screen-reader-friendly patterns via shadcn/ui components
jsx-a11y lint rules on docs and source

We do not claim third-party WCAG certification; treat complex tables (virtualization, DnD, pinning) like any custom UI and verify with your own accessibility checklist.

📱 Responsive layout

DataTable uses a full-width overflow-auto scroll region for wide column sets on small screens
Popovers and filter panels respect available viewport width
Optional DataTableAside for a collapsible detail panel (see Aside Table)
Toolbars are plain flex layouts — wrap or hide filters on mobile in your app as needed

How It Works

The DataTable uses 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 use TanStack Table hooks (like table.getState(), 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 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

1
// Recommended: Use context-based Action components
2
<DataTableRoot data={data} columns={columns}>
3
  <DataTableSearchFilter />   {/* Automatically gets table from context */}
4
  <DataTable>
5
    <DataTableHeader />
6
    <DataTableBody />
7
  </DataTable>
8
  <DataTablePagination />
9
</DataTableRoot>
10

11
// Advanced: Use Filter components directly
12
const table = useReactTable({ data, columns, ... })
13
<TableSearchFilter table={table} />  {/* Pass table prop directly */}

Build tables by composing components - start simple and add features as needed:

1
<DataTableRoot data={data} columns={columns}>
2
  <DataTableToolbarSection>
3
    <DataTableSearchFilter />
4
    <DataTableFilterMenu />
5
  </DataTableToolbarSection>
6

7
  <DataTable>
8
    <DataTableHeader />
9
    <DataTableBody />
10
  </DataTable>
11

12
  <DataTablePagination />
13
</DataTableRoot>

Composability map

Niko Table is mix-and-match: install only the registry items you need, render only the children you want, and swap body strategies without rewriting column defs.

Layer	What you choose	Notes
Root	`DataTableRoot`	Required. Optional controlled `state`, `config` overrides, `getRowId` for selection/DnD/expansion
Toolbar	`DataTableToolbarSection` + any of search, faceted, filter menu, view menu, clear	Omitted entirely for minimal tables
Table shell	`DataTable` with `height` / `max-h-*` when virtualizing	Virtualizer needs a bounded scroll container
Header / body	Regular: `DataTableHeader` + `DataTableBody`	Default path
	Virtualized: `DataTableVirtualizedHeader` + `DataTableVirtualizedBody`	10k+ rows
	Row DnD: `DataTableRowDndProvider` (outside table) + `DataTableDndBody`	Do not combine with sort/filter
	Column DnD: `DataTableColumnDndProvider` + draggable headers/cells	Safe with other features
Loading / empty	`DataTableSkeleton`, `DataTableEmptyBody` or composable empty pieces	Siblings inside the body
Footer	`DataTablePagination`, `DataTableSelectionBar`	Optional
Row actions	One `RowMenu` component + `useDataTableRow` in kebab and* `DataTableRowContextMenuSlot`	Row context menu
Escape hatch	`Table*` filters with your own `table` instance	Custom layouts without context

DataTableRoot runs feature detection on children (detectFeaturesFromChildren) so pagination, filtering, and sorting turn on when you add the matching components — you rarely hand-roll a giant config object.

What’s Included

This DataTable provides you with:

TanStack Table integration - Built on the powerful headless table library
Composable components - Build complex UIs from simple, reusable pieces
State management - Context-based state sharing with hook-based flexibility
Performance optimization - Virtual scrolling, memoization, and efficient rendering
Accessibility - shadcn/ui primitives (Radix or Base UI), keyboard-friendly filters/menus, jsx-a11y linting (verify end-to-end in your app)
TypeScript - Fully typed with comprehensive type definitions

Philosophy

This project follows the Shadcn philosophy:

Copy, Don’t Install

You copy the DataTable component code into your project (not install it as a package). However, you still need to install the required dependencies:

Required Dependencies:

@tanstack/react-table - Core table library
Shadcn UI components (via npx shadcn@latest add ...) - UI primitives
Optional: @tanstack/react-virtual, nuqs, @dnd-kit/* for advanced features

What You Copy:

All DataTable component files from /components/niko-table/
Full source code that you can read, modify, and customize

Benefits:

✅ No black box - See exactly how everything works
✅ Full control - Modify any component to fit your needs
✅ Easy to customize - Change styling, behavior, or add features
✅ No version lock-in - You control when to update
✅ Learn by reading - Understand the implementation

Composition Over Configuration

Build complex tables by composing simple components:

1
// Start simple
2
<DataTableRoot data={data} columns={columns}>
3
  <DataTable>
4
    <DataTableHeader />
5
    <DataTableBody />
6
  </DataTable>
7
</DataTableRoot>
8

9
// Add features incrementally
10
<DataTableRoot data={data} columns={columns} config={{ enablePagination: true }}>
11
  <DataTableToolbarSection>
12
    <DataTableSearchFilter />
13
  </DataTableToolbarSection>
14

15
  <DataTable>
16
    <DataTableHeader />
17
    <DataTableBody />
18
  </DataTable>
19

20
  <DataTablePagination />
21
</DataTableRoot>
22

23
// Go advanced
24
<DataTableRoot
25
  data={data}
26
  columns={columns}
27
  config={{
28
    enablePagination: true,
29
    enableFilters: true,
30
    enableRowSelection: true,
31
  }}
32
>
33
  <DataTableToolbarSection className="justify-between">
34
    <div className="flex gap-2">
35
      <DataTableSearchFilter />
36
      <DataTableFilterMenu />
37
    </div>
38
    <div className="flex gap-2">
39
      <DataTableViewMenu />
40
      <DataTableSortMenu />
41
    </div>
42
  </DataTableToolbarSection>
43

44
  <DataTable>
45
    <DataTableHeader />
46
    <DataTableBody>
47
      <DataTableSkeleton />
48
      <DataTableEmptyBody />
49
    </DataTableBody>
50
  </DataTable>
51

52
  <DataTablePagination />
53
</DataTableRoot>

Type-Safe by Default

Full TypeScript support throughout:

1
type User = {
2
  id: string
3
  name: string
4
  email: string
5
}
6

7
const columns: DataTableColumnDef<User>[] = [
8
  {
9
    accessorKey: "name", // ✅ Type-safe
10
    header: "Name",
11
    cell: ({ row }) => row.original.email, // ✅ Autocomplete
12
  },
13
]

Comparison

vs Component Libraries

Feature	This DataTable	Component Libraries
Customization	✅ Full control	❌ Limited
Bundle size	✅ Copy what you need	❌ Entire library
Learning curve	✅ See the source	❌ Read docs
Dependencies	✅ Standard deps only	❌ Library-specific
Updates	✅ Copy new features	❌ Breaking changes

vs Building from Scratch

Feature	This DataTable	From Scratch
Time to implement	✅ Minutes	❌ Days/weeks
Accessibility	✅ Baseline included	❌ Must implement
Mobile support	✅ Ready	❌ Must build
Advanced features	✅ Available	❌ Complex to build
Best practices	✅ Included	❌ Must learn

Next Steps

Ready to get started?

Installation - Set up your project
Simple Table - Your first table
Basic Table - Add common features
Search Table - Add search
Faceted Filter Table - Advanced filtering
Advanced Table - Master level

Community

Questions? Ideas? Contributions?

GitHub Repository - Star us!
Contributing Guide - How to contribute
Feature Requests - Request features
Component Requests - Request components

Credits

Built on top of:

TanStack Table by Tanner Linsley - The headless table library that powers everything
Shadcn UI by Shadcn - Beautiful, accessible component primitives
sadmann7’s work - Major inspiration for filter components and table patterns:
- TableCN - Inspired our filter menu, inline filter, faceted filter, and slider filter implementations
- DiceUI Sortable - Drag and drop sortable for row reordering
nuqs by François Best - Type-safe search params state manager for URL state management
Web Dev Simplified Registry by Kyle Cook - Registry implementation pattern

License

MIT License - use it freely in your projects!