Manual Installation

Prerequisites

Before copying the components, make sure you have:

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

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 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 (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

1. Install the required dependencies

   pnpmnpmyarnbun

   pnpm add @tanstack/react-table

2. Install the required Shadcn UI components

   The registry handles most Shadcn dependencies automatically, but for manual installation you need:

   pnpmnpmyarnbun

   pnpm dlx shadcn@latest add button input dropdown-menu

3. 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).

4. Copy all DataTable components

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

5. 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.

6. Verify installation

   Create a simple test to verify everything is working:

   import { DataTableRoot } from "@/components/niko-table/core/data-table-root"
   import { DataTable } from "@/components/niko-table/core/data-table"
   import {
     DataTableHeader,
     DataTableBody,
   } from "@/components/niko-table/core/data-table-structure"
   
   const columns = [
     { accessorKey: "name", header: "Name" },
     { accessorKey: "email", header: "Email" },
   ]
   
   const data = [
     { id: "1", name: "John Doe", email: "[email protected]" },
     { id: "2", name: "Jane Smith", email: "[email protected]" },
   ]
   
   export function TestTable() {
     return (
       <DataTableRoot data={data} columns={columns}>
         <DataTable>
           <DataTableHeader />
           <DataTableBody />
         </DataTable>
       </DataTableRoot>
     )
   }

Project Structure

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

your-project/
├── src/
│   ├── components/
│   │   ├── ui/
│   │   │   ├── table.tsx          # Updated Shadcn table component
│   │   │   ├── button.tsx
│   │   │   ├── input.tsx
│   │   │   ├── dropdown-menu.tsx
│   │   │   └── ...                # Other Shadcn components
│   │   │
│   │   └── niko-table/
│   │       ├── index.tsx                    # Main exports
│   │       │
│   │       ├── core/                        # Core table components
│   │       │   ├── data-table-root.tsx
│   │       │   ├── data-table.tsx
│   │       │   ├── data-table-context.tsx
│   │       │   ├── data-table-structure.tsx  # Header, Body, EmptyBody, Skeleton, Loading (consolidated)
│   │       │   ├── data-table-virtualized-structure.tsx  # VirtualizedHeader, VirtualizedBody, VirtualizedEmptyBody, VirtualizedSkeleton, VirtualizedLoading (consolidated)
│   │       │   └── index.tsx
│   │       │
│   │       ├── components/                  # All user-facing components
│   │       │   ├── data-table-search-filter.tsx      # Context-aware components
│   │       │   ├── data-table-view-menu.tsx
│   │       │   ├── data-table-filter-menu.tsx
│   │       │   ├── data-table-sort-menu.tsx
│   │       │   ├── data-table-clear-filter.tsx
│   │       │   ├── data-table-faceted-filter.tsx
│   │       │   ├── data-table-slider-filter.tsx
│   │       │   ├── data-table-date-filter.tsx
│   │       │   ├── data-table-inline-filter.tsx
│   │       │   ├── data-table-pagination.tsx
│   │       │   ├── data-table-export-button.tsx
│   │       │   ├── table-column-header.tsx            # Reusable UI components
│   │       │   ├── data-table-aside.tsx
│   │       │   ├── data-table-selection-bar.tsx
│   │       │   ├── data-table-toolbar-section.tsx
│   │       │   ├── data-table-empty-state.tsx
│   │       │   └── index.tsx
│   │       │
│   │       ├── filters/                     # Core implementation components
│   │       │   ├── table-search-filter.tsx
│   │       │   ├── table-faceted-filter.tsx
│   │       │   ├── table-slider-filter.tsx
│   │       │   ├── table-date-filter.tsx
│   │       │   ├── table-inline-filter.tsx
│   │       │   ├── table-filter-menu.tsx
│   │       │   ├── table-view-menu.tsx
│   │       │   ├── table-sort-menu.tsx
│   │       │   ├── table-range-filter.tsx
│   │       │   ├── table-pagination.tsx
│   │       │   ├── table-export-button.tsx
│   │       │   └── index.tsx
│   │       │
│   │       ├── config/                      # Configuration
│   │       │   ├── data-table.ts
│   │       │   ├── feature-detection.ts
│   │       │   └── index.tsx
│   │       │
│   │       ├── hooks/                       # Custom React hooks
│   │       │   ├── use-derived-column-title.ts
│   │       │   ├── use-keyboard-shortcut.ts
│   │       │   └── index.ts
│   │       │
│   │       ├── lib/                         # Utility functions
│   │       │   ├── constants.ts
│   │       │   ├── data-table.ts
│   │       │   ├── filter-functions.ts
│   │       │   ├── format.ts
│   │       │   └── index.ts
│   │       │
│   │       └── types/                       # TypeScript types
│   │           └── index.ts
│   │
│   └── lib/
│       └── utils.ts                         # cn() utility (already in your project)
│
└── package.json

All Components

Browse and copy individual files below:

components/niko-table/components/28 files

components/niko-table/config/2 files

components/niko-table/core/8 files

components/niko-table/filters/22 files

components/niko-table/hooks/4 files

components/niko-table/lib/6 files

components/niko-table/types/1 file

Additional Dependencies

For advanced features, you may need additional dependencies:

URL State Management (nuqs)

For URL state persistence in tables:

pnpmnpmyarnbun

pnpm add nuqs

Virtualization

For virtualized tables:

pnpmnpmyarnbun

pnpm add @tanstack/react-virtual

Sortable Rows

For drag-and-drop row reordering, 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
• Advanced Table - All features combined