Skip to content
EspañolEnglish
All components (244)

Filter bar

Management · SmartFilterBar

What it is and when to use it

The filter bar of a listing: free search, one-click quick filters, a panel with the query builder for what does not fit in a click, the button to clear it all and the place for saved views.

When to use it

  • Above a table or a list of records.
  • fields are the fields (with their type); the free search looks at the text ones. quickFilters are the one-click filters, each with the query it applies.
  • Everything adds up: a record has to meet the text, the quick filters switched on and the query. To apply it on the client, smartFilter(records, value, fields, quickFilters, read); on the server the same value is walked.
  • It is controlled (value, onChange), so the value can go to the page address or to a saved view. views receives a SavedViewsManager.

When not to

  • A single search box: SearchField.
  • Filtering inside a Table: it already brings its per-column and advanced filters.

Keyboard: the search, the quick filters (buttons that are pressed), the more-filters button and the clear button are normal controls; the advanced panel is a Drawer.

Accessibility: the bar is a named search region; each quick filter says whether it is on (aria-pressed) and the result count is announced.

Fine appearance: everything in a row that wraps when it does not fit; the views go to the end.

What it looks like

  • Lucía Ferrer · pagado · 189 €
  • Marta Ruiz · pending · 42 €
  • Carla Gil · pagado · 95 €
  • Paco Soler · enviado · 310 €
  • Lucía Ferrer · enviado · 64 €

<SmartFilterBar
  label="Filter orders"
  fields={campos}
  quickFilters={filtrosRapidos}
  value={filtro}
  onChange={setFiltro}
  resultCount={visibles.length}
/>

Props

Import it with import { SmartFilterBar } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
fieldsrequiredreadonly QueryField[]The fields searched and filtered by; the text ones are those the free search looks at.
labelrequiredstringWhat is being filtered («Filter invoices»). Required.
onChangerequired(value: SmartFilterValue) => void—
valuerequiredSmartFilterValue—
classNamestringMerged with the library classes; it does not replace them.
quickFiltersreadonly QuickFilter[]One-click filters: each applies its query while it is on.
resultCountnumberHow many records are left with the filter: it is said next to the bar.
viewsReactNodeWhat goes at the end of the bar, usually a `SavedViewsManager`.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: