Niko Table

Overview

Niko Table is an MIT-licensed set of composable, open-code data table components for React and shadcn/ui, built on TanStack Table v9. Instead of one monolithic table, it ships as 34 registry pieces, so projects install only the features they need, and TanStack Table's feature registration mirrors that at the engine level.

Alongside the table, Niko Table includes an editable spreadsheet-style data grid with typed cell editors, Zod validation, dynamic columns and change-set persistence. The docs cover more than 25 examples, from a simple table to server-side tables backed by Drizzle ORM and Postgres, with optional URL state through nuqs. It works with either Radix or Base UI generations of shadcn/ui.

Features

• Filtering: Global search, faceted filters, slider and date filters, inline filters and an advanced filter menu with AND/OR logic.
• Sorting and columns: Multi-column sorting, column visibility, pinning, grouping, resizing, auto-fit and persisted sizing.
• Drag and drop: Row and column reordering with dnd-kit, including virtualized variants.
• Performance: Virtual scrolling for 10,000+ client-side rows and infinite scroll.
• Server-side patterns: Server pagination, sorting and filtering, with Drizzle ORM and nuqs examples.
• Row tools: Selection bar with bulk actions, row expansion, context menus, inline editing, CSV export and aside panels.
• Data grid: Text, number, currency, checkbox, date and select cell editors with per-cell validation.
• Accessibility: ARIA labels in filters and menus, keyboard shortcuts and jsx-a11y linting.

Tech stack

• React, TypeScript, TanStack Table v9, TanStack Virtual, shadcn/ui, Tailwind CSS, dnd-kit, nuqs

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @niko-table/component-name