Components
Every Niko Table registry item at a glance — name, what it does, install command. Pick what you need; the registry handles core dependencies automatically.
A cheat sheet of every component you can install from the Niko Table registry. Browse by category to find what you need — or just grep this page.
Each addon transitively pulls in data-table (the core), so installing any single addon also installs everything required to render a basic table. You never need to install data-table explicitly unless you only want the bare core.
First time using
@niko-table? Set up the registry once: see the Installation Guide.
The foundation. Every other component depends on it.
| Name | What it does |
|---|---|
data-table |
Core DataTable with DataTableRoot, context, structure, column header, toolbar section, empty state. Includes the Table UI primitive. |
Virtualization
Section titled “Virtualization”For large datasets (1k+ rows).
| Name | What it does |
|---|---|
data-table-virtualized |
Virtualized body/header for rendering large datasets efficiently via TanStack Virtual. |
Toolbar Filters
Section titled “Toolbar Filters”Top-of-table filter controls. Each component is independent — install only what you need.
| Name | What it does |
|---|---|
data-table-search-filter |
Global search input with debouncing. |
data-table-pagination |
Page-size selector, page navigation, row-count display. |
data-table-sort-menu |
Sort management with multi-column sorting and drag-to-reorder of sort entries. |
data-table-view-menu |
Column visibility toggle menu. Optional lockedColumnIds, onReset. |
data-table-view-dnd-menu |
Column visibility menu with drag-to-reorder. Use instead of data-table-view-menu when you want users to reorder columns from the menu (pulls in @dnd-kit/*). |
data-table-filter-menu |
Command-palette-style filter interface for adding/managing column filters. |
data-table-inline-filter |
Inline filter toolbar showing active filters as editable chips. |
data-table-faceted-filter |
Faceted filter (single/multi select) with option counts and search. |
data-table-slider-filter |
Slider-based numeric range filter. |
data-table-date-filter |
Date picker filter supporting single date and date range. |
data-table-clear-filter |
Button to clear all active filters at once. |
Column-Header Controls
Section titled “Column-Header Controls”Per-column controls embedded in the column header dropdown.
| Name | What it does |
|---|---|
data-table-column-sort |
Header sort option with asc/desc/clear. |
data-table-column-hide |
Header option to hide/show the column. |
data-table-column-pin |
Header option to pin column left/right. |
data-table-column-faceted-filter |
Header faceted filter with multi-select options. |
data-table-column-slider-filter |
Header slider filter for numeric range. |
data-table-column-date-filter |
Header date filter with calendar picker. |
Drag and Drop
Section titled “Drag and Drop”Row and column reordering. Pulls in @dnd-kit/*.
| Name | What it does |
|---|---|
data-table-row-dnd |
Row drag-and-drop. Includes provider, draggable row, drag handle, DnD-aware body. |
data-table-column-dnd |
Column drag-and-drop. Includes provider, draggable header, drag-along cell, DnD-aware header/body. |
Row DnD should not be combined with sorting or filtering — data order conflicts. Column DnD is safe to combine with any feature.
Auxiliary
Section titled “Auxiliary”Surrounding UI that pairs with the table.
| Name | What it does |
|---|---|
data-table-export-button |
Export current rows to CSV with configurable column selection. |
data-table-aside |
Sidebar panel for row details or additional content alongside the table. |
data-table-selection-bar |
Bulk-actions bar that appears when rows are selected. |
Picking a starting point
Section titled “Picking a starting point”Not sure where to start? Find the example that looks closest to what you’re building and copy its install line:
- Basic Table — search + pagination + view menu
- Faceted Filter Table — faceted + slider + date filters
- Advanced Table — filter menu, sort menu, export
- Virtualization Table — 10k+ rows
- Column DnD Table — column reorder + DnD view menu
- Row DnD Table — row reorder
- Tree Table — expandable rows
- Inline Edit Table —
getRowMemoKeypattern
Each example page lists exactly the registry items it uses.