# bazza/ui Data Table Filter

> Linear-style data table filtering component for React, shadcn/ui, and TanStack Table

An open-source UI component and React hook for adding faceted filtering to data tables, inspired by Linear's interface. It supports text, numbers, dates, and single or multi-select options across both client-side and server-side filtering workflows. It integrates with shadcn/ui, TanStack Table, and nuqs.

Website: https://ui.bazza.dev/docs/data-table-filter

## What it is for

- Add interactive multi-attribute filtering to TanStack Table data grids
- Implement URL-synced search and filtering parameters in Next.js applications
- Filter large datasets server-side using faceted options and numeric range sliders

## Features

- Type-safe column configuration builder with a fluent API
- Linear-inspired interactive filter dropdown and operator menus
- Support for multiple data types: text, number, date, option, and multi-option
- Dual filtering strategies for client-side local data or server-side queries
- Controlled and uncontrolled filter state management via useDataTableFilters hook
- Installable directly via shadcn CLI registry
- Faceted value counting and numeric range slider support

## Pricing

Open source. Free and open source

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Code library
- For: React and Next.js frontend developers building data tables
- Tags: react, shadcn ui, tanstack table, filters, ui component, typescript

## Why it was saved

- [@kianbazza, 31 March 2025](https://x.com/kianbazza/status/1906824475506565180): Install with one command into a project: pnpm dlx shadcn@latest add https://ui.bazza.dev/r/filters. Powerful operators for labels, range sliders for numbers, calendar date pickers.

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/bazza-ui-data-table-filter

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.