FilterBar

FilterBar is the turnkey filtering UI: an "Add filter" control that lets users pick a field and build a condition, the row of active FilterChips, and an advanced group editor that appears when nested groups are in play. It reads everything from the surrounding FiltersProvider, so it takes no data props of its own — only optional labels and an optional savedViews slot. Render it inside FiltersProvider.

Example

import { FiltersProvider, FilterBar, SavedViews, useFilters } from '@officina/ui';

function Toolbar() {
  const filters = useFilters({
    mode: 'client',
    fields: [{ id: 'status', label: 'Status', type: 'enum' }],
  });
  return (
    <FiltersProvider value={filters}>
      <FilterBar addLabel="Add filter" savedViews={<SavedViews urlKey="status" />} />
    </FiltersProvider>
  );
}

API