Components

Docs ↗

API Reference ↗

The components in data-table are built to be composable. You build your table by putting the provided components together. They also compose well with other shadcn/ui components.

If you need to change the code, you are encouraged to do so. The code is yours.

Directory Structure

The Niko Table components are organized into logical directories following the file structure in src/components/niko-table:

• core/ - Essential table components (DataTableRoot, DataTable, context, structure components)
• components/ - User-facing context-aware components (automatically connect to table context via useDataTable hook)
• filters/ - Core filter implementation components (accept table prop directly, used by components/)
• hooks/ - Custom React hooks for table functionality
• lib/ - Utility functions and constants
• types/ - TypeScript type definitions
• config/ - Configuration and feature detection

This documentation follows this structure for easy navigation. Each component section includes links to source code and relevant documentation.

Documentation Sections

Core Components

Essential building blocks of the data table. They handle table initialization, context management, and basic structure.

Components:

• DataTableRoot - Provides table context and initializes TanStack Table
• DataTable - Main table container with scrolling behavior
• DataTableHeader - Table header with sortable columns
• DataTableBody - Table body with rows and scroll events
• DataTableSkeleton - Loading skeleton
• DataTableEmptyBody - Empty state component
• DataTableLoading - Loading indicator
• DataTableErrorBoundary - Error boundary for table
• Virtualized components for large datasets

User-Facing Components

Context-aware components that automatically connect to the table via the useDataTable hook. These are the recommended components for most use cases.

Components:

• DataTableToolbarSection - Container for filters and actions
• DataTablePagination - Full-featured pagination controls
• DataTableSearchFilter - Global search input with debouncing
• DataTableFilterMenu - Command palette-style filter interface
• DataTableFacetedFilter - Faceted filter for single/multiple selection
• DataTableSortMenu - Sort management with drag-and-drop
• DataTableViewMenu - Column visibility toggle
• DataTableInlineFilter - Inline filter toolbar
• DataTableSliderFilter - Slider filter for numeric ranges
• DataTableDateFilter - Date filter component
• DataTableClearFilter - Clear all filters button
• DataTableExportButton - Export to CSV button
• DataTableColumnHeader - Sortable column header
• DataTableColumnFacetedFilterMenu - Column-level faceted filter popover
• DataTableColumnSliderFilterMenu - Column-level slider filter popover
• DataTableColumnDateFilterMenu - Column-level date filter popover
• DataTableAside - Sidebar component
• DataTableSelectionBar - Bulk actions bar
• DataTableEmptyState - Empty state composition components

Filter Components

Core filter implementation components that accept a table prop directly. They are used internally by the context-aware components but can also be used standalone when building custom components.

Components:

• TableSearchFilter - Core search filter
• TablePagination - Core pagination
• TableFilterMenu - Core filter menu
• TableFacetedFilter - Core faceted filter
• TableSliderFilter - Core slider filter
• TableDateFilter - Core date filter
• TableSortMenu - Core sort menu
• TableViewMenu - Core view menu
• TableInlineFilter - Core inline filter
• TableClearFilter - Core clear filter
• TableExportButton - Core export button
• TableRangeFilter - Core range filter

Hooks

Custom React hooks for table functionality.

Hooks:

• useDataTable - Access table instance and context
• useDebounce - Debounce values for search/filters
• useDerivedColumnTitle - Derive column titles
• useGeneratedOptions - Generate filter options from data
• useKeyboardShortcut - Manage keyboard shortcuts

Credits and Inspirations

Niko Table is built on top of excellent open-source projects and inspired by the work of talented developers in the community.

Core Dependencies

• TanStack Table by Tanner Linsley - The headless table library that powers everything. Provides the foundation for all table functionality including sorting, filtering, pagination, and more.

• Shadcn UI by Shadcn - Beautiful, accessible component primitives built on Radix UI. All UI components in Niko Table are built using Shadcn UI components.

Major Inspirations

• sadmann7’s work - Major inspiration for filter components and table patterns:

  • TableCN - Inspired our filter menu, inline filter, faceted filter, and slider filter implementations. The composition pattern and filter architecture drew heavily from this excellent project.
  • DiceUI Sortable - Drag and drop sortable for row reordering, which inspired the sort menu implementation.

• nuqs by François Best - Type-safe search params state manager for URL state management. Used in server-side examples for managing table state in URLs.

• Web Dev Simplified Registry by Kyle Cook - Registry implementation pattern that inspired the structure and organization of this project.

Philosophy

Following the Shadcn philosophy: “Nobody’s table, everyone’s solution.”

• Copy and paste the code into your project
• Own the code - modify it as needed
• No dependencies on external packages (except TanStack Table and Shadcn UI)
• Fully customizable and themeable
• Built with TypeScript for type safety

License

MIT License - use it freely in your projects!