---
name: "@niko-table"
slug: "niko-table"
description: "Composable, open-code data tables and an editable data grid built on TanStack Table: faceted and advanced filters, sorting, row and column drag-and-drop, virtualization, column resizing, and server-side pagination, installed a la carte."
category: "E-commerce/payments"
tags: ["buttons", "e-commerce", "forms", "mobile", "navigation", "tables"]
framework: "react"
license: null
author: "Semkoo"
website: "https://niko-table.com"
github: "https://github.com/Semkoo/niko-table-registry"
registry: "https://niko-table.com/r/registry.json"
pro: false
pro_url: null
github_stars: 67
component_count: 34
generated_at: "2026-09-21T01:50:16.753Z"
---
# @niko-table
Composable, open-code data tables and an editable data grid built on TanStack Table: faceted and advanced filters, sorting, row and column drag-and-drop, virtualization, column resizing, and server-side pagination, installed a la carte.
## Links
- Website: https://niko-table.com
- GitHub: https://github.com/Semkoo/niko-table-registry
- Registry JSON: https://niko-table.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/niko-table
- This file: https://sh4dcn.vercel.app/md/niko-table.md
## Install
```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://niko-table.com/r/registry.json
pnpm dlx shadcn@latest add https://niko-table.com/r/registry.json
bunx shadcn@latest add https://niko-table.com/r/registry.json
# clone the source repo
git clone https://github.com/Semkoo/niko-table-registry.git
# fetch the raw registry index
curl -s https://niko-table.com/r/registry.json
```
## Components (34)
| name | type | description | install |
| --- | --- | --- | --- |
| data-table-ui | registry:ui | Shadcn table primitive extended with TableComponent and a keyboard-focusable scroll container (tabIndex={0}, WCAG 2.1.1). Optional when you already ship a comp… | `npx shadcn@latest add https://niko-table.com/r/data-table-ui.json` |
| data-table-core | registry:block | Shared floor for Niko Table: context, non-virtualized structure, types, config, and the lib/hooks bodies and controls need. Does not include DataTableRoot or c… | `npx shadcn@latest add https://niko-table.com/r/data-table-core.json` |
| data-table | registry:block | Full DataTable owner (DataTableRoot, DataTable chrome, feature detection) on top of data-table-core, plus the Table UI primitive via data-table-ui. Prefer this… | `npx shadcn@latest add https://niko-table.com/r/data-table.json` |
| data-table-virtualized | registry:component | Virtualized table structure for rendering large datasets efficiently using TanStack Virtual. | `npx shadcn@latest add https://niko-table.com/r/data-table-virtualized.json` |
| data-table-pagination | registry:component | Full-featured pagination controls with page size selector, page navigation, and row count display. | `npx shadcn@latest add https://niko-table.com/r/data-table-pagination.json` |
| data-table-search-filter | registry:component | Global search input with debouncing for filtering table data. | `npx shadcn@latest add https://niko-table.com/r/data-table-search-filter.json` |
| data-table-sort-menu | registry:component | Sort management menu with multi-column sorting and drag-and-drop reordering. | `npx shadcn@latest add https://niko-table.com/r/data-table-sort-menu.json` |
| data-table-view-menu | registry:component | Column visibility toggle menu for showing/hiding table columns. | `npx shadcn@latest add https://niko-table.com/r/data-table-view-menu.json` |
| data-table-view-dnd-menu | registry:component | Column visibility toggle menu with drag-to-reorder support. Use instead of data-table-view-menu when you need users to reorder columns from the menu. | `npx shadcn@latest add https://niko-table.com/r/data-table-view-dnd-menu.json` |
| data-table-clear-filter | registry:component | Button to clear all active table filters at once. | `npx shadcn@latest add https://niko-table.com/r/data-table-clear-filter.json` |
| data-table-filter-menu | registry:component | Command palette-style filter interface for adding and managing column filters. | `npx shadcn@latest add https://niko-table.com/r/data-table-filter-menu.json` |
| data-table-faceted-filter | registry:component | Faceted filter for single/multiple selection with option counts and search. | `npx shadcn@latest add https://niko-table.com/r/data-table-faceted-filter.json` |
| data-table-inline-filter | registry:component | Inline filter toolbar that displays active filters as editable chips. | `npx shadcn@latest add https://niko-table.com/r/data-table-inline-filter.json` |
| data-table-slider-filter | registry:component | Slider-based filter for numeric range filtering. | `npx shadcn@latest add https://niko-table.com/r/data-table-slider-filter.json` |
| data-table-date-filter | registry:component | Date picker filter supporting single date and date range selection. | `npx shadcn@latest add https://niko-table.com/r/data-table-date-filter.json` |
| data-table-export-button | registry:component | Export table data to CSV with configurable options. | `npx shadcn@latest add https://niko-table.com/r/data-table-export-button.json` |
| data-table-aside | registry:component | Sidebar panel component for displaying row details or additional content alongside the table. | `npx shadcn@latest add https://niko-table.com/r/data-table-aside.json` |
| data-table-selection-bar | registry:component | Bulk actions bar that appears when rows are selected. | `npx shadcn@latest add https://niko-table.com/r/data-table-selection-bar.json` |
| data-table-column-sort | registry:component | Column header sort options with ascending/descending/clear controls. | `npx shadcn@latest add https://niko-table.com/r/data-table-column-sort.json` |
| data-table-column-hide | registry:component | Column header option to hide/show individual columns. | `npx shadcn@latest add https://niko-table.com/r/data-table-column-hide.json` |
| data-table-column-pin | registry:component | Column header option to pin columns to left or right. | `npx shadcn@latest add https://niko-table.com/r/data-table-column-pin.json` |
| data-table-column-group | registry:component | Column header option to group rows by column values with TanStack aggregation support. | `npx shadcn@latest add https://niko-table.com/r/data-table-column-group.json` |
| data-table-column-faceted-filter | registry:component | Column header faceted filter with multi-select options in a dropdown. | `npx shadcn@latest add https://niko-table.com/r/data-table-column-faceted-filter.json` |
| data-table-column-slider-filter | registry:component | Column header slider filter for numeric range filtering in a dropdown. | `npx shadcn@latest add https://niko-table.com/r/data-table-column-slider-filter.json` |
| data-table-column-date-filter | registry:component | Column header date filter with calendar picker in a dropdown. | `npx shadcn@latest add https://niko-table.com/r/data-table-column-date-filter.json` |
| data-table-row-dnd | registry:component | Drag-and-drop row reordering with composable primitives. Includes DnD provider, draggable row, drag handle, and row DnD table body. Does not ship column DnD. | `npx shadcn@latest add https://niko-table.com/r/data-table-row-dnd.json` |
| data-table-column-dnd | registry:component | Drag-and-drop column reordering with composable primitives. Includes DnD provider, draggable header, drag-along cell, and column DnD header/body. Does not ship… | `npx shadcn@latest add https://niko-table.com/r/data-table-column-dnd.json` |
| data-table-virtualized-row-dnd | registry:component | Virtualized row drag-and-drop body (`DataTableVirtualizedDndBody`). Requires data-table-virtualized + data-table-row-dnd. Does not ship column DnD. | `npx shadcn@latest add https://niko-table.com/r/data-table-virtualized-row-dnd.json` |
| data-table-virtualized-column-dnd | registry:component | Virtualized column drag-and-drop header/body (`DataTableVirtualizedDndHeader`, `DataTableVirtualizedDndColumnBody`). Requires data-table-virtualized + data-tab… | `npx shadcn@latest add https://niko-table.com/r/data-table-virtualized-column-dnd.json` |
| data-table-column-resize | registry:component | Opt-in column resizing with drag handles and double-click autosize (measures natural text width). Keyboard-operable handle. Drop into … | `npx shadcn@latest add https://niko-table.com/r/data-table-column-resize.json` |
| data-table-column-auto-fit | registry:component | Opt-in even-split fill for resizable columns. Drop next to and the resizable columns grow by an equal share … | `npx shadcn@latest add https://niko-table.com/r/data-table-column-auto-fit.json` |
| data-table-column-sizing-persistence | registry:lib | Opt-in localStorage persistence for column widths. Call useColumnSizingPersistence(storageKey) and wire the returned columnSizing + onColumnSizingChange into <… | `npx shadcn@latest add https://niko-table.com/r/data-table-column-sizing-persistence.json` |
| data-table-grid | registry:block | Composable editable spreadsheet grid: a headless engine (focus, selection, edit lifecycle, undo/redo, clipboard — all rowId-addressed so sort/filter work while… | `npx shadcn@latest add https://niko-table.com/r/data-table-grid.json` |
| data-table-grid-changes | registry:component | Opt-in useGridChanges hook that observes the uncontrolled grid engine and turns edits into a create/update/delete change-set — for staging saves, autosave, and… | `npx shadcn@latest add https://niko-table.com/r/data-table-grid-changes.json` |
## For AI agents
```text
You are adding components from @niko-table to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/niko-table.md) for the component list.
2. Fetch the machine-readable index: https://niko-table.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: niko-table).
```