Data Table Filter

Select and date-range filter controls for TanStack data-table columns.

Installation

bash

pnpm dlx shadcn@latest add @cs/data-table-filter

Usage

tsx

import { DataTableFilter } from "@/components/cs/data-table-filter"

tsx

<DataTableFilter disabled={false} data={{ type: "select", column: "status", options: [{ id: "active", name: "Active" }] }} />

API Reference

DataTableFilterOption

An available value in a select data-table filter.

tsx

type DataTableFilterOption = {
	/** Value persisted in the column filter state. */
	id: string | number
	/** Display label. When omitted, the label is read from the translation namespace. */
	name?: string
	/** Optional icon shown before the label in the options menu. */
	icon?: React.ComponentType<{ className?: string }>
}

DataTableToolbarFilter

Configuration for a select or date-range data-table toolbar filter.

tsx

type DataTableToolbarFilter = | {
			/** Renders a multi-select filter. */
			type: "select"
			/** Key of the data column to filter. */
			column: Extract<keyof TData, string>
			/** Static filter options. */
			options?: DataTableFilterOption[]
			/** Asynchronous source of filter options. */
			fetchOptions?: SelectFetchOptions
	  }
	| {
			/** Renders a date-range filter. */
			type: "dateRange"
			/** Key of the data column to filter. */
			column: Extract<keyof TData, string>
	  }

DataTableFilter

Renders a select or date-range filter for a TanStack data-table column.

Props

Name	Type	Default	Description
column	FilterableColumn	-	TanStack Table column whose filter value is controlled by the component.
data *	DataTableToolbarFilter<TData>	-	Select or date-range filter configuration.
disabled *	boolean	-	Disables the filter trigger and its interactive menu controls.
title	string	-	Label shown on the filter trigger and used as the select-search placeholder.
translationsRootKey	string	-	Namespace for filter messages. Select filters use `noResults`, `selectedFilter`, and `clearFilter`, plus `options.<column>.<option>` for option search and `options.<column>.<option>` for option labels when an option has no `name`. Date-range filters use `dateRange.<option>` and `dateRange.from`, `dateRange.to`, `dateRange.isActive`, `dateRange.isntActive`, `dateRange.cancel`, and `dateRange.select`.

Dependencies

@base-ui/react @tanstack/react-table cn date-fns lucide-react next-intl use-debounce @cs/date-utils @cs/use-select-options @shadcn/badge @shadcn/button @shadcn/command @shadcn/input @shadcn/label @shadcn/popover @shadcn/radio-group @shadcn/separator