FilterBar

A row of filters driven by one value object.

A row that treats several filters as one thing. The value is a single FilterValues object ({ [key]: string | string[] }), and the bar can show the active choices as chips and clear them all at once.

export const client = "only";

import { useState } from "react";
import { FilterBarPreset } from "@squadbase/vantage/components";
import type { FilterConfig, FilterValues } from "@squadbase/vantage/components";

const filters: FilterConfig[] = [
  {
    key: "region",
    label: "地域",
    type: "select",
    options: [
      { label: "関東", value: "kanto" },
      { label: "関西", value: "kansai" },
      { label: "九州", value: "kyushu" },
    ],
  },
  {
    key: "status",
    label: "状態",
    type: "multiselect",
    options: [
      { label: "有効", value: "active", count: 42 },
      { label: "保留", value: "pending", count: 8 },
      { label: "停止", value: "inactive", count: 3 },
    ],
  },
];

export default function Example() {
  const [values, setValues] = useState<FilterValues>({ region: "kanto" });
  return (
    <div className="w-[38rem]">
      <FilterBarPreset
        filters={filters}
        value={values}
        onChange={setValues}
        onClear={() => setValues({})}
      />
    </div>
  );
}

import {
  FilterBar,
  FilterBarSelect,
  FilterBarMultiSelect,
  FilterBarActiveChips,
  FilterBarClearButton,
  FilterBarPreset,
} from "@squadbase/vantage/components";
import type { FilterConfig, FilterValues, FilterOption } from "@squadbase/vantage/components";

FilterBarPreset

List the definitions in filters and you get the selects, the multi-selects, the chips and the clear button.

interface FilterConfig {
  key: string;
  label: string;
  type: "select" | "multiselect" | "date" | "daterange" | "search";
  options?: FilterOption[]; // { label, value, count?, disabled? }
  placeholder?: string;
  defaultValue?: string | string[];
}

Give a FilterOption a count and the number shows beside the option.

Composing it yourself

<FilterBar value={values} onChange={setValues} onClear={() => setValues({})}>
  <FilterBarSelect filterKey="region" label="Region" options={regions} />
  <FilterBarMultiSelect filterKey="status" label="Status" options={statuses} />
  <FilterBarClearButton />
  <FilterBarActiveChips filters={filters} />
</FilterBar>

Wiring it to a query

Drop FilterValues straight into the queryKey and the data refetches only when the filters change.

const { data } = useQuery({
  queryKey: ["sales", values],
  queryFn: () => apiFetch(`/api/sales?${new URLSearchParams(values as never)}`).then((r) => r.json()),
});