User-Facing Components

User-facing components are context-aware and automatically connect to the table via the useDataTable hook. These are the recommended components for most use cases.

DataTableToolbarSection

Container for organizing filters and actions in the toolbar.

Source Code ↗

import { DataTableToolbarSection } from "@/components/niko-table/components/data-table-toolbar-section"

<DataTableToolbarSection className="flex justify-between">
  <DataTableSearchFilter />
  <DataTableViewMenu />
</DataTableToolbarSection>

Props

Name	Type	Default	Description
className	string	-	Additional CSS classes.
children	React.ReactNode	-	Filter and action components.

DataTablePagination

Full-featured pagination controls with page size selection and navigation.

Source Code ↗

Filter Implementation ↗

import { DataTablePagination } from "@/components/niko-table/components/data-table-pagination"

<DataTablePagination
  pageSizeOptions={[10, 25, 50, 100]}
  totalCount={500}
  onPageChange={pageIndex => console.log("Page:", pageIndex)}
/>

Props

Name	Type	Default	Description
pageSizeOptions	number[]	[10, 25, 50, 100]	Available page size options.
totalCount	number	-	Total count of items (for server-side pagination).
isLoading	boolean	-	Loading state (overrides context loading).
isFetching	boolean	-	Fetching state (for TanStack Query).
disableNextPage	boolean	-	Explicitly disable next page button.
disablePreviousPage	boolean	-	Explicitly disable previous page button.
className	string	-	Additional CSS classes.

Event Handlers

Name	Type	Description
onPageChange	(pageIndex: number) => void	Called when page changes.
onNextPage	(pageIndex: number) => void	Called when navigating to next page.
onPreviousPage	(pageIndex: number) => void	Called when navigating to previous page.
onPageSizeChange	(pageSize: number, pageIndex: number) => void	Called when page size changes.
onPaginationReady	() => void	Called when pagination is initialized.

Note: Pagination buttons are automatically disabled when isLoading or isFetching is true.

DataTableSearchFilter

Global search input with debouncing. Supports both controlled and uncontrolled modes.

Source Code ↗

Filter Implementation ↗

import { DataTableSearchFilter } from "@/components/niko-table/components/data-table-search-filter"

// Uncontrolled (manages its own state)
<DataTableSearchFilter placeholder="Search products..." />

// Controlled (you manage the state)
const [search, setSearch] = useState("")
<DataTableSearchFilter
  value={search}
  onChange={setSearch}
  placeholder="Search..."
/>

// With nuqs for URL state
const [search, setSearch] = useQueryState('search')
<DataTableSearchFilter
  value={search ?? ""}
  onChange={setSearch}
/>

Props

Name	Type	Default	Description
placeholder	string	"Search..."	Input placeholder text.
value	string	-	Controlled value.
onChange	(value: string) => void	-	Change handler for controlled mode.
showClearButton	boolean	true	Show clear button when input has value.
className	string	-	Additional CSS classes.

DataTableFilterMenu

Command palette-style interface for adding filters with advanced operators and AND/OR logic.

Source Code ↗

Filter Implementation ↗

import { DataTableFilterMenu } from "@/components/niko-table/components/data-table-filter-menu"

<DataTableFilterMenu
  autoOptions
  dynamicCounts
  showCounts
  mergeStrategy="augment"
/>

Props

Name	Type	Default	Description
autoOptions	boolean	true	Auto-generate options for select/multiSelect columns.
showCounts	boolean	true	Show counts beside each option.
dynamicCounts	boolean	true	Recompute counts based on filtered rows.
limitToFilteredRows	boolean	true	Generate options from filtered rows only.
includeColumns	string[]	-	Only generate options for these column ids.
excludeColumns	string[]	-	Exclude these column ids from generation.
limitPerColumn	number	-	Limit number of generated options per column.
mergeStrategy	"preserve" | "augment" | "replace"	"preserve"	How to handle existing static options.
className	string	-	Additional CSS classes.

Merge Strategy

Value	Description
preserve	Keep user-defined options untouched (default).
augment	Add counts to matching values from static options.
replace	Override static options with generated options.

DataTableFacetedFilter

Faceted filter component for single or multiple selection with dynamic option generation.

Source Code ↗

Filter Implementation ↗

import { DataTableFacetedFilter } from "@/components/niko-table/components/data-table-faceted-filter"

// With static options
<DataTableFacetedFilter
  accessorKey="category"
  title="Category"
  options={[
    { label: "Electronics", value: "electronics" },
    { label: "Clothing", value: "clothing" },
  ]}
  multiple
/>

// Auto-generate options from data
<DataTableFacetedFilter
  accessorKey="brand"
  limitToFilteredRows={true}
/>

Props

Name	Type	Default	Description
accessorKey	keyof TData & string	-	Column accessor key (required).
title	string	-	Custom title (uses column.meta.label if not provided).
options	Option[]	-	Static options array.
multiple	boolean	-	Allow multiple selection.
showCounts	boolean	true	Show counts beside each option.
dynamicCounts	boolean	true	Recompute counts based on filtered rows.
limitToFilteredRows	boolean	!multiple	Show only options from filtered rows.

limitToFilteredRows

Controls whether the filter shows options from all data or only from filtered rows.

• true: Options are generated from rows that match other active filters. Useful for filters like “Brand” where you want to see only relevant options. This is the default for single-select filters (multiple={false}).
• false: Options are generated from all rows, regardless of other filters. Useful for filters like “Category” where you want to see all available options. This is the default for multi-select filters (multiple={true}).

DataTableSortMenu

Menu for managing column sorting with drag-and-drop reordering.

Source Code ↗

Filter Implementation ↗

import { DataTableSortMenu } from "@/components/niko-table/components/data-table-sort-menu"

<DataTableSortMenu className="ml-auto" />

Props

Name	Type	Default	Description
className	string	-	Additional CSS classes.
debounceMs	number	-	Debounce delay for sort updates.
throttleMs	number	-	Throttle delay for sort updates.
shallow	boolean	-	Use shallow comparison for sort state.
onSortingChange	(sorting: ColumnSort[]) => void	-	Callback when sorting changes.

DataTableViewMenu

Column visibility toggle menu with search functionality. For drag-to-reorder, use DataTableViewDndMenu — it lives in a separate file so consumers who don’t need DnD don’t pay the @dnd-kit/* bundle cost.

Source Code ↗

Filter Implementation ↗

import { DataTableViewMenu } from "@/components/niko-table/components/data-table-view-menu"

// Basic
<DataTableViewMenu />

// Surface required columns + Reset
<DataTableViewMenu
  lockedColumnIds={["id", "name"]}
  onReset={() => {
    table.resetColumnVisibility()
    table.resetColumnOrder()
  }}
/>

Props

Name	Type	Default	Description
className	string	-	Additional CSS classes.
onColumnVisibilityChange	(columnId: string, isVisible: boolean) => void	-	Callback when visibility changes.
lockedColumnIds	string[]	-	Columns shown in the menu but rendered disabled. Useful for required columns marked enableHiding: false.
onReset	() => void	-	When provided, renders a Reset button below a separator at the bottom of the menu.
resetLabel	string	"Reset to defaults"	Label for the reset button.

DataTableViewDndMenu

Drag-to-reorder variant of DataTableViewMenu. Each row gets a GripVertical handle; the list becomes vertically sortable via @dnd-kit. The same columnOrder state the table consumes drives the menu’s display order, so dropping a row updates both surfaces in lockstep.

Source Code ↗

Filter Implementation ↗

import { DataTableViewDndMenu } from "@/components/niko-table/components/data-table-view-dnd-menu"

const [columnOrder, setColumnOrder] = React.useState<string[]>([])

<DataTableViewDndMenu
  columnOrder={columnOrder}
  onColumnOrderChange={setColumnOrder}
  lockedColumnIds={["id"]}
  onReset={() => {
    setColumnOrder([])
    table.resetColumnVisibility()
  }}
/>

Props

Name	Type	Default	Description
columnOrder	string[]	-	Current column order array (required).
onColumnOrderChange	(next: string[]) => void	-	Callback when a row is dropped in a new position (required).
className	string	-	Additional CSS classes.
onColumnVisibilityChange	(columnId: string, isVisible: boolean) => void	-	Callback when visibility changes.
lockedColumnIds	string[]	-	Columns shown in the menu but rendered disabled.
onReset	() => void	-	When provided, renders a Reset button below a separator.
resetLabel	string	"Reset to defaults"	Label for the reset button.

DataTableInlineFilter

Inline filter toolbar for managing filters with advanced operators and AND/OR logic.

Source Code ↗

Filter Implementation ↗

import { DataTableInlineFilter } from "@/components/niko-table/components/data-table-inline-filter"

<DataTableInlineFilter
  autoOptions
  dynamicCounts
  showCounts
  mergeStrategy="augment"
/>

Props

Same as DataTableFilterMenu. See DataTableFilterMenu section above for details.

DataTableSliderFilter

Slider filter for numeric ranges with min/max inputs.

Source Code ↗

Filter Implementation ↗

import { DataTableSliderFilter } from "@/components/niko-table/components/data-table-slider-filter"

// Auto-detect from column metadata
<DataTableSliderFilter accessorKey="price" />

// Custom range
<DataTableSliderFilter
  accessorKey="rating"
  min={1}
  max={5}
  step={0.5}
/>

// With unit
<DataTableSliderFilter
  accessorKey="price"
  range={[0, 1000]}
  unit="$"
/>

Props

Name	Type	Default	Description
accessorKey	keyof TData & string	-	Column accessor key (required).
title	string	-	Custom title.
min	number	-	Minimum value (auto-detected from data if not provided).
max	number	-	Maximum value (auto-detected from data if not provided).
step	number	1	Step increment.
range	[number, number]	-	Range array [min, max] (overrides min/max).
unit	string	-	Unit label (e.g., “$”, “kg”).

DataTableDateFilter

Date filter component for single dates or date ranges.

Source Code ↗

Filter Implementation ↗

import { DataTableDateFilter } from "@/components/niko-table/components/data-table-date-filter"

// Single date
<DataTableDateFilter accessorKey="releaseDate" />

// Date range
<DataTableDateFilter
  accessorKey="releaseDate"
  multiple
/>

Props

Name	Type	Default	Description
accessorKey	keyof TData & string	-	Column accessor key (required).
title	string	-	Custom title.
multiple	boolean	false	Enable date range selection.

DataTableClearFilter

Button to clear all active filters, sorting, and search.

Source Code ↗

Filter Implementation ↗

import { DataTableClearFilter } from "@/components/niko-table/components/data-table-clear-filter"

<DataTableClearFilter />

Props

Name	Type	Default	Description
variant	ButtonVariant	"outline"	Button variant.
size	ButtonSize	"sm"	Button size.
showIcon	boolean	true	Show clear icon.
children	React.ReactNode	-	Button content.
enableResetColumnFilters	boolean	true	Enable resetting column filters.
enableResetGlobalFilter	boolean	true	Enable resetting global filter (search).
enableResetSorting	boolean	true	Enable resetting sorting.
className	string	-	Additional CSS classes.

DataTableExportButton

Button to export table data to CSV.

Source Code ↗

Filter Implementation ↗

import { DataTableExportButton } from "@/components/niko-table/components/data-table-export-button"

// Basic usage

<DataTableExportButton filename="products" />

// With human-readable headers from column.meta.label

<DataTableExportButton filename="products" useHeaderLabels />

// Export only selected rows

<DataTableExportButton filename="selected" onlySelected />

Props

Name	Type	Default	Description
filename	string	"table"	Filename for exported CSV (without extension).
excludeColumns	(keyof TData)[]	-	Columns to exclude from export.
onlySelected	boolean	false	Export only selected rows.
useHeaderLabels	boolean	false	Use column.columnDef.meta.label as CSV headers instead of column IDs.
variant	ButtonVariant	"outline"	Button variant.
size	ButtonSize	"sm"	Button size.
label	string	"Export CSV"	Button label.
showIcon	boolean	true	Show download icon.
className	string	-	Additional CSS classes.

DataTableColumnHeader

Composable column header container. Provides layout for title, actions, and filters within each column header.

Source Code ↗

import {
  DataTableColumnHeader,
  DataTableColumnTitle,
} from "@/components/niko-table/components/data-table-column-header"
import { DataTableColumnSortMenu } from "@/components/niko-table/components/data-table-column-sort"

const columns: DataTableColumnDef<User>[] = [
  {
    accessorKey: "name",
    header: () => (
      <DataTableColumnHeader>
        <DataTableColumnTitle />
        <DataTableColumnSortMenu />
      </DataTableColumnHeader>
    ),
    meta: { label: "Name" },
  },
]

Props

Name	Type	Description
children	React.ReactNode	Column header content.
className	string	Additional CSS classes.

Composition

The DataTableColumnHeader is composable. You can break it down into parts to customize the layout or add custom filters.

import {
  DataTableColumnHeader,
  DataTableColumnTitle,
} from "@/components/niko-table/components/data-table-column-header"
import { DataTableColumnActions } from "@/components/niko-table/components/data-table-column-actions"
import {
  DataTableColumnFilter,
  DataTableColumnFilterTrigger,
} from "@/components/niko-table/components/data-table-column-filter"
import { DataTableColumnSortOptions } from "@/components/niko-table/components/data-table-column-sort"
import { DataTableColumnHideOptions } from "@/components/niko-table/components/data-table-column-hide"
import { DataTableColumnPinOptions } from "@/components/niko-table/components/data-table-column-pin"
import { DataTableColumnFacetedFilterOptions } from "@/components/niko-table/components/data-table-column-faceted-filter"
import { DataTableColumnSliderFilterOptions } from "@/components/niko-table/components/data-table-column-slider-filter-options"
import { DataTableColumnDateFilterOptions } from "@/components/niko-table/components/data-table-column-date-filter-options"

const columns: DataTableColumnDef<User>[] = [
  {
    accessorKey: "status",
    header: () => (
      <DataTableColumnHeader>
        <DataTableColumnTitle />
        <DataTableColumnActions>
          <DataTableColumnFilter>
            <DataTableColumnFilterTrigger />
            <DataTableColumnFacetedFilterOptions />
          </DataTableColumnFilter>
          <DataTableColumnSortOptions />
          <DataTableColumnPinOptions />
          <DataTableColumnHideOptions />
        </DataTableColumnActions>
      </DataTableColumnHeader>
    ),
    meta: { label: "Status" },
  },
]

Standalone filter menus can also be placed directly inside DataTableColumnHeader without needing DataTableColumnActions:

import {
  DataTableColumnHeader,
  DataTableColumnTitle,
} from "@/components/niko-table/components/data-table-column-header"
import { DataTableColumnSortMenu } from "@/components/niko-table/components/data-table-column-sort"
import { DataTableColumnFacetedFilterMenu } from "@/components/niko-table/components/data-table-column-faceted-filter"
import { DataTableColumnSliderFilterMenu } from "@/components/niko-table/components/data-table-column-slider-filter-options"
import { DataTableColumnDateFilterMenu } from "@/components/niko-table/components/data-table-column-date-filter-options"
import { FILTER_VARIANTS } from "@/components/niko-table/lib/constants"

const columns: DataTableColumnDef<Product>[] = [
  {
    accessorKey: "category",
    header: () => (
      <DataTableColumnHeader>
        <DataTableColumnTitle />
        <DataTableColumnSortMenu variant={FILTER_VARIANTS.TEXT} />
        <DataTableColumnFacetedFilterMenu
          multiple
          limitToFilteredRows={false}
        />
      </DataTableColumnHeader>
    ),
    meta: { label: "Category" },
    enableColumnFilter: true,
  },
  {
    accessorKey: "price",
    header: () => (
      <DataTableColumnHeader>
        <DataTableColumnTitle />
        <DataTableColumnSortMenu variant={FILTER_VARIANTS.NUMBER} />
        <DataTableColumnSliderFilterMenu />
      </DataTableColumnHeader>
    ),
    meta: { label: "Price", variant: "range" },
    enableColumnFilter: true,
  },
  {
    accessorKey: "releaseDate",
    header: () => (
      <DataTableColumnHeader>
        <DataTableColumnTitle />
        <DataTableColumnSortMenu />
        <DataTableColumnDateFilterMenu />
      </DataTableColumnHeader>
    ),
    meta: { label: "Release Date", variant: "dateRange" },
    enableColumnFilter: true,
  },
]

How Context Works

When you use flexRender(...) in the core structure (like DataTableHeader or DataTableVirtualizedHeader), it renders the JSX returned by your header function. That JSX is automatically wrapped by the <DataTableColumnHeaderRoot column={...}> provider in the core components.

This means any component inside your header function (like DataTableColumnHeader, DataTableColumnTitle, etc.) correctly receives the column context even if you are using manual composition in your columns definition.

Advanced: Context Provider and Hook

For custom integrations, the column header context is available directly:

DataTableColumnHeaderRoot

Provider component that supplies column context to all child header components. This is used internally by DataTableHeader and DataTableVirtualizedHeader – you typically don’t need this unless building a completely custom header renderer.

import { DataTableColumnHeaderRoot } from "@/components/niko-table/components/data-table-column-header"

<DataTableColumnHeaderRoot column={column}>
  {/* All child components receive column context */}
  <DataTableColumnHeader>
    <DataTableColumnTitle />
  </DataTableColumnHeader>
</DataTableColumnHeaderRoot>

Name	Type	Description
column	Column<TData, TValue>	Table column instance (required).
children	React.ReactNode	Child components.

useColumnHeaderContext

Hook to access the column header context. Returns the current column instance. Use this when building custom sub-components that need access to the column.

import { useColumnHeaderContext } from "@/components/niko-table/components/data-table-column-header"

function CustomHeaderButton() {
  const { column } = useColumnHeaderContext(true)
  return <button onClick={() => column.toggleSorting()}>Sort</button>
}

Parameter	Type	Description
required	boolean	If true, throws if used outside DataTableColumnHeaderRoot.

Sub-Components

DataTableColumnTitle

Renders the column title (clickable to toggle sort). Uses column context automatically.

Name	Type	Default	Description
title	string	-	Custom title (uses column.meta.label if not provided).
className	string	-	Additional CSS classes.

DataTableColumnActions

Container for action icons and dropdown menu for column options. Automatically detects active state (sorted, pinned, filtered).

Name	Type	Default	Description
children	React.ReactNode	-	Action option components.
isActive	boolean	auto	Override active state (auto-detected from context).
className	string	-	Additional CSS classes.

DataTableColumnFilter

Wrapper for grouping column filter components.

Name	Type	Description
children	React.ReactNode	Filter components.
className	string	Additional CSS classes.

DataTableColumnFilterTrigger

Dedicated filter icon button that uses column context. Shows a funnel icon to open column filters.

Name	Type	Description
className	string	Additional CSS classes.

DataTableColumnSortOptions

Sorting options to compose inside DataTableColumnActions. Renders sort ascending/descending/clear options within a dropdown menu.

Name	Type	Default	Description
variant	SortIconVariant	"text"	Sort icon variant ("text", "number", "date"). Auto-detected from column.meta.variant.
withSeparator	boolean	true	Whether to render a separator before the options.
className	string	-	Additional CSS classes.

DataTableColumnSortMenu

Standalone sort button for inline use outside dropdown menus. Renders as a clickable button with a dropdown for sort options.

Name	Type	Default	Description
variant	SortIconVariant	"text"	Sort icon variant ("text", "number", "date"). Auto-detected from column.meta.variant.
className	string	-	Additional CSS classes.

DataTableColumnPinOptions

Pinning options to compose inside DataTableColumnActions. Renders pin left/right/unpin options.

Name	Type	Description
className	string	Additional CSS classes.

DataTableColumnPinMenu

Standalone pinning menu for column header. Renders as a clickable button.

Name	Type	Description
className	string	Additional CSS classes.

DataTableColumnHideOptions

Hide column option to compose inside DataTableColumnActions.

Name	Type	Description
className	string	Additional CSS classes.

DataTableColumnHideMenu

Standalone hide menu for column header. Renders as a clickable button.

Name	Type	Description
className	string	Additional CSS classes.

DataTableColumnFacetedFilterOptions

Faceted filter options to compose inside DataTableColumnActions. Shows a multi-select filter list.

Name	Type	Description
column	Column<TData>	Optional override (auto-detected from context).
options	Option[]	Static options array.
multiple	boolean	Allow multiple selection.
className	string	Additional CSS classes.

DataTableColumnFacetedFilterMenu

Standalone faceted filter popover for column header. Renders as a clickable button with filter icon. Auto-generates options from row data when no explicit options are provided.

Name	Type	Default	Description
column	Column<TData>	-	Optional override (auto-detected from context).
options	Option[]	-	Static options array (auto-generated if omitted).
multiple	boolean	-	Allow multiple selection.
limitToFilteredRows	boolean	true	Show only options from filtered rows (false = all rows).
className	string	-	Additional CSS classes.

DataTableColumnSliderFilterOptions

Slider filter options to compose inside DataTableColumnActions. Shows a range slider for numeric columns.

Name	Type	Description
column	Column<TData>	Optional override (auto-detected from context).
min	number	Minimum value.
max	number	Maximum value.
step	number	Step increment.
className	string	Additional CSS classes.

DataTableColumnSliderFilterMenu

Standalone slider filter popover for column header. Renders as a clickable button with slider icon.

Name	Type	Description
column	Column<TData>	Optional override (auto-detected from context).
min	number	Minimum value.
max	number	Maximum value.
step	number	Step increment.
className	string	Additional CSS classes.

DataTableColumnDateFilterOptions

Date filter options to compose inside DataTableColumnActions. Shows a date picker for date columns.

Name	Type	Description
column	Column<TData>	Optional override (auto-detected from context).
multiple	boolean	Enable date range selection.
className	string	Additional CSS classes.

DataTableColumnDateFilterMenu

Standalone date filter popover for column header. Renders as a clickable button with calendar icon.

Name	Type	Description
column	Column<TData>	Optional override (auto-detected from context).
multiple	boolean	Enable date range selection.
className	string	Additional CSS classes.

DataTableAside

Sidebar component for displaying additional content (filters, details, etc.) alongside the table.

Source Code ↗

import {
  DataTableAside,
  DataTableAsideTrigger,
  DataTableAsideContent,
  DataTableAsideHeader,
  DataTableAsideTitle,
  DataTableAsideDescription,
  DataTableAsideClose,
} from "@/components/niko-table/components/data-table-aside"

<DataTableAside side="right">
  <DataTableAsideTrigger>Open Filters</DataTableAsideTrigger>
  <DataTableAsideContent>
    <DataTableAsideHeader>
      <DataTableAsideTitle>Filters</DataTableAsideTitle>
      <DataTableAsideDescription>Filter your data</DataTableAsideDescription>
      <DataTableAsideClose />
    </DataTableAsideHeader>
    {/* filter content */}
  </DataTableAsideContent>
</DataTableAside>

DataTableAside Props

Name	Type	Default	Description
children	React.ReactNode	-	Aside components (Trigger, Content).
side	"left" | "right"	"right"	Side of the table to display the aside.
open	boolean	-	Controlled open state.
onOpenChange	(open: boolean) => void	-	Callback when open state changes.
defaultOpen	boolean	false	Initial open state (uncontrolled).

DataTableAsideTrigger Props

Name	Type	Default	Description
children	React.ReactNode	-	Trigger content.
asChild	boolean	false	Render as child element.
className	string	-	Additional CSS classes.

DataTableAsideContent Props

Name	Type	Default	Description
children	React.ReactNode	-	Aside content.
width	string	"w-1/2"	Width of the aside (Tailwind class).
sticky	boolean	false	Make aside sticky.
className	string	-	Additional CSS classes.

DataTableSelectionBar

Shows bulk actions when rows are selected.

Source Code ↗

import { DataTableSelectionBar } from "@/components/niko-table/components/data-table-selection-bar"

<DataTableSelectionBar
  selectedCount={table.getSelectedRowModel().rows.length}
  onClear={() => table.resetRowSelection()}
>
  <Button onClick={handleDelete}>Delete Selected</Button>
  <Button onClick={handleExport}>Export Selected</Button>
</DataTableSelectionBar>

Props

Name	Type	Default	Description
selectedCount	number	-	Number of selected rows (required).
onClear	() => void	-	Callback to clear selection.
children	React.ReactNode	-	Custom action buttons.
className	string	-	Additional CSS classes.

DataTableEmptyState Components

Composition components for building custom empty states.

Source Code ↗

import {
  DataTableEmptyIcon,
  DataTableEmptyMessage,
  DataTableEmptyTitle,
  DataTableEmptyDescription,
  DataTableEmptyFilteredMessage,
  DataTableEmptyActions,
} from "@/components/niko-table/components/data-table-empty-state"
import { PackageOpen } from "lucide-react"
import { Button } from "@/components/ui/button"

// Complete empty state composition

<DataTableEmptyBody>
  <DataTableEmptyIcon>
    <PackageOpen className="size-12 text-muted-foreground" />
  </DataTableEmptyIcon>
  <DataTableEmptyMessage>
    <DataTableEmptyTitle>No products found</DataTableEmptyTitle>
    <DataTableEmptyDescription>
      Get started by adding your first product to the catalog.
    </DataTableEmptyDescription>
  </DataTableEmptyMessage>
  <DataTableEmptyFilteredMessage>
    No products match your current filters. Try adjusting your search criteria.
  </DataTableEmptyFilteredMessage>
  <DataTableEmptyActions>
    <Button onClick={handleAddProduct}>Add Product</Button>
    <Button variant="outline" onClick={handleImport}>
      Import from CSV
    </Button>
  </DataTableEmptyActions>
</DataTableEmptyBody>

DataTableEmptyIcon

Icon component for empty state.

Name	Type	Description
children	React.ReactNode	Icon element.
className	string	Additional CSS classes.

DataTableEmptyMessage

Message shown when table is empty (not filtered).

Name	Type	Description
children	React.ReactNode	Message content.
className	string	Additional CSS classes.

DataTableEmptyFilteredMessage

Message shown when filters return no results.

Name	Type	Description
children	React.ReactNode	Message content.
className	string	Additional CSS classes.

DataTableEmptyTitle

Title component for empty state messages.

Name	Type	Description
children	React.ReactNode	Title text.
className	string	Additional CSS classes.

DataTableEmptyDescription

Description component for empty state messages.

Name	Type	Description
children	React.ReactNode	Description text.
className	string	Additional CSS classes.

DataTableEmptyActions

Actions component for empty state (buttons, links, etc.).

Name	Type	Description
children	React.ReactNode	Action buttons/links.
className	string	Additional CSS classes.

---

Drag-and-Drop Components

Context-aware DnD wrappers that pair with the core Table*DndProvider components in filters/. Use these for the recommended composition pattern.

DataTableRowDndProvider

Source Code ↗

Wraps the table with row DnD context. Automatically connects to DataTableRoot via useDataTable.

import { DataTableRowDndProvider, DataTableRowDragHandle } from "@/components/niko-table/components/data-table-row-dnd"

<DataTableRowDndProvider data={data} onReorder={setData}>
  <DataTable>
    <DataTableHeader />
    <DataTableDndBody />
  </DataTable>
</DataTableRowDndProvider>

Name	Type	Default	Description
data	TData[]	-	The current data array (required).
onReorder	(data: TData[]) => void	-	Callback with the reordered data array (required).
children	React.ReactNode	-	Table components to wrap.

DataTableDraggableRow

Context-aware wrapper that makes a single table row draggable. Used internally by DataTableDndBody to render each row; you can also use it when building custom row layouts. Wraps the core TableDraggableRow from filters/.

import { DataTableDraggableRow } from "@/components/niko-table/components/data-table-row-dnd"

<DataTableDraggableRow row={row}>
  {row.getVisibleCells().map(cell => (
    <TableCell key={cell.id}>
      {flexRender(cell.column.columnDef.cell, cell.getContext())}
    </TableCell>
  ))}
</DataTableDraggableRow>

Name	Type	Default	Description
row	Row<TData>	-	TanStack Table row instance (required).
children	React.ReactNode	-	Row content (e.g. cells).
className	string	-	Additional CSS classes.

DataTableRowDragHandle

Grip icon button for initiating row drags. Uses useSortable internally.

Name	Type	Default	Description
rowId	string	-	Unique row identifier for sortable (required).
className	string	-	Additional CSS classes.

DataTableColumnDndProvider

Source Code ↗

Wraps the table with column DnD context (horizontal axis).

import { DataTableColumnDndProvider } from "@/components/niko-table/components/data-table-column-dnd"

<DataTableColumnDndProvider columnOrder={columnOrder} onColumnOrderChange={setColumnOrder}>
  <DataTable>
    <DataTableDndHeader />
    <DataTableDndColumnBody />
  </DataTable>
</DataTableColumnDndProvider>

Name	Type	Default	Description
columnOrder	string[]	-	Current column order array (required).
onColumnOrderChange	(columnOrder: string[]) => void	-	Callback with the new column order (required).
children	React.ReactNode	-	Table components to wrap.

DataTableDraggableHeader

Context-aware wrapper for TableDraggableHeader. Makes header cells draggable.

Name	Type	Default	Description
header	Header<TData, TValue>	-	TanStack Table header instance (required).
children	React.ReactNode	-	Header content.
className	string	-	Additional CSS classes.

DataTableDragAlongCell

Context-aware wrapper for TableDragAlongCell. Cell follows column drag position.

Name	Type	Default	Description
cell	Cell<TData, TValue>	-	TanStack Table cell instance (required).
children	React.ReactNode	-	Cell content.
className	string	-	Additional CSS classes.

Column Header Internal Helpers

The column header system is split into a composable set of files. DataTableColumnHeader (documented above) is the user-facing entry point that consumers render in their column header callbacks. The pieces below are the building blocks it uses internally — they are exported so consumers building a fully custom header can drop in just the parts they need (e.g. only the sort menu, or only the pin/hide actions), but most consumers won’t import them directly.

Each module is a thin wrapper around the corresponding filters/table-column-* filter (which holds the TanStack-Table-aware logic) and adds context wiring + UI chrome via useColumnHeaderContext.

data-table-column-actions

Source Code ↗

Renders the trailing dropdown-menu trigger on a column header (the ⋮ button). Composed from the column-sort, column-hide, column-pin, and column-faceted-filter primitives — pulls in only the items relevant to the column’s meta configuration. Used inside DataTableColumnHeader.

data-table-column-title

Source Code ↗

Renders the column’s title text (resolved from column.columnDef.meta?.label or the accessor key via useDerivedColumnTitle). Wraps the corresponding TableColumnTitle from filters/.

data-table-column-sort

Source Code ↗

Renders the per-column sort menu items (Asc / Desc / Clear) with the variant-aware icons from SORT_ICONS / SORT_LABELS. Honors column.getCanSort() — renders nothing when sorting is disabled. Wraps TableColumnSort from filters/.

data-table-column-hide

Source Code ↗

Renders the “Hide column” menu item. Honors column.getCanHide(). Wraps TableColumnHide from filters/.

data-table-column-pin

Source Code ↗

Renders the “Pin to left” / “Pin to right” / “Unpin” menu items. Honors column.getCanPin(). Wraps TableColumnPin from filters/.

data-table-column-filter

Source Code ↗

Routes a column to the right per-column filter UI based on column.columnDef.meta?.variant (text / number / range / date / select / multiSelect / boolean). Lazy-mounts the variant-specific filter component (data-table-column-faceted-filter, data-table-column-slider-filter-options, data-table-column-date-filter-options) only when the user opens the filter panel.

data-table-column-filter-trigger

Source Code ↗

The <button> shown in the column header that opens the per-column filter popover. Switches its label / active state based on whether the column currently has a filter value.

data-table-column-faceted-filter

Source Code ↗

The per-column variant of the faceted multi-select filter (used for select / multiSelect column variants). Generates options via useGeneratedOptions and forwards dynamicCounts / limitToFilteredRows props through to the option builder. Wraps TableColumnFacetedFilter from filters/.

data-table-column-date-filter-options

Source Code ↗

The per-column date / date-range filter UI (date picker + operator selector). Backed by TableColumnDateFilter from filters/. Lazily mounted by data-table-column-filter when the column variant is date / dateRange.

data-table-column-slider-filter-options

Source Code ↗

The per-column numeric range slider UI. Resolves min / max from the column’s faceted min/max values when not explicitly set. Backed by TableColumnSliderFilter from filters/. Lazily mounted by data-table-column-filter when the column variant is range.