Development · Web app
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.
What it's 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
- Topic
- UI Components
- 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: 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
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated