Data Table

"use client";

import { useMemo } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { DataTableBody } from "@/components/f-ui/data-table/data-table-parts/data-table-body";
import { DataTablePagination } from "@/components/f-ui/data-table/data-table-parts/data-table-pagination";
import { DataTableRoot } from "@/components/f-ui/data-table/data-table-parts/data-table-root";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import { useDataTable } from "@/components/f-ui/data-table/use-data-table";
import { type Order, SEED_ORDERS, STATUS_VARIANTS } from "./demo-data";

const TABLE_CODE = "docs-dt-bespoke-regions";

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

function DataTableBespokeRegionsDemoInner() {
  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 110,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 140,
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 100,
          },
          amount: {
            kind: "currency",
            label: "Amount",
            sortKey: "amount",
            currency: "USD",
            size: 100,
          },
        },
        {},
      ),
    [],
  );

  const dt = useDataTable<Order>({
    schema,
    data: SEED_ORDERS,
    tableCode: TABLE_CODE,
    getRowId: (r) => r.id,
    defaultPageSize: 8,
    features: {},
  });

  return (
    <div className="space-y-2">
      <p className="text-muted-foreground text-xs">
        Compose named regions instead of the recipe. Swap{" "}
        <code className="text-foreground">DataTablePagination</code> for{" "}
        <code className="text-foreground">DataTableLoadMore</code> (cursor) or
        add <code className="text-foreground">DataTableViewTabs</code> above the
        body for preset tabs.
      </p>
      <div className="h-[min(400px,55vh)] min-h-[260px] overflow-hidden rounded-md border">
        <DataTableRoot dataTable={dt} fillHeight className="min-h-0">
          {/* <DataTableViewTabs /> — preset filter tabs (surface B) */}
          <DataTableBody />
          <DataTablePagination />
          {/* <DataTableLoadMore /> — cursor "load more" footer */}
        </DataTableRoot>
      </div>
    </div>
  );
}

/** Compose named regions instead of the `<DataTable>` recipe. */
export function DataTableBespokeRegionsDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <DataTableBespokeRegionsDemoInner />
    </QueryClientProvider>
  );
}

"use client";

import { useMemo } from "react";

import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import { type Order, SEED_ORDERS, STATUS_VARIANTS } from "./demo-data";

const TABLE_CODE = "docs-dt-minimal-static";

/** Smallest recipe: static rows, no filter chrome, no pagination footer. */
export function DataTableMinimalStaticDemo() {
  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 110,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 140,
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 100,
          },
          amount: {
            kind: "currency",
            label: "Amount",
            sortKey: "amount",
            currency: "USD",
            size: 100,
          },
        },
        {},
      ),
    [],
  );

  const rows = useMemo(() => SEED_ORDERS.slice(0, 6), []);

  return (
    <div className="h-[min(280px,42vh)] min-h-[200px] overflow-hidden rounded-md border">
      <DataTable<Order>
        fillHeight
        className="min-h-0"
        schema={schema}
        data={rows}
        tableCode={TABLE_CODE}
        getRowId={(r) => r.id}
        filtering="none"
        disablePagination
        features={{}}
      />
    </div>
  );
}

"use client";

import { useMemo } from "react";

import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import {
  type Order,
  SEED_ORDERS,
  STATUS_VARIANTS,
} from "@/demos/data-table/demo-data";

const TABLE_CODE = "docs-dt-embedded";

/**
 * In-memory static slice: `data={rows}` + optional `disablePagination` to hide
 * the footer. No URL sync in this example.
 */
export function DataTableEmbeddedDemo() {
  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 110,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 140,
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 100,
          },
          amount: {
            kind: "currency",
            label: "Amount",
            sortKey: "amount",
            currency: "USD",
            size: 100,
          },
        },
        {},
      ),
    [],
  );

  const rows = useMemo(() => SEED_ORDERS.slice(0, 8), []);

  return (
    <div className="space-y-2">
      <p className="text-muted-foreground text-xs">
        Static rows via the <code>data</code> prop and no URL sync. For
        server paging, pass an <code>adapter</code> and add{" "}
        <code>useTableSearchParams</code>.
      </p>
      <div className="h-[min(320px,50vh)] min-h-[220px] overflow-hidden rounded-md border">
        <DataTable<Order>
          fillHeight
          className="min-h-0"
          schema={schema}
          data={rows}
          tableCode={TABLE_CODE}
          getRowId={(r) => r.id}
          filtering="none"
          disablePagination
        />
      </div>
    </div>
  );
}

"use client";

import { useMemo } from "react";

import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import { type Order, SEED_ORDERS, STATUS_VARIANTS } from "./demo-data";

const TABLE_CODE = "docs-dt-search-only";

/** Default search toolbar only (surface A) — no builder, panel, or facets. */
export function DataTableSearchOnlyDemo() {
  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 110,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 140,
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 100,
          },
          amount: {
            kind: "currency",
            label: "Amount",
            sortKey: "amount",
            currency: "USD",
            size: 100,
          },
        },
        {},
      ),
    [],
  );

  return (
    <div className="space-y-2">
      <p className="text-muted-foreground text-xs">
        Global keyword search in the toolbar — no filter builder or side panel.
      </p>
      <div className="h-[min(380px,55vh)] min-h-[260px] overflow-hidden rounded-md border">
        <DataTable<Order>
          fillHeight
          className="min-h-0"
          schema={schema}
          data={SEED_ORDERS}
          tableCode={TABLE_CODE}
          getRowId={(r) => r.id}
          filtering="search"
          disablePagination
        />
      </div>
    </div>
  );
}

"use client";

import { useMemo } from "react";

import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import {
  type Order,
  SEED_ORDERS,
  STATUS_VARIANTS,
  PRIORITY_VARIANTS,
} from "./demo-data";

const TABLE_CODE = "docs-dt-view-tabs";

/** Segmented preset tabs (surface B) over the shared filter model. */
export function DataTableViewTabsDemo() {
  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 110,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 140,
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 100,
            filter: {
              valueType: "enum",
              paramKey: "status",
              logicVar: "status",
              options: Object.entries(STATUS_VARIANTS).map(([value, { label }]) => ({
                value,
                label,
              })),
            },
          },
          priority: {
            kind: "status",
            label: "Priority",
            sortKey: "priority",
            variants: PRIORITY_VARIANTS,
            size: 90,
            filter: {
              valueType: "enum",
              paramKey: "priority",
              logicVar: "priority",
              options: Object.entries(PRIORITY_VARIANTS).map(([value, { label }]) => ({
                value,
                label,
              })),
            },
          },
        },
        {},
      ),
    [],
  );

  return (
    <div className="space-y-2">
      <p className="text-muted-foreground text-xs">
        Preset tabs apply saved filter models — no search bar or builder panel.
      </p>
      <div className="h-[min(380px,55vh)] min-h-[260px] overflow-hidden rounded-md border">
        <DataTable<Order>
          fillHeight
          className="min-h-0"
          schema={schema}
          data={SEED_ORDERS}
          tableCode={TABLE_CODE}
          getRowId={(r) => r.id}
          filtering="tabs"
          disablePagination
          initialFilterPresets={[
            {
              id: "preset-all",
              name: "All orders",
              filterModel: {},
              createdAt: new Date("2026-01-01").toISOString(),
              updatedAt: new Date("2026-01-01").toISOString(),
            },
            {
              id: "preset-shipped",
              name: "Shipped",
              filterModel: {
                status: { op: "equals", value: "shipped" },
              },
              createdAt: new Date("2026-01-02").toISOString(),
              updatedAt: new Date("2026-01-02").toISOString(),
            },
            {
              id: "preset-urgent",
              name: "Urgent",
              filterModel: {
                priority: { op: "equals", value: "urgent" },
              },
              createdAt: new Date("2026-01-03").toISOString(),
              updatedAt: new Date("2026-01-03").toISOString(),
            },
          ]}
        />
      </div>
    </div>
  );
}

"use client";

import { useMemo } from "react";

import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import {
  type Order,
  SEED_ORDERS,
  STATUS_VARIANTS,
  PRIORITY_VARIANTS,
} from "./demo-data";

const TABLE_CODE = "docs-dt-column-header";

/**
 * Column-header filters (surface C): schema `filter` compiles to `filterField`
 * column meta via `generateColumnDefs`. Recipe uses `filtering="none"` so only
 * header dropdowns edit the shared filter model.
 */
export function DataTableColumnHeaderDemo() {
  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 110,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 140,
            filter: {
              valueType: "string",
              paramKey: "customer",
              logicVar: "customer",
              placeholder: "Search customer…",
            },
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 100,
            filter: {
              valueType: "enum",
              paramKey: "status",
              logicVar: "status",
              options: Object.entries(STATUS_VARIANTS).map(([value, { label }]) => ({
                value,
                label,
              })),
            },
          },
          priority: {
            kind: "status",
            label: "Priority",
            sortKey: "priority",
            variants: PRIORITY_VARIANTS,
            size: 90,
            filter: {
              valueType: "enum",
              paramKey: "priority",
              logicVar: "priority",
              options: Object.entries(PRIORITY_VARIANTS).map(([value, { label }]) => ({
                value,
                label,
              })),
            },
          },
          amount: {
            kind: "currency",
            label: "Amount",
            sortKey: "amount",
            currency: "USD",
            size: 100,
          },
        },
        {},
      ),
    [],
  );

  return (
    <div className="space-y-2">
      <p className="text-muted-foreground text-xs">
        Per-column filter icons in headers — no search bar, builder, or facet
        chips.
      </p>
      <div className="h-[min(380px,55vh)] min-h-[260px] overflow-hidden rounded-md border">
        <DataTable<Order>
          fillHeight
          className="min-h-0"
          schema={schema}
          data={SEED_ORDERS}
          tableCode={TABLE_CODE}
          getRowId={(r) => r.id}
          filtering="none"
          features={{ filters: true }}
          disablePagination
        />
      </div>
    </div>
  );
}

"use client";

import { useMemo } from "react";

import type { FacetCapability } from "@/components/f-ui/data-table/contract/capabilities";
import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import { type Order, SEED_ORDERS, STATUS_VARIANTS } from "./demo-data";

const TABLE_CODE = "docs-dt-faceted-filter";

const ORDER_STATUS_FACETS: ReadonlyArray<FacetCapability> = [
  {
    id: "status:all",
    dimension: "status",
    default: true,
    neutral: true,
    governs: ["status"],
  },
  {
    id: "status:shipped",
    dimension: "status",
    neutral: false,
    governs: ["status"],
  },
  {
    id: "status:delivered",
    dimension: "status",
    neutral: false,
    governs: ["status"],
  },
];

/** Faceted multi-select toolbar (surface D). */
export function DataTableFacetedFilterDemo() {
  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 110,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 140,
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 100,
            filter: false, // R8: facets (D) govern status — no column-header (C).
          },
          amount: {
            kind: "currency",
            label: "Amount",
            sortKey: "amount",
            currency: "USD",
            size: 100,
          },
        },
        {},
      ),
    [],
  );

  return (
    <div className="space-y-2">
      <p className="text-muted-foreground text-xs">
        Facet chips narrow governed fields without opening the builder panel.
      </p>
      <div className="h-[min(380px,55vh)] min-h-[260px] overflow-hidden rounded-md border">
        <DataTable<Order>
          fillHeight
          className="min-h-0"
          schema={schema}
          data={SEED_ORDERS}
          tableCode={TABLE_CODE}
          getRowId={(r) => r.id}
          filtering="faceted"
          facets={ORDER_STATUS_FACETS}
          disablePagination
        />
      </div>
    </div>
  );
}

"use client";

import { useMemo } from "react";

import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import {
  type Order,
  SEED_ORDERS,
  STATUS_VARIANTS,
  PRIORITY_VARIANTS,
} from "./demo-data";

const TABLE_CODE = "docs-dt-builder";

/** Filter builder + chips (surface E) via `filtering="builder"`. */
export function DataTableBuilderDemo() {
  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 110,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 140,
            filter: {
              valueType: "string",
              paramKey: "customer",
              logicVar: "customer",
              placeholder: "Search customer…",
            },
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 100,
            filter: {
              valueType: "enum",
              paramKey: "status",
              logicVar: "status",
              options: Object.entries(STATUS_VARIANTS).map(([value, { label }]) => ({
                value,
                label,
              })),
            },
          },
          priority: {
            kind: "status",
            label: "Priority",
            sortKey: "priority",
            variants: PRIORITY_VARIANTS,
            size: 90,
            filter: {
              valueType: "enum",
              paramKey: "priority",
              logicVar: "priority",
              options: Object.entries(PRIORITY_VARIANTS).map(([value, { label }]) => ({
                value,
                label,
              })),
            },
          },
          amount: {
            kind: "currency",
            label: "Amount",
            sortKey: "amount",
            currency: "USD",
            size: 100,
            filter: {
              valueType: "number",
              paramKey: "amount",
              logicVar: "amount",
            },
          },
        },
        {
          filterGroups: [
            { label: "Order", fields: ["customer", "status", "priority"] },
            { label: "Details", fields: ["amount"] },
          ],
        },
      ),
    [],
  );

  return (
    <div className="space-y-2">
      <p className="text-muted-foreground text-xs">
        Bazza-style chips and side panel — the default builder surface.
      </p>
      <div className="h-[min(400px,55vh)] min-h-[280px] overflow-hidden rounded-md border">
        <DataTable<Order>
          fillHeight
          className="min-h-0"
          schema={schema}
          data={SEED_ORDERS}
          tableCode={TABLE_CODE}
          getRowId={(r) => r.id}
          filtering="builder"
          defaultPageSize={10}
        />
      </div>
    </div>
  );
}

"use client";

import { useMemo } from "react";

import type { ListQueryAdapter } from "@/components/f-ui/data-table/adapters/list-query-contract";
import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import { type Order, expandSeedOrders, STATUS_VARIANTS } from "./demo-data";

const TABLE_CODE = "docs-dt-infinite-scroll";
const PAGE_SIZE = 8;

function createCursorPagedOrdersAdapter(
  items: readonly Order[],
): ListQueryAdapter<Order> {
  const adapter: ListQueryAdapter<Order> = async (request) => {
    const offset = request.cursor ? Number.parseInt(request.cursor, 10) : 0;
    const pageSize = Math.max(1, request.pageSize);
    const slice = items.slice(offset, offset + pageSize);
    const nextOffset = offset + pageSize;
    const hasNext = nextOffset < items.length;

    return {
      items: slice,
      totalItems: items.length,
      nextCursor: hasNext ? String(nextOffset) : null,
      hasNext,
    };
  };
  adapter.versionKey = ["demo-infinite-scroll", String(items.length)];
  return adapter;
}

/** Cursor pipeline with auto load-more sentinel (surface infinite). */
export function DataTableInfiniteScrollDemo() {
  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 110,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 140,
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 100,
          },
          amount: {
            kind: "currency",
            label: "Amount",
            sortKey: "amount",
            currency: "USD",
            size: 100,
          },
        },
        {},
      ),
    [],
  );

  const rows = useMemo(() => expandSeedOrders(6), []);

  const adapter = useMemo(
    () => createCursorPagedOrdersAdapter(rows),
    [rows],
  );

  return (
    <div className="space-y-2">
      <p className="text-muted-foreground text-xs">
        Scroll the table body — the sentinel fetches the next cursor page
        automatically ({rows.length} rows, {PAGE_SIZE} per page).
      </p>
      <div className="h-[min(400px,55vh)] min-h-[260px] overflow-hidden rounded-md border">
        <DataTable<Order>
          fillHeight
          className="min-h-0"
          schema={schema}
          adapter={adapter}
          tableCode={TABLE_CODE}
          getRowId={(r) => r.id}
          defaultPageSize={PAGE_SIZE}
          paginationMode="infinite"
          filtering="none"
        />
      </div>
    </div>
  );
}

"use client";

import { useMemo } from "react";

import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import { createDemoOrdersCursorListAdapter } from "@/features/demo-orders/adapters/create-demo-orders-cursor-list-adapter";
import { type Order, STATUS_VARIANTS } from "./demo-data";

const TABLE_CODE = "docs-dt-infinite-api";
const PAGE_SIZE = 25;

/**
 * Infinite scroll against the live demo-orders list API (`POST …/demo/demo-orders/list`).
 * Each sentinel fetch requests the next offset page via a cursor wrapper.
 */
export function DataTableInfiniteScrollApiDemo() {
  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            pinned: "left",
            size: 120,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 160,
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 110,
          },
          amount: {
            kind: "currency",
            label: "Amount",
            sortKey: "amount",
            currency: "USD",
            size: 110,
          },
          createdAt: {
            kind: "date",
            label: "Created",
            sortKey: "createdAt",
            size: 120,
          },
        },
        {},
      ),
    [],
  );

  const adapter = useMemo(() => createDemoOrdersCursorListAdapter(), []);

  return (
    <div className="space-y-2">
      <p className="text-muted-foreground text-xs">
        Scroll the table body — each page loads{" "}
        <span className="text-foreground font-medium">{PAGE_SIZE}</span> rows from
        the demo orders API. Requires a migrated, seeded database (
        <code className="text-foreground">pnpm db:migrate</code>,{" "}
        <code className="text-foreground">pnpm run db:seed:demo-orders</code>).
      </p>
      <div className="h-[min(400px,55vh)] min-h-[260px] overflow-hidden rounded-md border">
        <DataTable<Order>
          fillHeight
          className="min-h-0"
          schema={schema}
          adapter={adapter}
          tableCode={TABLE_CODE}
          getRowId={(r) => r.id}
          defaultPageSize={PAGE_SIZE}
          paginationMode="infinite"
          filtering="none"
        />
      </div>
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";

import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import { applyOrderCellEdit } from "@/demos/data-table/demo-editing-commit";
import { type Order, SEED_ORDERS } from "@/demos/data-table/demo-data";

const TABLE_CODE = "docs-dt-inline-edit";

export function DataTableInlineEditDemo() {
  const [rows, setRows] = useState(() =>
    SEED_ORDERS.slice(0, 5).map((row, index) =>
      index === 0
        ? { ...row, notes: "Ship with padded envelope.\nCall before delivery." }
        : row,
    ),
  );

  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 100,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 140,
            edit: true,
          },
          notes: {
            kind: "text",
            label: "Notes",
            sortKey: "notes",
            size: 200,
            multiline: true,
            edit: true,
          },
        },
        {},
      ),
    [],
  );

  return (
    <div className="h-[min(360px,55vh)] min-h-[240px] overflow-hidden rounded-md border">
      <DataTable<Order>
        fillHeight
        className="min-h-0"
        schema={schema}
        data={rows}
        tableCode={TABLE_CODE}
        getRowId={(r) => r.id}
        filtering="none"
        disablePagination
        features={{ editing: {
          enabled: true,
          scope: "cell",
          commit: "immediate",
          commitMode: "manual",
          async onCommit(payload) {
            if (payload.strategy !== "cell") return;
            const patch = applyOrderCellEdit(payload.columnId, payload.value);
            setRows((prev) =>
              prev.map((r) =>
                r.id === payload.rowId ? { ...r, ...patch } : r,
              ),
            );
          },
        } }}
      />
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";

import { DataTable } from "@/components/f-ui/data-table/data-table";
import { defineTableSchema } from "@/components/f-ui/data-table/schema/column-config";
import { applyOrderCellEdit } from "@/demos/data-table/demo-editing-commit";
import {
  type Order,
  CATEGORY_VARIANTS,
  PRIORITY_VARIANTS,
  SEED_ORDERS,
  STATUS_VARIANTS,
} from "@/demos/data-table/demo-data";

const TABLE_CODE = "docs-dt-inline-edit-field-types";

/**
 * Showcases every inferred field editor (`edit: true` on column `kind`):
 * string, number, currency, date, boolean, and enum (badge).
 */
export function DataTableInlineEditFieldTypesDemo() {
  const [rows, setRows] = useState(() => SEED_ORDERS.slice(0, 6));

  const schema = useMemo(
    () =>
      defineTableSchema<Order>(
        {
          orderNumber: {
            kind: "text",
            label: "Order #",
            sortKey: "orderNumber",
            size: 108,
          },
          customer: {
            kind: "text",
            label: "Customer",
            sortKey: "customer",
            size: 132,
            edit: true,
          },
          status: {
            kind: "status",
            label: "Status",
            sortKey: "status",
            variants: STATUS_VARIANTS,
            size: 118,
            edit: true,
          },
          priority: {
            kind: "label",
            label: "Priority",
            sortKey: "priority",
            variants: PRIORITY_VARIANTS,
            size: 104,
            edit: true,
          },
          category: {
            kind: "label",
            label: "Category",
            sortKey: "category",
            variants: CATEGORY_VARIANTS,
            size: 118,
            edit: true,
          },
          amount: {
            kind: "currency",
            label: "Amount",
            sortKey: "amount",
            currency: "USD",
            size: 112,
            edit: true,
          },
          quantity: {
            kind: "number",
            label: "Qty",
            sortKey: "quantity",
            decimals: 0,
            size: 72,
            edit: true,
          },
          orderDate: {
            kind: "date",
            label: "Order date",
            sortKey: "orderDate",
            size: 120,
            edit: true,
          },
          shipped: {
            kind: "boolean",
            label: "Shipped",
            trueLabel: "Yes",
            falseLabel: "No",
            size: 88,
            edit: true,
          },
          notes: {
            kind: "text",
            label: "Notes",
            sortKey: "notes",
            size: 148,
            edit: true,
          },
        },
        {},
      ),
    [],
  );

  return (
    <div className="h-[min(440px,62vh)] min-h-[300px] overflow-hidden rounded-md border">
      <DataTable<Order>
        fillHeight
        className="min-h-0"
        schema={schema}
        data={rows}
        tableCode={TABLE_CODE}
        getRowId={(r) => r.id}
        filtering="none"
        disablePagination
        editing={{
          enabled: true,
          scope: "cell",
          commit: "immediate",
          commitMode: "manual",
          async onCommit(payload) {
            if (payload.strategy !== "cell") return;
            const patch = applyOrderCellEdit(payload.columnId, payload.value);
            setRows((prev) =>
              prev.map((r) =>
                r.id === payload.rowId ? { ...r, ...patch } : r,
              ),
            );
          },
        }}
      />
    </div>
  );
}