Filters

Overview

The Filters pattern composes three jobs into a single rail above the Table — text search, structured filters, and column visibility. Every input on the rail narrows the rows below; flipping a column toggles whether it's in the table at all. Applied filters surface back as removable chips so the user can unwind any single decision without re-opening the picker that set it.

Anatomy

A 48 px-tall row with four slot types. Search anchors the left; dropdowns and date steppers fill the middle; the columns icon sits on the right.

Desktop

The rail spans the Table width. The search field anchors left; the columns toggle sits flush right via margin-left: auto. The middle slots fan out left-to-right in priority order — the filter the user reaches for most often sits closest to the search.

Mobile

Below 600 px the rail collapses. Search fills the row; a single filter glyph carries a green-tone applied-count badge; a more_vert overflow houses the columns menu. Tapping the filter glyph opens a bottom-sheet drawer with the full filter list.

Column visibility

Hide a column when the user doesn't need it on this surface today — never as a permanent escape hatch for over-broad tables. The columns menu lists every column; toggling a column off line-throughs its label. Drag handles let the user reorder before they hide.

Applied filters

Every applied filter surfaces as a removable Chip below the rail. The user removes a single filter by clicking its X; a Clear all link sits flush right of the chip group when more than one is applied.

Behavior

• 01Desktop applies live. Each change to the rail updates the Table on the next tick — no Apply button. The user reads the table's row count line as the canonical confirmation.
• 02Mobile applies on commit. The drawer holds a draft — every tap inside the drawer modifies the draft, never the live state. Apply commits the draft; Clear empties it. Closing the drawer without Apply discards the draft.
• 03Mirror to the URL. Active filters belong in the query string (?status=Captured&method=Visa) so the page is shareable. Pasting the URL re-applies the filters on load.
• 04Search is debounced. 200 ms after the last keystroke is enough — under that the user feels keystrokes lag, over that the table feels unresponsive.
• 05Hidden columns persist per user. The columns choice is a preference, not a query — store it against the user, not the URL. The URL captures what the user is looking at; the preference captures how they look at it.
• 06Empty results stay informative. When the rail filters every row out, render a Table empty state that explains whichfilter is excluding — don't leave the user staring at “No results” and a search field they can't see.

Accessibility

• Roles: the rail is a plain <div>wrapping native controls — a <input type="search"> for search, native <button> triggers for the dropdowns. Each dropdown menu uses role="menu" + role="menuitem".
• Drawer: the bottom sheet is a role="dialog" with aria-modal="true". Focus traps inside; Escape dismisses; scrolling the page underneath is locked. The drag-handle indicator is decorative — aria-hidden.
• Live region:the Table's row count line is wrapped in aria-live="polite" so changes from the rail are announced — “5 of 124 rows” — without stealing focus.
• Keyboard: / focuses search from anywhere on the route; Tab walks the rail in DOM order; arrow keys navigate inside an open dropdown. Backspace on a focused applied-filter chip removes it.
• Touch targets:every control is 48 px tall on desktop; the mobile filter glyph and the more_vert overflow are 48 × 48 px. The applied-count badge on mobile is decorative — the button's aria-label includes the applied count so it announces as “Open filters, 3 applied”.

Code

The pattern composes three primitives — a FilterBar for the rail, a FilterDrawer for the mobile bottom sheet, and a ColumnsMenu popover. State is owned by the page; the components emit changes.

import {
  FilterBar,
  FilterDrawer,
  MobileFilterBar,
  ColumnsMenu,
  Table,
} from "@flatpay-dk/ui";
import { useMediaQuery } from "@flatpay-dk/ui/hooks";

const FILTERS = [
  { id: "status", label: "Status", options: ["Captured", "Refunded", "Disputed"] },
  { id: "method", label: "Method", options: ["Visa", "Mastercard"] },
];

const ALL_COLUMNS = [
  { id: "id", label: "Reference" },
  { id: "customer", label: "Customer" },
  { id: "amount", label: "Amount" },
  { id: "status", label: "Status" },
  { id: "method", label: "Method" },
  { id: "date", label: "Date" },
];

const isMobile = useMediaQuery("(max-width: 600px)");

const [search, setSearch] = useState("");
const [values, setValues] = useState<Record<string, string | undefined>>({});
const [hidden, setHidden] = useState(new Set<string>());
const [drawerOpen, setDrawerOpen] = useState(false);
const [columnsOpen, setColumnsOpen] = useState(false);

const appliedCount = Object.values(values).filter(Boolean).length;

return (
  <>
    {isMobile ? (
      <>
        <MobileFilterBar
          search={search}
          onSearchChange={setSearch}
          appliedCount={appliedCount}
          onOpenFilters={() => setDrawerOpen(true)}
        />
        <FilterDrawer
          open={drawerOpen}
          onClose={() => setDrawerOpen(false)}
          filters={FILTERS}
          values={values}
          onApply={setValues}
        />
      </>
    ) : (
      <FilterBar
        search={search}
        onSearchChange={setSearch}
        filters={FILTERS}
        values={values}
        onValueChange={(id, v) => setValues((prev) => ({ ...prev, [id]: v }))}
        onColumns={() => setColumnsOpen((o) => !o)}
      />
    )}

    <Table
      rows={filteredRows}
      columns={ALL_COLUMNS.filter((c) => !hidden.has(c.id))}
    />
  </>
);

Best practices

Props

FilterBar

MobileFilterBar

FilterDrawer

ColumnsMenu

Related