A powerful data table filter component. Library-agnostic. Supports client and server-side filtering.
Client-side Filtering
Enables dynamic filtering of data on the client side for fast and responsive user experience.
Customizable Column Types
Supports various data types, allowing users to filter text, numbers, dates, and options easily.
Clean and Modern UI
Inspired by Linear, providing a user-friendly interface for efficient data management.
Integration with TanStack Table
Utilizes a headless UI framework for powerful table and data grid capabilities.
The Data Table Filter is an add-on designed to enhance the existing shadcn/ui data table component by providing client-side filtering features. It simplifies the process of managing and filtering data, allowing users to easily refine their data sets based on various criteria. The component relies on TanStack Table, a robust framework that facilitates the creation of advanced tables and data grids, ensuring a seamless user experience.
The Data Table Filter allows for the definition of column metadata, including display names, icons, and data types. It supports filtering through various data formats including text, numbers, and date ranges. Developers can also implement their own filtering logic and customize the filtering options displayed to the user.
Managing project tasks and statuses in software development.
Filtering customer data for better analytics and reporting.
Sorting and searching through inventory lists in e-commerce applications.
You can install the component using package managers like pnpm, npm, or yarn with the command: pnpm dlx shadcn@latest add https://ui.bazza.dev/r/data-table-filter.json.
Yes, you can define static options for columns and also use a transformation function to generate options dynamically based on the column data.
The Data Table Filter is designed to work with the TanStack Table and can be integrated with various frontend frameworks that support React.
