Development · Web app

bazza/ui Data Table Filter

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

Visit ui.bazza.dev ↗

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, 31 March 2025: 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

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated