FilterBar

フィルタ一式を 1 つの値オブジェクトで扱う行。

複数のフィルタをまとめて扱う行です。値は FilterValues（{ [key]: string | string[] }）という 1 つのオブジェクトで持ち、選択中の条件をチップで表示したり、一括で消したりできます。

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

filters に定義を並べるだけで、セレクト・複数選択・チップ・クリアボタンまで組み上がります。

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

FilterOption の count を入れると、候補の右に件数が出ます。

自分で組む

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

クエリと繋ぐ

FilterValues をそのまま queryKey に入れると、条件が変わったときだけ再取得されます。

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