FilterBar

Toolbar for filtering a list or table: search, quick chips, a “More filters” popover, the applied filters as removable chips with “Clear all”, and the result count. It answers to its own container width, never the viewport: under 40rem the quick chips and the extra filters fold into one “Filters” button and only the search stays inline. The bar holds no filter state beyond the search text: you pass the chips and the controls, and apply the filters to your rows.

Import

import { FilterBar } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/filter-bar.

Usage

export const Default: Story = {
  render: () => <Demo />,
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await expect(canvas.getByRole("list", { name: "Filtros activos" })).toBeInTheDocument();
    await userEvent.click(canvas.getByRole("button", { name: "Quitar filtro Estado: Pendientes" }));
    await expect(canvas.queryByRole("list", { name: "Filtros activos" })).toBeNull();
  },
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
search	string		Controlled search text. Pair it with onSearchChange.
defaultSearch	string	""
onSearchChange	((search: string) => void)
searchPlaceholder	string		Placeholder of the search field. Defaults to the localized “Search”.
quickFilters	FilterBarQuickFilters		Always-visible single-choice chips (a status, a period). Under a narrow container they move into the Filters popover.
children	ReactNode		Extra filter controls; they go in the “More filters” popover.
activeFilters	readonly FilterBarChip[]	[]	One removable chip per applied filter, in the row under the bar.
onClearAll	(() => void)		Shows “Clear all” next to the chips; it should reset every filter, search included.
resultCount	number		Number of results of the current filters; announced politely when it changes.
actions	ReactNode		End slot: export, create, view switch.
labels	Partial<FilterBarLabels>

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Search Only
• Narrow

Source

packages/ui/src/containers/filter-bar/filter-bar.tsx