FilterRow

Pill tabs at the start and filters at the end, between a page's header and its list. Grows with its content and wraps on a narrow screen.

View source

Members

Ada Okaforada@northwind.exampleOwner

Lin Parklin@northwind.exampleAdmin

Tomás Ruiztomas@northwind.exampleDeveloper

Mira Satomira@northwind.exampleDeveloper

Jon Weberjon@northwind.exampleViewer

function Settings() {
  const [state, setState] = useState("all");
  const [preset, setPreset] = useState("all");
  const items: ListItemData[] = members
    .filter((m) => preset === "all" || m.preset === preset)
    .filter(() => state !== "suspended")
    .map((m) => ({ id: m.id, title: m.name, subtitle: m.email, meta: <Badge>{m.preset}</Badge> }));
  return (
    <Column>
      <FilterRow tabs={stateTabs(state, setState)}>
        <Select aria-label="Preset" size="sm" value={preset} onValueChange={(v) => setPreset(String(v))} options={presetOptions} />
      </FilterRow>
      <List
        aria-label="Members"
        items={items}
        empty={<Empty size="md" title="No suspended members" description="Suspended members can't sign in. Everyone in Northwind Labs is active." />}
      />
    </Column>
  );
}

import { FilterRow } from "@logicplanes/kaeso-ui";

Props

children
ReactNode
Filters at the end of the row: a Select, a SearchInput. At the start when there are no tabs.
filtersLabel
string
The name of the filters' toolbar. Defaults to "Filters" in the provider's language.
size
"md" | "inset"
By default inset in a settings column and md elsewhere.
tabs
ReactNode
Pill tabs at the start of the row (PillTabs). In a settings column their first label lines up with the title.