fma-ds

Filter Toolbar

The controls above a list or DataGrid, composed from parts that are each controlled (value/onChange), so every filter maps to a search param.

originalMITexperimentalChangelogRegistry JSON

Overview

  • `FilterToolbar`: lays the parts out, wrapping on narrow screens; its i18n.labels reaches every part.
  • `FilterSearch`: a react-aria SearchField that commits the term on Enter and when cleared — and, with debounceMs, after the user stops typing.
  • `FilterQuickToggles`: an outlined ToggleGroup for one-press filters.
  • `FilterToolbarActions`: holds the trailing actions, FilterSheet and FilterRefresh.
  • `FilterSheet`: a "Filters" button with the active count, opening a side Sheet. Its children are the Fields of a draft the app keeps: onApply commits it (return false to stay open), onClear empties it, and Enter applies.
  • `FilterRefresh`: spins while isPending.
  • `FilterChips`: the applied filters as a react-aria TagGroup, each removable with its × or Backspace/Delete, plus "Clear filters". Renders nothing when empty.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/filter-toolbar

    Files land in components/fma-ds/filter-toolbar/filter-toolbar.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0lucide-react@^1.61.0react-aria-components@^1.22.1