Back to Components
Components
Data Table Filter
Table with column filters, filter badges, and row count display.
| Product | Category | Price | Stock |
|---|---|---|---|
| Widget Pro | Hardware | $299 | In Stock |
| Cloud Suite | Software | $149 | Available |
| Sensor Kit | Hardware | $89 | Low Stock |
| Data Sync | Software | $49 | Available |
| Power Bank | Hardware | $59 | Out of Stock |
| Analytics Pro | Software | $199 | Available |
Showing 6 of 6 rows
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/data-table-filter.tsx
Installation
Using shadcn CLI
npx shadcn add data-table-filter --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge