DataGrid

"use client";

import {
  QueryClient,
  QueryClientProvider,
  queryOptions,
} from "@tanstack/react-query";
import { useEffect, useState } from "react";
import type { ReactNode } from "react";

import {
  DataGrid,
  DataGridTable,
  DataGridSearch,
  DataGridToolbar,
  DataGridPagination,
} from "@/components/ui/data-grid";
import { useDataGrid } from "@/components/ui/use-data-grid";

import { usersGrid, userColumns, listDemoUsers } from "./data-grid-demo-data";

export function DataGridExampleProvider({ children }: { children: ReactNode }) {
  // This short-lived example scope is cleared on unmount, so it needs no GC timer.
  const [client] = useState(
    () =>
      new QueryClient({
        defaultOptions: { queries: { gcTime: Infinity, retry: false } },
      })
  );
  useEffect(() => () => client.clear(), [client]);
  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
}
function Users() {
  const grid = useDataGrid({
    columns: userColumns,
    contract: usersGrid,
    getRowId: (user) => user.id,
    queryOptions: (input) =>
      queryOptions({
        queryKey: ["demo-users", input],
        queryFn: ({ signal }) => listDemoUsers(input, signal),
      }),
  });
  return (
    <DataGrid grid={grid} density="compact" className="max-w-full">
      <DataGridToolbar>
        <DataGridSearch
          grid={grid}
          field="search"
          clearable
          aria-label="Search demo users"
          placeholder="Search users"
        />
      </DataGridToolbar>
      <DataGridTable grid={grid} aria-label="Demo users" />
      <DataGridPagination />
    </DataGrid>
  );
}
export function DataGridDemo() {
  return (
    <DataGridExampleProvider>
      <Users />
    </DataGridExampleProvider>
  );
}

"use client";

import { useState } from "react";
import { z } from "zod";

import { Button } from "@/components/ui/button";
import {
  DataGrid,
  DataGridPagination,
  DataGridSearch,
  DataGridSelectionBar,
  DataGridTable,
  DataGridToolbar,
} from "@/components/ui/data-grid";
import { createDataGridColumnHelper } from "@/components/ui/data-grid-columns";
import { createDataGridContract } from "@/components/ui/data-grid-schema";
import { useDataGridSource } from "@/components/ui/use-data-grid-source";

const contract = createDataGridContract({
  filters: z.object({ search: z.string().default("") }),
  pagination: "page",
  row: z.object({ id: z.string(), name: z.string() }),
  sortBy: z.literal("name"),
});
const column = createDataGridColumnHelper(contract);
const columns = [column.accessor("name", { header: "Name", sortBy: "name" })];
const records = Array.from({ length: 60 }, (_, index) => ({
  id: String(index),
  name: `Person ${String(index + 1).padStart(2, "0")}`,
}));

/** Local deterministic source, not a transport/cache or stale-response example. */
export const DataGridSourceDemo = () => {
  const [phase, setPhase] = useState<
    "loading" | "ready" | "refreshing" | "error" | "backgroundError"
  >("loading");
  const [request, setRequest] = useState(() =>
    contract.input.parse({ filters: {} })
  );
  const matching = records.filter((row) =>
    row.name.toLowerCase().includes(request.filters.search.toLowerCase())
  );
  const [sort] = request.sorting;
  if (sort) {
    matching.sort(
      (a, b) => (sort.desc ? -1 : 1) * a.name.localeCompare(b.name)
    );
  }
  const start = request.pagination.pageIndex * request.pagination.pageSize;
  const hasData = phase !== "loading" && phase !== "error";
  const pending = phase === "loading" || phase === "refreshing";
  const grid = useDataGridSource({
    columns,
    contract,
    getRowId: (row) => row.id,
    onStateChange: { request: setRequest },
    selectionMode: "allMatching",
    source: {
      data: hasData
        ? {
            rowCount: matching.length,
            rows: matching.slice(start, start + request.pagination.pageSize),
          }
        : undefined,
      error:
        phase === "error" || phase === "backgroundError"
          ? new Error("Simulated source failure")
          : undefined,
      loading: phase === "loading",
      refetch: () => setPhase(hasData ? "refreshing" : "loading"),
      refreshing: phase === "refreshing",
    },
    state: { request },
  });
  return (
    <div className="grid w-full gap-3">
      <p className="text-sm text-muted-foreground">
        Local source only: complete or fail each request manually. Refresh keeps
        existing rows. Your application owns transport, cache and response
        ordering.
      </p>
      <div className="flex flex-wrap gap-2">
        <Button size="sm" disabled={!pending} onClick={() => setPhase("ready")}>
          Complete request
        </Button>
        <Button
          size="sm"
          variant="outline"
          disabled={pending}
          onClick={() => grid.query.refetch()}
        >
          Refresh source
        </Button>
        <Button
          size="sm"
          variant="outline"
          disabled={!pending}
          onClick={() => setPhase(hasData ? "backgroundError" : "error")}
        >
          Fail request
        </Button>
        <Button
          size="sm"
          variant="ghost"
          onClick={() => {
            grid.resetFilters();
            grid.clearSelection();
            setRequest(contract.input.parse({ filters: {} }));
            setPhase("loading");
          }}
        >
          Restart demo
        </Button>
      </div>
      <output className="text-xs text-muted-foreground" aria-live="polite">
        Source state: {phase}
      </output>
      <DataGrid grid={grid} density="compact">
        <DataGridToolbar>
          <DataGridSearch
            grid={grid}
            field="search"
            clearable
            aria-label="Search source people"
          />
        </DataGridToolbar>
        <DataGridSelectionBar />
        <DataGridTable grid={grid} aria-label="Source-owned people" />
        <DataGridPagination pageSizes={[25]} />
      </DataGrid>
    </div>
  );
};

"use client";

import { queryOptions } from "@tanstack/react-query";

import {
  DataGrid,
  DataGridPagination,
  DataGridSearch,
  DataGridTable,
  DataGridToolbar,
} from "@/components/ui/data-grid";
import { createDataGridColumnHelper } from "@/components/ui/data-grid-columns";
import { useDataGrid } from "@/components/ui/use-data-grid";

import { DataGridExampleProvider } from "./data-grid-demo";
import { cursorUsersGrid, listCursorDemoUsers } from "./data-grid-demo-data";

const column = createDataGridColumnHelper(cursorUsersGrid);
const columns = [
  column.accessor("name", { header: "Name", sortBy: "name" }),
  column.accessor("email", { header: "Email" }),
];
function Users() {
  const grid = useDataGrid({
    columns,
    contract: cursorUsersGrid,
    getRowId: (row) => row.id,
    queryOptions: (input) =>
      queryOptions({
        queryKey: ["cursor-demo", input],
        queryFn: ({ signal }) => listCursorDemoUsers(input, signal),
      }),
  });
  return (
    <DataGrid grid={grid}>
      <DataGridToolbar>
        <DataGridSearch
          grid={grid}
          field="search"
          aria-label="Search cursor results"
        />
      </DataGridToolbar>
      <DataGridTable grid={grid} aria-label="Cursor users" />
      <DataGridPagination />
    </DataGrid>
  );
}
export function DataGridCursorDemo() {
  return (
    <DataGridExampleProvider>
      <Users />
    </DataGridExampleProvider>
  );
}

"use client";

import { queryOptions } from "@tanstack/react-query";
import { format, parseISO } from "date-fns";

import {
  DataGrid,
  DataGridApplyFilters,
  DataGridFilter,
  DataGridPagination,
  DataGridResetFilters,
  DataGridSearch,
  DataGridTable,
  DataGridToolbar,
} from "@/components/ui/data-grid";
import { DateRangePicker } from "@/components/ui/date-range-picker";
import { Select } from "@/components/ui/select";
import { useDataGrid } from "@/components/ui/use-data-grid";

import { DataGridExampleProvider } from "./data-grid-demo";
import { usersGrid, userColumns, listDemoUsers } from "./data-grid-demo-data";

function Users() {
  const grid = useDataGrid({
    columns: userColumns,
    contract: usersGrid,
    filterMode: "apply",
    getRowId: (row) => row.id,
    queryOptions: (input) =>
      queryOptions({
        queryKey: ["filter-demo", input],
        queryFn: ({ signal }) => listDemoUsers(input, signal),
      }),
  });
  return (
    <DataGrid grid={grid}>
      <DataGridToolbar>
        <DataGridSearch
          grid={grid}
          field="search"
          aria-label="Search users"
          clearable
        />
        <DataGridFilter grid={grid} field="status">
          {({ value, onChange, error }) => (
            <Select
              aria-label="User status"
              aria-invalid={Boolean(error)}
              value={value}
              data={[
                { label: "All users", value: "all" },
                { label: "Active", value: "active" },
                { label: "Inactive", value: "inactive" },
              ]}
              onValueChange={(value) => {
                if (value) {
                  onChange(value);
                }
              }}
            />
          )}
        </DataGridFilter>
        <DataGridFilter grid={grid} field="dates">
          {({ value, onChange }) => (
            <DateRangePicker
              label="Joined dates"
              clearable
              value={
                value
                  ? { from: parseISO(value.from), to: parseISO(value.to) }
                  : undefined
              }
              onValueChange={(range) =>
                onChange(
                  range?.from && range.to
                    ? {
                        from: format(range.from, "yyyy-MM-dd"),
                        to: format(range.to, "yyyy-MM-dd"),
                      }
                    : null
                )
              }
            />
          )}
        </DataGridFilter>
        <DataGridApplyFilters />
        <DataGridResetFilters />
      </DataGridToolbar>
      <p className="text-xs text-muted-foreground">
        Calendar Apply changes this draft. Apply filters sends the complete
        group. Dates are local calendar dates, not UTC timestamps.
      </p>
      <DataGridTable grid={grid} aria-label="Filtered users" />
      <DataGridPagination />
    </DataGrid>
  );
}
export function DataGridFiltersDemo() {
  return (
    <DataGridExampleProvider>
      <Users />
    </DataGridExampleProvider>
  );
}

"use client";

import { queryOptions } from "@tanstack/react-query";

import {
  DataGrid,
  DataGridPagination,
  DataGridSearch,
  DataGridSelectionBar,
  DataGridTable,
  DataGridToolbar,
} from "@/components/ui/data-grid";
import { useDataGrid } from "@/components/ui/use-data-grid";

import { DataGridExampleProvider } from "./data-grid-demo";
import { usersGrid, userColumns, listDemoUsers } from "./data-grid-demo-data";

function Users() {
  const grid = useDataGrid({
    columns: userColumns,
    contract: usersGrid,
    getRowId: (row) => row.id,
    queryOptions: (input) =>
      queryOptions({
        queryKey: ["selection-demo", input],
        queryFn: ({ signal }) => listDemoUsers(input, signal),
      }),
    selectionMode: "allMatching",
  });
  return (
    <DataGrid grid={grid}>
      <DataGridToolbar>
        <DataGridSearch
          grid={grid}
          field="search"
          aria-label="Search selected users"
        />
      </DataGridToolbar>
      <DataGridSelectionBar />
      <DataGridTable grid={grid} aria-label="Selectable users" />
      <DataGridPagination />
      <pre
        className="max-h-40 overflow-auto text-xs"
        aria-label="Selection descriptor"
      >
        {JSON.stringify(grid.selection, null, 2)}
      </pre>
      <p className="text-xs text-muted-foreground">
        All matching means matching at execution time. The backend still
        validates authorization and exclusions.
      </p>
    </DataGrid>
  );
}
export function DataGridSelectionDemo() {
  return (
    <DataGridExampleProvider>
      <Users />
    </DataGridExampleProvider>
  );
}

"use client";

import { queryOptions } from "@tanstack/react-query";
import { useState } from "react";

import {
  DataGrid,
  DataGridColumnVisibility,
  DataGridPagination,
  DataGridSearch,
  DataGridTable,
  DataGridToolbar,
} from "@/components/ui/data-grid";
import { useDataGrid } from "@/components/ui/use-data-grid";

import { DataGridExampleProvider } from "./data-grid-demo";
import { usersGrid, userColumns, listDemoUsers } from "./data-grid-demo-data";

function Users() {
  const [request, setRequest] = useState(() =>
    usersGrid.input.parse({ filters: {} })
  );
  const [columnVisibility, setColumnVisibility] = useState<
    Record<string, boolean>
  >({});
  const [columnOrder, setColumnOrder] = useState(["name", "visits", "joined"]);
  const grid = useDataGrid({
    columns: userColumns,
    contract: usersGrid,
    getRowId: (row) => row.id,
    onStateChange: {
      columnOrder: setColumnOrder,
      columnVisibility: setColumnVisibility,
      request: setRequest,
    },
    queryOptions: (input) =>
      queryOptions({
        queryKey: ["controlled-demo", input],
        queryFn: ({ signal }) => listDemoUsers(input, signal),
      }),
    state: { columnOrder, columnVisibility, request },
  });
  return (
    <DataGrid grid={grid}>
      <DataGridToolbar>
        <DataGridSearch
          grid={grid}
          field="search"
          aria-label="Search controlled users"
        />
        <DataGridColumnVisibility />
      </DataGridToolbar>
      <DataGridTable grid={grid} aria-label="Controlled users" />
      <DataGridPagination />
      <pre
        className="max-h-36 overflow-auto text-xs"
        aria-label="Applied request"
      >
        {JSON.stringify(request, null, 2)}
      </pre>
    </DataGrid>
  );
}
export function DataGridControlledDemo() {
  return (
    <DataGridExampleProvider>
      <Users />
    </DataGridExampleProvider>
  );
}

"use client";

import { queryOptions } from "@tanstack/react-query";

import {
  DataGrid,
  DataGridCell,
  DataGridColumnVisibility,
  DataGridPagination,
  DataGridRow,
  DataGridTable,
  DataGridToolbar,
  DataGridViewport,
} from "@/components/ui/data-grid";
import { useDataGrid } from "@/components/ui/use-data-grid";

import { DataGridExampleProvider } from "./data-grid-demo";
import { usersGrid, userColumn, listDemoUsers } from "./data-grid-demo-data";

const columns = [
  userColumn.accessor("name", { header: "Name", sortBy: "name" }),
  userColumn.accessor((row) => row.visits * 2, {
    cell: ({ value }) => value.toFixed(0),
    header: "Score",
    id: "score",
  }),
  userColumn.display({
    cell: ({ row }) => (
      <a href={`mailto:${row.email}`} className="underline underline-offset-4">
        Email {row.name}
      </a>
    ),
    enableHiding: false,
    header: "Actions",
    id: "actions",
  }),
];
function Users() {
  const grid = useDataGrid({
    columns,
    contract: usersGrid,
    getRowId: (row) => row.id,
    queryOptions: (input) =>
      queryOptions({
        queryKey: ["rendering-demo", input],
        queryFn: ({ signal }) => listDemoUsers(input, signal),
      }),
  });
  return (
    <DataGrid grid={grid} variant="striped" density="compact">
      <DataGridToolbar>
        <DataGridColumnVisibility />
      </DataGridToolbar>
      <DataGridViewport className="max-h-80">
        <DataGridTable
          grid={grid}
          stickyHeader
          aria-label="Custom rendered users"
          renderRow={(context) => (
            <DataGridRow {...context.props} data-user={context.row.id} />
          )}
          renderCell={(context) => (
            <DataGridCell
              {...context.props}
              className={
                context.native.column.id === "score"
                  ? "tabular-nums"
                  : undefined
              }
            />
          )}
        />
      </DataGridViewport>
      <DataGridPagination />
    </DataGrid>
  );
}
export function DataGridRenderingDemo() {
  return (
    <DataGridExampleProvider>
      <Users />
    </DataGridExampleProvider>
  );
}