FilterBuilder

An interactive query-condition builder (field + operator + value rows, joined by AND/OR) for search and data-table filtering UIs. Pure composition of Select/Input/Button — no new dependency, since this is fundamentally a data-shape problem, not an interaction-mechanics one like Kanban's drag-and-drop.

function Demo() {
const [logic, setLogic] = useState("AND");
const [conditions, setConditions] = useState([
  { id: "1", field: "status", operator: "eq", value: "Active" },
]);
return (
  <FilterBuilder
    fields={[
      { value: "name", label: "Name" },
      { value: "status", label: "Status" },
      { value: "role", label: "Role" },
    ]}
    conditions={conditions}
    onConditionsChange={setConditions}
    logic={logic}
    onLogicChange={setLogic}
  />
);
}
render(<Demo />);

Deliberately scoped to a flat condition list joined by one shared AND/OR operator, not arbitrarily nested groups — covers the large majority of real filter UIs without the complexity of a full recursive expression tree.

Installation

import { FilterBuilder } from "@labanaat/ui/filter-builder";

Props