Filter baradmin

Query input, facet filters, applied-filter pills, reset and saved views over a plain-object filter value, with allow-list URL serializers.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/filter-bar

의존 아이템button faceted-filter input locale popover style

Default

As of 09:30

Status: Pending

filter-bar-demo.tsx

"use client";
import * as React from "react";import { FilterBar, type FilterBarFacet, type FilterBarView, type FilterValue } from "@/components/ui/filter-bar";
const facets: readonly FilterBarFacet[] = [  {    key: "status",    title: "Status",    options: [      { value: "confirmed", label: "Confirmed", count: 128 },      { value: "pending", label: "Pending", count: 14 },      { value: "cancelled", label: "Cancelled", count: 9 },    ],  },  {    key: "channel",    title: "Channel",    options: [      { value: "direct", label: "Direct" },      { value: "ota", label: "OTA" },    ],  },];
export default function FilterBarDemo() {  const [value, setValue] = React.useState<FilterValue>({ status: ["pending"] });  const [views, setViews] = React.useState<readonly FilterBarView[]>([{ id: "v1", name: "Needs attention", value: { status: ["pending"] } }]);
  return (    <FilterBar      facets={facets}      value={value}      onValueChange={setValue}      views={views}      onSaveView={(name, current) => setViews((list) => [...list, { id: `v${list.length + 1}`, name, value: current }])}      onRenameView={(id, name) => setViews((list) => list.map((view) => (view.id === id ? { ...view, name } : view)))}      onDeleteView={(id) => setViews((list) => list.filter((view) => view.id !== id))}      asOf="As of 09:30"    />  );}