Filter Components

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

TableSearchFilter

Core search filter implementation.

Source Code ↗

import { TableSearchFilter } from "@/components/niko-table/filters/table-search-filter"

<TableSearchFilter table={table} placeholder="Search..." />

Props

Name	Type	Default	Description
table	Table<TData>	-	TanStack Table instance (required).
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.

TablePagination

Core pagination implementation.

Source Code ↗

import { TablePagination } from "@/components/niko-table/filters/table-pagination"

// Basic usage
<TablePagination table={table} />

// With custom page size options
<TablePagination
  table={table}
  pageSizeOptions={[10, 25, 50, 100]}
/>

// With total count for server-side pagination
<TablePagination
  table={table}
  totalCount={500}
  onPageChange={(pageIndex) => console.log("Page:", pageIndex)}
/>

Props

Same as DataTablePagination but requires table prop. See DataTablePagination section above.

TableFilterMenu

Core filter menu implementation with command palette interface.

Source Code ↗

import { TableFilterMenu } from "@/components/niko-table/filters/table-filter-menu"
import { useState } from "react"
import type { ExtendedColumnFilter } from "@/components/niko-table/types"

// Controlled mode
const [filters, setFilters] = useState<ExtendedColumnFilter<Product>[]>([])

<TableFilterMenu
  table={table}
  filters={filters}
  onFiltersChange={setFilters}
/>

Props

Name	Type	Description
table	Table<TData>	TanStack Table instance (required).
filters	ExtendedColumnFilter<TData>[]	Controlled filters array.
onFiltersChange	(filters: ExtendedColumnFilter<TData>[] | null) => void	Callback when filters change.
className	string	Additional CSS classes.

TableFacetedFilter

Core faceted filter implementation.

Source Code ↗

import { TableFacetedFilter } from "@/components/niko-table/filters/table-faceted-filter"

// Basic usage with static options
<TableFacetedFilter
  column={table.getColumn("category")}
  title="Category"
  options={[
    { label: "Electronics", value: "electronics" },
    { label: "Clothing", value: "clothing" },
  ]}
/>

// With multiple selection
<TableFacetedFilter
  column={table.getColumn("brand")}
  title="Brand"
  options={brandOptions}
  multiple
  onValueChange={(value) => console.log("Selected:", value)}
/>

Props

Name	Type	Description
column	Column<TData, TValue>	Table column instance (required).
title	string	Filter title.
options	Option[]	Static options array.
multiple	boolean	Allow multiple selection.
onValueChange	(value: string[] | undefined) => void	Callback when value changes.

TableSliderFilter

Core slider filter implementation for numeric ranges.

Source Code ↗

import { TableSliderFilter } from "@/components/niko-table/filters/table-slider-filter"

// Basic usage (auto-detects range from data)
<TableSliderFilter
  column={table.getColumn("price")}
  title="Price"
/>

// With custom range
<TableSliderFilter
  column={table.getColumn("rating")}
  title="Rating"
  min={1}
  max={5}
  step={0.5}
/>

// With unit and range array
<TableSliderFilter
  column={table.getColumn("price")}
  title="Price Range"
  range={[0, 1000]}
  unit="$"
  onValueChange={(value) => console.log("Range:", value)}
/>

Props

Name	Type	Description
column	Column<TData>	Table column instance (required).
title	string	Filter title.
range	[number, number]	Manual range [min, max].
min	number	Manual minimum value.
max	number	Manual maximum value.
step	number	Step increment.
unit	string	Unit label (e.g., “$”, “kg”).
onValueChange	(value: [number, number] | undefined) => void	Callback when value changes.

TableDateFilter

Core date filter implementation.

Source Code ↗

import { TableDateFilter } from "@/components/niko-table/filters/table-date-filter"

// Single date selection
<TableDateFilter
  column={table.getColumn("releaseDate")}
  title="Release Date"
/>

// Date range selection
<TableDateFilter
  column={table.getColumn("createdAt")}
  title="Created Date"
  multiple
/>

Props

Name	Type	Description
column	Column<TData>	Table column instance (required).
title	string	Filter title.
multiple	boolean	Enable date range selection.

TableSortMenu

Core sort menu implementation.

Source Code ↗

import { TableSortMenu } from "@/components/niko-table/filters/table-sort-menu"

// Basic usage
<TableSortMenu table={table} />

// With debounce for performance
<TableSortMenu
  table={table}
  debounceMs={300}
  onSortingChange={(sorting) => console.log("Sorting:", sorting)}
/>

// With throttle instead of debounce
<TableSortMenu
  table={table}
  throttleMs={200}
  shallow
/>

Props

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

TableViewMenu

Core view menu implementation for column visibility. For drag-to-reorder, use TableViewDndMenu — it lives in a separate file so consumers who don’t need DnD don’t pay the @dnd-kit/* bundle cost.

Source Code ↗

import { TableViewMenu } from "@/components/niko-table/filters/table-view-menu"

// Basic usage
<TableViewMenu table={table} />

// With visibility change callback
<TableViewMenu
  table={table}
  onColumnVisibilityChange={(columnId, isVisible) => {
    console.log(`Column ${columnId} is now ${isVisible ? "visible" : "hidden"}`)
  }}
/>

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

Props

Name	Type	Description
table	Table<TData>	TanStack Table instance (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. 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	Label for the reset button. Defaults to "Reset to defaults".

TableViewDndMenu

Drag-to-reorder variant of TableViewMenu. Each row gets a GripVertical handle and 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. Combines cleanly with TableColumnDndProvider (header drag) — two reorder surfaces, one state.

Source Code ↗

import { TableViewDndMenu } from "@/components/niko-table/filters/table-view-dnd-menu"

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

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

Props

Name	Type	Description
table	Table<TData>	TanStack Table instance (required).
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	Label for the reset button. Defaults to "Reset to defaults".

TableInlineFilter

Core inline filter implementation with advanced operators.

Source Code ↗

import { TableInlineFilter } from "@/components/niko-table/filters/table-inline-filter"
import { useState } from "react"
import type { ExtendedColumnFilter } from "@/components/niko-table/types"

// Controlled mode with filters
const [filters, setFilters] = useState<ExtendedColumnFilter<Product>[]>([])

<TableInlineFilter
  table={table}
  filters={filters}
  onFiltersChange={setFilters}
/>

Props

Name	Type	Description
table	Table<TData>	TanStack Table instance (required).
filters	ExtendedColumnFilter<TData>[]	Controlled filters array.
onFiltersChange	(filters: ExtendedColumnFilter<TData>[]) => void	Callback when filters change.
className	string	Additional CSS classes.

TableClearFilter

Core clear filter button implementation.

Source Code ↗

import { TableClearFilter } from "@/components/niko-table/filters/table-clear-filter"

// Basic usage
<TableClearFilter table={table} />

// With custom styling
<TableClearFilter
  table={table}
  variant="ghost"
  size="sm"
/>

// Custom content
<TableClearFilter table={table}>
  Reset All
</TableClearFilter>

// Selective reset (only filters, not sorting)
<TableClearFilter
  table={table}
  enableResetSorting={false}
/>

Props

Name	Type	Default	Description
table	Table<TData>	-	TanStack Table instance (required).
variant	"default" | "outline" | "ghost"	"outline"	Button variant.
size	"default" | "sm" | "lg"	"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.

TableExportButton

Core export button implementation.

Source Code ↗

import { TableExportButton, exportTableToCSV } from "@/components/niko-table/filters/table-export-button"

// Basic usage
<TableExportButton table={table} />

// With custom filename
<TableExportButton
  table={table}
  filename="products-export"
/>

// Exclude specific columns
<TableExportButton
  table={table}
  filename="products"
  excludeColumns={["id", "internalNotes"]}
/>

// Export only selected rows
<TableExportButton
  table={table}
  onlySelected
  label="Export Selected"
/>

// With human-readable headers from column.meta.label
<TableExportButton
  table={table}
  filename="products"
  useHeaderLabels
/>

Props

Name	Type	Default	Description
table	Table<TData>	-	TanStack Table instance (required).
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.

exportTableToCSV

Standalone utility function to export a TanStack Table to CSV. Use this when you want full control over when and how the export happens.

import { exportTableToCSV } from "@/components/niko-table/filters/table-export-button"

// Basic export
exportTableToCSV(table, { filename: "users" })

// Export with human-readable headers from column.meta.label
exportTableToCSV(table, { filename: "users", useHeaderLabels: true })

// Export only selected rows, excluding certain columns
exportTableToCSV(table, {
  filename: "selected-users",
  onlySelected: true,
  excludeColumns: ["id", "internalNotes"],
})

Options (ExportTableToCSVOptions<TData>)

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.

TableRangeFilter

Core range filter implementation for numeric inputs.

Source Code ↗

import { TableRangeFilter } from "@/components/niko-table/filters/table-range-filter"
import type { ExtendedColumnFilter } from "@/components/niko-table/types"

// Basic usage with filter configuration
const filter: ExtendedColumnFilter<Product> = {
  filterId: "price-range",
  columnId: "price",
  operator: "between",
  value: [0, 100],
}

<TableRangeFilter
  filter={filter}
  column={table.getColumn("price")}
  inputId="price-min"
  onFilterUpdate={(filterId, updates) => {
    console.log("Filter updated:", filterId, updates)
  }}
/>

Props

Name	Type	Description
filter	ExtendedColumnFilter<TData>	Filter configuration (required).
column	Column<TData>	Table column instance (required).
inputId	string	Unique input ID (required).
onFilterUpdate	(filterId: string, updates: Partial<Omit<ExtendedColumnFilter<TData>, "filterId">>) => void	Callback when filter updates.
className	string	Additional CSS classes.

---

Column-Level Filter Components

These components are the core implementations used by the composable DataTableColumnHeader sub-components. They accept column and/or table props directly and can be used standalone when building custom column headers.

TableColumnTitle

Core column title implementation. Renders a clickable title that toggles sorting.

Source Code ↗

import { TableColumnTitle } from "@/components/niko-table/filters/table-column-title"

<TableColumnTitle column={column} title="Custom Title" />

Props

Name	Type	Description
column	Column<TData, TValue>	Table column instance (required).
title	string	Custom title (uses column.meta.label if not provided).
className	string	Additional CSS classes.

TableColumnActions

Core column actions container. Renders a dropdown menu trigger with active state indicator.

Source Code ↗

import { TableColumnActions } from "@/components/niko-table/filters/table-column-actions"

<TableColumnActions isActive={column.getIsSorted() !== false}>
  {/* Sort, pin, hide options */}
</TableColumnActions>

Props

Name	Type	Default	Description
children	React.ReactNode	-	Action option components.
isActive	boolean	false	Whether to show active indicator (dot on trigger).
className	string	-	Additional CSS classes.

TableColumnSortOptions / TableColumnSortMenu

Core sorting implementations. TableColumnSortOptions renders sort items inside a dropdown menu. TableColumnSortMenu renders a standalone sort button.

Source Code ↗

import {
  TableColumnSortOptions,
  TableColumnSortMenu,
} from "@/components/niko-table/filters/table-column-sort"

// Inside a dropdown menu
<TableColumnSortOptions column={column} table={table} />

// Standalone button
<TableColumnSortMenu column={column} table={table} />

Props

Name	Type	Description
column	Column<TData>	Table column instance (required).
table	Table<TData>	TanStack Table instance (required).
className	string	Additional CSS classes.

TableColumnHideOptions / TableColumnHideMenu

Core hide column implementations. TableColumnHideOptions renders a hide item inside a dropdown menu. TableColumnHideMenu renders a standalone button.

Source Code ↗

import {
  TableColumnHideOptions,
  TableColumnHideMenu,
} from "@/components/niko-table/filters/table-column-hide"

// Inside a dropdown menu
<TableColumnHideOptions column={column} />

// Standalone button
<TableColumnHideMenu column={column} />

Props

Name	Type	Description
column	Column<TData, TValue>	Table column instance (required).
className	string	Additional CSS classes.

TableColumnPinOptions / TableColumnPinMenu

Core column pinning implementations. TableColumnPinOptions renders pin left/right/unpin items inside a dropdown menu. TableColumnPinMenu renders a standalone button.

Source Code ↗

import {
  TableColumnPinOptions,
  TableColumnPinMenu,
} from "@/components/niko-table/filters/table-column-pin"

// Inside a dropdown menu
<TableColumnPinOptions column={column} />

// Standalone button
<TableColumnPinMenu column={column} />

Props

Name	Type	Description
column	Column<TData, TValue>	Table column instance (required).
className	string	Additional CSS classes.

TableColumnFacetedFilterOptions / TableColumnFacetedFilterMenu

Core faceted filter implementations for column headers. TableColumnFacetedFilterOptions renders inside a dropdown. TableColumnFacetedFilterMenu renders a standalone popover.

Source Code ↗

import {
  TableColumnFacetedFilterOptions,
  TableColumnFacetedFilterMenu,
} from "@/components/niko-table/filters/table-column-faceted-filter"

// Inside a dropdown menu
<TableColumnFacetedFilterOptions column={column} options={options} />

// Standalone popover
<TableColumnFacetedFilterMenu column={column} table={table} options={options} />

Props

Name	Type	Description
column	Column<TData>	Table column instance (required).
table	Table<TData>	TanStack Table instance (Menu only).
options	Option[]	Static options array.
multiple	boolean	Allow multiple selection.
className	string	Additional CSS classes.

TableColumnFilterTrigger

Core trigger button for opening the column filter popover. Renders a filter icon (or filter-clear icon when the column is filtered). Often used with TableColumnFacetedFilterOptions or TableColumnFacetedFilterMenu; accepts standard Button props in addition to column.

import { TableColumnFilterTrigger } from "@/components/niko-table/filters/table-column-faceted-filter"

<TableColumnFilterTrigger column={column} />

Props

Name	Type	Default	Description
column	Column<TData, TValue>	-	TanStack Table column instance (required).
className	string	-	Additional CSS classes.

All other props are passed through to the underlying Button component.

TableColumnSliderFilterOptions

Core slider filter implementation for column headers. Renders a range slider inside a dropdown menu.

Source Code ↗

import { TableColumnSliderFilterOptions } from "@/components/niko-table/filters/table-column-slider-filter"

<TableColumnSliderFilterOptions column={column} min={0} max={1000} step={10} />

Props

Name	Type	Description
column	Column<TData>	Table column instance (required).
min	number	Minimum value.
max	number	Maximum value.
step	number	Step increment.
className	string	Additional CSS classes.

TableColumnDateFilterOptions

Core date filter implementation for column headers. Renders a date picker inside a dropdown menu.

Source Code ↗

import { TableColumnDateFilterOptions } from "@/components/niko-table/filters/table-column-date-filter"

<TableColumnDateFilterOptions column={column} multiple />

Props

Name	Type	Description
column	Column<TData>	Table column instance (required).
multiple	boolean	Enable date range selection.
className	string	Additional CSS classes.

---

Drag-and-Drop Components

TableRowDndProvider

Core row DnD provider that wraps the table with DnD context and sensors. Handles arrayMove internally and calls onReorder with the new data array.

Source Code ↗

import { TableRowDndProvider, TableDraggableRow, TableRowDragHandle } from "@/components/niko-table/filters/table-row-dnd"

<TableRowDndProvider data={data} onReorder={setData}>
  {/* table content */}
</TableRowDndProvider>

Props

Name	Type	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.
modifiers	Modifier[]	DnD modifiers (defaults to vertical axis).

TableDraggableRow

Makes a table row draggable via @dnd-kit/sortable.

Props

Name	Type	Description
children	React.ReactNode	Row cell content.
rowId	string	Unique row identifier for sortable (required).
className	string	Additional CSS classes.

TableRowDragHandle

A grip icon button cell for initiating row drags.

Props

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

TableColumnDndProvider

Core column DnD provider that wraps the table with horizontal DnD context. Handles arrayMove on column order.

Source Code ↗

import { TableColumnDndProvider, TableDraggableHeader, TableDragAlongCell } from "@/components/niko-table/filters/table-column-dnd"

<TableColumnDndProvider columnOrder={columnOrder} onColumnOrderChange={setColumnOrder}>
  {/* table content */}
</TableColumnDndProvider>

Props

Name	Type	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.
modifiers	Modifier[]	DnD modifiers (defaults to restrictToHorizontalAxis).

TableDraggableHeader

Makes a table header cell draggable for column reordering.

Props

Name	Type	Description
header	Header<TData, TValue>	TanStack Table header instance (required).
children	React.ReactNode	Header content.
className	string	Additional CSS classes.
style	CSSProperties	Additional styles merged with DnD transforms.

TableDragAlongCell

Table cell that follows its column’s drag position.

Props

Name	Type	Description
cell	Cell<TData, TValue>	TanStack Table cell instance (required).
children	React.ReactNode	Cell content.
className	string	Additional CSS classes.
style	CSSProperties	Additional styles merged with DnD transforms.