# Data Query Builder

Advanced filter builder with nested AND OR groups for a data table.

- id: `data-query-builder`
- Page: https://agentic-ui-kit.com/components/data-query-builder
- Live preview: https://agentic-ui-kit.com/live/component/data-query-builder?piece=data-query-builder

## Install

```bash
agentic-ui add data-query-builder
npx shadcn@4.17.0 add @agentic-ui/data-query-builder
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** nested-and-or-groups, typed-fields, text-number-date-enum, operators-by-type, json-output, tanstack-table-filters, live-match-count, copy-json, reduced-motion, dark-mode
- **Intents:** manage-collection, configure, retrieve-knowledge
- **Suits domains:** saas, analytics, crm, operations, devtools, support
- **Interaction:** select, text-input, toggle, copy
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** advanced filter builder with nested AND OR groups for a data table, query builder with typed fields text number date and enum and operators per type, filter rules UI that outputs JSON compatible with TanStack Table column filters, saved view segment editor: match all or any of the following conditions
- **Avoid when:** two or three simple filters: faceted filter chips or a filter menu are lighter, free text search: use a search field, running the query on a server: the component only builds and previews it, translate the JSON yourself
- **Preserve when adapting:** json-shape, empty-rule-dropping, one-and-list-for-column-filters
- **Replace when adapting:** fields, operators, sample-rows, max-depth
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives