# Filter Bar

> Data table filter bar — build text, number, date and option filters as editable chips with operators, or type a prompt, hit Ask AI and watch simulated filters stream in.

## Details

- **Slug**: `filter-bar`
- **Tags**: controls, minimal

## Links

- [Registry item](https://www.uicapsule.com/r/filter-bar.json): install with `npx shadcn@latest add https://www.uicapsule.com/r/filter-bar.json`
- [Raw source JSON](https://www.uicapsule.com/api/content/filter-bar): every file, as JSON
- [Bare preview](https://www.uicapsule.com/preview-frame/filter-bar): the component with no site chrome

## Files (22)

Full contents are in the registry item linked above.

- `/_components/active-filters.tsx`
- `/_components/data-table-filter.tsx`
- `/_components/filter-actions.tsx`
- `/_components/filter-operator.tsx`
- `/_components/filter-selector.tsx`
- `/_components/filter-subject.tsx`
- `/_components/filter-value.tsx`
- `/_components/ui.tsx`
- `/_components/use-ai-filter-simulation.ts`
- `/_components/use-debounced-callback.ts`
- `/filter-bar.css`
- `/filter-package/core/columns/column-factory.ts`
- `/filter-package/core/filters.ts`
- `/filter-package/core/operators.ts`
- `/filter-package/core/types.ts`
- `/filter-package/hooks/use-data-table-filters.ts`
- `/filter-package/index.ts`
- `/filter-package/lib/helpers.ts`
- `/filters.tsx`
- `/package.json`
- `/preview.tsx`
- `/types.ts`

---

[UICapsule](https://www.uicapsule.com) · [All components](https://www.uicapsule.com/llms.txt)