sh4dcnv2 · atlas
← libraries

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

34 components react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://niko-table.com/r/registry.json
pnpm pnpm dlx shadcn@latest add https://niko-table.com/r/registry.json
bun bunx shadcn@latest add https://niko-table.com/r/registry.json
fetch registry curl -s https://niko-table.com/r/registry.json

Components

34 total
Data Table UI (table.tsx) 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 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 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
DataTable Virtualized Structure 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
DataTable Pagination 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
DataTable Search Filter component

Global search input with debouncing for filtering table data.

npx shadcn@latest add https://niko-table.com/r/data-table-search-filter.json
DataTable Sort Menu 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
DataTable View Menu component

Column visibility toggle menu for showing/hiding table columns.

npx shadcn@latest add https://niko-table.com/r/data-table-view-menu.json
DataTable View DnD Menu 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
DataTable Clear Filter component

Button to clear all active table filters at once.

npx shadcn@latest add https://niko-table.com/r/data-table-clear-filter.json
DataTable Filter Menu 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
DataTable Faceted Filter 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
DataTable Inline Filter 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
DataTable Slider Filter component

Slider-based filter for numeric range filtering.

npx shadcn@latest add https://niko-table.com/r/data-table-slider-filter.json
DataTable Date Filter 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
DataTable Export Button component

Export table data to CSV with configurable options.

npx shadcn@latest add https://niko-table.com/r/data-table-export-button.json
DataTable Aside 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
DataTable Selection Bar component

Bulk actions bar that appears when rows are selected.

npx shadcn@latest add https://niko-table.com/r/data-table-selection-bar.json
DataTable Column Sort component

Column header sort options with ascending/descending/clear controls.

npx shadcn@latest add https://niko-table.com/r/data-table-column-sort.json
DataTable Column Hide component

Column header option to hide/show individual columns.

npx shadcn@latest add https://niko-table.com/r/data-table-column-hide.json
DataTable Column Pin 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
DataTable Column Group 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
DataTable Column Faceted Filter 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
DataTable Column Slider Filter 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
DataTable Column Date Filter 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
DataTable Row DnD 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
DataTable Column DnD 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
DataTable Virtualized Row DnD 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
DataTable Virtualized Column DnD 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
DataTable Column Resize component

Opt-in column resizing with drag handles and double-click autosize (measures natural text width). Keyboard-operable handle. Drop <DataTableColumnResize/> into …

npx shadcn@latest add https://niko-table.com/r/data-table-column-resize.json
DataTable Column Auto-fit component

Opt-in even-split fill for resizable columns. Drop <DataTableColumnAutoFit/> next to <DataTableColumnResize/> and the resizable columns grow by an equal share …

npx shadcn@latest add https://niko-table.com/r/data-table-column-auto-fit.json
DataTable Column Sizing Persistence 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 Grid (editable) 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 Grid — change tracking & persistence 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