Data Table Schema System

1"use client";
2 
3import {
4  DataTableCellBadge,
5  DataTableCellBar,
6  DataTableCellBoolean,
7  DataTableCellCode,
8  DataTableCellGauge,
9  DataTableCellHeatmap,
10  DataTableCellLevelIndicator,
11  DataTableCellNumber,
12  DataTableCellStar,
13  DataTableCellStatusCode,
14  DataTableCellText,
15  DataTableCellTimestamp,
16} from "@/components/data-table/data-table-cell";
17import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
18import { Checkbox } from "@/components/ui/checkbox";
19import type { ColumnDef } from "@tanstack/react-table";
20import type { JSX } from "react";
21import type { ColConfig, DisplayConfig, TableSchemaDefinition } from "../types";
22 
23/**
24 * Derive the TanStack Table filterFn name from a column config.
25 *
26 * Custom filterFns (arrSome, inDateRange) must be registered on the table:
27 *   filterFns: { inDateRange, arrSome }  // from src/lib/table/filterfns.ts
28 */
29function getFilterFn(config: ColConfig): string | undefined {
30  if (!config.filter) return undefined;
31 
32  const { kind, filter, arrayItem } = config;
33 
34  switch (filter.type) {
35    case "timerange":
36      return "inDateRange"; // custom — must be registered
37    case "slider":
38      return "inNumberRange"; // TanStack built-in
39    case "input":
40      return "includesString"; // TanStack built-in; works for strings and numbers (via toString)
41    case "checkbox":
42      // Array columns use arrIncludesSome (checks row's array for filter values)
43      if (kind === "array") return "arrIncludesSome"; // TanStack built-in
44      // Single-value columns use arrSome (checks if row value is in filter array)
45      return "arrSome"; // custom — must be registered
46  }
47}
48 
49/**
50 * Render the cell based on the display config.
51 */
52function renderCell(
53  display: DisplayConfig,
54  value: unknown,
55  row: unknown,
56  context?: { min: number; max: number },
57): JSX.Element | null {
58  const fallback = <DataTableCellText value={String(value ?? "")} />;
59  const colorMap = "colorMap" in display ? display.colorMap : undefined;
60  switch (display.type) {
61    case "text": {
62      const hex = colorMap?.[String(value)];
63      return typeof value === "string" || typeof value === "number" ? (
64        <DataTableCellText value={value} color={hex} />
65      ) : (
66        fallback
67      );
68    }
69    case "code": {
70      const hex = colorMap?.[String(value)];
71      return typeof value === "string" || typeof value === "number" ? (
72        <DataTableCellCode value={value} color={hex} />
73      ) : (
74        fallback
75// … truncated