Docs

"use client";

import { useState } from "react";

import { FilterBar } from "@/components/filter-bar/filter-bar";
import type { FilterDefinition, SortState } from "@/components/filter-bar/types";
import { useFilterUrlState } from "@/components/filter-bar/url-state";
import { useFilters } from "@/components/filter-bar/use-filters";

const definitions: FilterDefinition[] = [
  { id: "createdAt", label: "Created Date", type: "dateRange", tier: "quick" },
  {
    id: "status",
    label: "Status",
    type: "multiSelect",
    tier: "quick",
    options: [
      { value: "open", label: "Open" },
      { value: "closed", label: "Closed" },
    ],
  },
  { id: "batchId", label: "Batch ID", type: "text", tier: "more" },
];

export function Documents() {
  const url = useFilterUrlState(definitions); // optional: keep filters in the URL
  const filters = useFilters({ definitions, ...url });
  const [sort, setSort] = useState<SortState>();

  // filters.applied is what to filter by: send it to your API, or see the TanStack adapter.
  return (
    <FilterBar
      filters={filters}
      title={<h1>Documents</h1>}
      sort={sort}
      onSortChange={setSort}
    />
  );
}

?status=open,closed&createdAt=last7d
?createdAt=2026-04-18_2026-04-24

import {
  dateRangeFn, multiSelectFn, singleSelectFn, textFn, toColumnFilters,
} from "@/components/filter-bar-tanstack/adapter";

// Give each column the same id as its filter, and the matching filter function.
const columns = [
  { id: "status", accessorKey: "status", filterFn: multiSelectFn },
  { id: "createdAt", accessorKey: "createdAt", filterFn: dateRangeFn },
  { id: "batchId", accessorKey: "batchId", filterFn: textFn },
];

const columnFilters = useMemo(
  () => toColumnFilters(filters.applied, definitions),
  [filters.applied],
);

const table = useReactTable({
  data,
  columns,
  state: { columnFilters },
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
});

:root {
  --fb-chip-height: 1.75rem;
  --fb-chip-radius: var(--radius-sm);
  --fb-chip-gap: 0.375rem;
  --fb-chip-border-style: dashed;          /* unset chips: dashed | solid */
  --fb-chip-unset-border-color: var(--border);  /* transparent for a "ghost" chip */
  --fb-chip-min-width: 3.75rem;
  --fb-chip-max-width: 25rem;              /* longer values end in an ellipsis */
  --fb-chip-font-size: 0.8125rem;
  --fb-popover-width: 18rem;
  --fb-density: 1;                         /* 0.875 compact · 1 · 1.125 comfortable */
  --fb-accent: var(--primary);             /* values, Apply, checkmarks, focus borders */
  --fb-accent-foreground: var(--primary-foreground);
}