Data table filters for
your next project.
A powerful data table filter component inspired by Linear.Built with shadcn/ui and TanStack Table.Open source. Open code. Free to use.
Check out the demo.
Easy to use.
We've designed this component to make it as easy as possible to get started. Just add a few lines to your existing TanStack Table columns definition and you're ready to go.export const columns: ColumnDef<Issue>[] = [
/* ..other columns */
{
accessorKey: 'status',
header: 'Status',
filterFn: filterFn('option'),
meta: {
displayName: 'Status',
type: 'option',
icon: CircleDotDashedIcon,
options: issueStatuses.map((x) => ({ ...x, label: x.name })),
},
}
]Powerful.
export type Issue = {
id: string
title: string
description?: string
status: IssueStatus
assignee?: User
labels?: IssueLabel[]
startDate?: Date
endDate?: Date
estimatedHours?: number
}Data types.
- Number
- Text
- Date
- Option
- Multi Option
Operators.
Negation, target types (single or multiple), and related operators - they just work.type FilterOperatorDetailsBase<OperatorValue, T extends ColumnDataType> = {
/* The operator value. Usually the string representation of the operator. */
value: OperatorValue
/* The label for the operator, to show in the UI. */
label: string
/* How much data the operator applies to. */
target: 'single' | 'multiple'
/* The plural form of the operator, if applicable. */
singularOf?: FilterOperators[T]
/* The singular form of the operator, if applicable. */
pluralOf?: FilterOperators[T]
/* All related operators. Normally, all the operators which share the same target. */
relativeOf: FilterOperators[T] | Array<FilterOperators[T]>
/* Whether the operator is negated. */
isNegated: boolean
/* If the operator is not negated, this provides the negated equivalent. */
negation?: FilterOperators[T]
/* If the operator is negated, this provides the positive equivalent. */
negationOf?: FilterOperators[T]
}