react-glide-table 1.6.0 → 2.0.1

package/dist/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  BUILTIN_CELL_RENDERERS: () => BUILTIN_CELL_RENDERERS,
   CELL_SELECTION_EDGES_CLASS: () => CELL_SELECTION_EDGES_CLASS,
   DEFAULT_DATA_TABLE_LABELS: () => DEFAULT_DATA_TABLE_LABELS,
   DEFAULT_TREE_CHILDREN_FIELD: () => DEFAULT_TREE_CHILDREN_FIELD,
@@ -28,6 +29,7 @@ __export(src_exports, {
   DEFAULT_TREE_QTY_FIELD: () => DEFAULT_TREE_QTY_FIELD,
   DataTable: () => DataTable,
   INLINE_SEARCH_MAX_RESULTS: () => INLINE_SEARCH_MAX_RESULTS,
+  ResolvedTableCell: () => ResolvedTableCell,
   Table: () => Table,
   applyCellEdit: () => applyCellEdit,
   applyFillData: () => applyFillData,
@@ -47,10 +49,14 @@ __export(src_exports, {
   collectFillChanges: () => collectFillChanges,
   collectRowSpanColumns: () => collectRowSpanColumns,
   collectSearchMatchesInRange: () => collectSearchMatchesInRange,
+  commitCellValue: () => commitCellValue,
+  createCellRendererRegistry: () => createCellRendererRegistry,
   createSearchRegex: () => createSearchRegex,
   createTable: () => createTable,
   escapeSearchRegex: () => escapeSearchRegex,
   flattenSubtreeRows: () => flattenSubtreeRows,
+  formatCellValue: () => formatCellValue,
+  formatDefaultCellValue: () => formatDefaultCellValue,
   formatSearchResultLabel: () => formatSearchResultLabel,
   getCellEditDraftValue: () => getCellEditDraftValue,
   getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
@@ -72,8 +78,10 @@ __export(src_exports, {
   parseClipboardTSV: () => parseClipboardTSV,
   parseClipboardTSVWithDepths: () => parseClipboardTSVWithDepths,
   previousSearchIndex: () => previousSearchIndex,
+  resolveCellRenderer: () => resolveCellRenderer,
   resolveColumnFreezeSide: () => resolveColumnFreezeSide,
   resolveDataTableLabels: () => resolveDataTableLabels,
+  resolveHeaderFreezeOffset: () => resolveHeaderFreezeOffset,
   resolvePasteColumnIds: () => resolvePasteColumnIds,
   resolveRowSelection: () => resolveRowSelection,
   resolveRowSpanAt: () => resolveRowSpanAt,
@@ -132,6 +140,7 @@ var ROW_HOVER_CLASS = "row-hoverable";
 var ROW_HOVERED_BG_CLASS = "row-hovered";
 var CELL_SELECTION_FILL_CLASS = "cell-selection-fill";
 var DATA_TABLE_ROW_HEIGHT = 44;
+var DATA_TABLE_HEADER_ROW_HEIGHT = 40;
 var DATA_TABLE_VIRTUAL_OVERSCAN = 8;
 var DATA_TABLE_COLUMN_SIZE = 150;
 var DATA_TABLE_COLUMN_MIN_SIZE = 40;
@@ -186,6 +195,37 @@ function applyCellEdit(data, rows, rowIndex, colIndex, raw) {
   return newData;
 }
 
+// src/components/ui/table/features/cell-render/commitCellValue.ts
+function commitCellValue({
+  data,
+  rows,
+  rowId,
+  columnId,
+  value,
+  onCellChange,
+  onDataChange
+}) {
+  if (!onCellChange && !onDataChange) return true;
+  if (onCellChange) {
+    onCellChange(rowId, columnId, value);
+    return true;
+  }
+  const row = rows.find((item) => item.id === rowId);
+  if (!row) return false;
+  const cell = row.getAllCells().find((item) => item.column.id === columnId) ?? row.getVisibleCells().find((item) => item.column.id === columnId);
+  if (!cell) return false;
+  const accessorKey = getColumnAccessorKey(cell.column.columnDef);
+  if (!accessorKey) return false;
+  const dataIndex = row.index;
+  if (dataIndex < 0 || dataIndex >= data.length) return false;
+  const next = data.map((item) => ({ ...item }));
+  const target = next[dataIndex];
+  if (!target) return false;
+  target[accessorKey] = value;
+  onDataChange?.(next);
+  return true;
+}
+
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
 function useCellEdit({
   data,
@@ -221,21 +261,23 @@ function useCellEdit({
         cancelEdit();
         return true;
       }
-      const value = raw ?? draftValueRef.current;
       if (!isColumnEditable(cell.column.columnDef)) {
         cancelEdit();
         return true;
       }
+      const value = raw ?? draftValueRef.current;
       const parsed = parseCellEditValue(value, getColumnEditType(cell.column.columnDef));
       if (!parsed.ok) return false;
-      if (onCellChange) {
-        onCellChange(row.id, cell.column.id, parsed.value);
-        cancelEdit();
-        return true;
-      }
-      const next = applyCellEdit(data, rows, current.rowIndex, current.colIndex, value);
-      if (!next) return false;
-      onDataChange?.(next);
+      const committed = commitCellValue({
+        data,
+        rows,
+        rowId: row.id,
+        columnId: cell.column.id,
+        value: parsed.value,
+        onCellChange,
+        onDataChange
+      });
+      if (!committed) return false;
       cancelEdit();
       return true;
     },
@@ -264,6 +306,218 @@ function useCellEdit({
   };
 }
 
+// src/components/ui/table/features/cell-render/builtins.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function asString(value) {
+  if (value == null) return "";
+  return String(value);
+}
+function asStringList(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => asString(item)).filter(Boolean);
+  }
+  if (value == null || value === "") return [];
+  return [asString(value)];
+}
+function asDrilldownItems(value) {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((item) => {
+    if (item == null) return [];
+    if (typeof item === "string") return [{ text: item }];
+    if (typeof item === "object") {
+      const record = item;
+      const text = asString(record.text ?? record.label ?? "");
+      if (!text) return [];
+      const img = record.img ?? record.image;
+      return [{ text, ...typeof img === "string" ? { img } : {} }];
+    }
+    return [{ text: asString(item) }];
+  });
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function simpleMarkdownToHtml(source) {
+  const escaped = escapeHtml(source);
+  return escaped.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(/\n/g, "<br />");
+}
+function TextCell({ value }) {
+  return asString(value);
+}
+function NumberCell({ value }) {
+  if (value == null || value === "") return null;
+  return asString(value);
+}
+function BooleanCell({ value, update, cellProps }) {
+  const checked = Boolean(value);
+  const readonly = Boolean(cellProps?.readonly);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      type: "checkbox",
+      className: "data-table-cell-boolean",
+      checked,
+      disabled: readonly,
+      "aria-checked": checked,
+      onChange: (event) => {
+        if (readonly) return;
+        update(event.target.checked);
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+      },
+      onMouseDown: (event) => {
+        event.stopPropagation();
+      }
+    }
+  );
+}
+function sanitizeUriHref(raw) {
+  const href = raw.trim();
+  if (!href) return null;
+  if (href.startsWith("/") || href.startsWith("#") || href.startsWith("?") || href.startsWith("./") || href.startsWith("../")) {
+    return href;
+  }
+  try {
+    const parsed = new URL(href);
+    const protocol = parsed.protocol.toLowerCase();
+    if (protocol === "http:" || protocol === "https:" || protocol === "mailto:") {
+      return href;
+    }
+    return null;
+  } catch {
+    if (/^[a-z][a-z0-9+.-]*:/i.test(href)) return null;
+    return href;
+  }
+}
+function UriCell({ value }) {
+  const raw = asString(value);
+  if (!raw) return null;
+  const href = sanitizeUriHref(raw);
+  if (!href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-uri", children: raw });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      className: "data-table-cell-uri",
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: (event) => event.stopPropagation(),
+      onMouseDown: (event) => event.stopPropagation(),
+      children: raw
+    }
+  );
+}
+function ImageCell({ value }) {
+  const urls = asStringList(value);
+  if (urls.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-image", children: urls.map((url, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      src: url,
+      alt: "",
+      className: "data-table-cell-image-item"
+    },
+    `${index}:${url}`
+  )) });
+}
+function BubbleCell({ value }) {
+  const items = asStringList(value);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-bubble", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-bubble-item", children: item }, `${index}:${item}`)) });
+}
+function MarkdownCell({ value }) {
+  const source = asString(value);
+  if (!source) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "data-table-cell-markdown",
+      dangerouslySetInnerHTML: { __html: simpleMarkdownToHtml(source) }
+    }
+  );
+}
+function DrilldownCell({ value }) {
+  const items = asDrilldownItems(value);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-drilldown", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      className: "data-table-cell-drilldown-item",
+      children: [
+        item.img ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: item.img,
+            alt: "",
+            className: "data-table-cell-drilldown-image"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-drilldown-text", children: item.text })
+      ]
+    },
+    `${index}:${item.text}:${item.img ?? ""}`
+  )) });
+}
+function LoadingCell() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-loading", "aria-busy": "true" });
+}
+function ProtectedCell() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-protected", "aria-label": "protected", children: "****" });
+}
+function RowIdCell({ value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-row-id", children: asString(value) });
+}
+var BUILTIN_RENDER_MAP = {
+  text: TextCell,
+  number: NumberCell,
+  boolean: BooleanCell,
+  uri: UriCell,
+  image: ImageCell,
+  bubble: BubbleCell,
+  markdown: MarkdownCell,
+  drilldown: DrilldownCell,
+  loading: LoadingCell,
+  protected: ProtectedCell,
+  "row-id": RowIdCell
+};
+var BUILTIN_CELL_RENDERERS = Object.keys(BUILTIN_RENDER_MAP).map((kind) => ({
+  kind,
+  render: BUILTIN_RENDER_MAP[kind]
+}));
+
+// src/components/ui/table/features/cell-render/registry.ts
+function createCellRendererRegistry(customRenderers = []) {
+  const registry = /* @__PURE__ */ new Map();
+  for (const renderer of BUILTIN_CELL_RENDERERS) {
+    registry.set(renderer.kind, renderer);
+  }
+  for (const renderer of customRenderers) {
+    registry.set(renderer.kind, renderer);
+  }
+  return registry;
+}
+function resolveCellRenderer(registry, kind, ctx) {
+  if (!kind) return void 0;
+  const renderer = registry.get(kind);
+  if (!renderer) return void 0;
+  if (renderer.isMatch && !renderer.isMatch(ctx)) {
+    return void 0;
+  }
+  return renderer;
+}
+function formatDefaultCellValue(value) {
+  if (value == null) return null;
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (typeof value === "bigint") return value.toString();
+  return String(value);
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 var import_react2 = require("react");
 
@@ -573,9 +827,34 @@ function hasCellSelectionEdges(style) {
 }
 
 // src/components/ui/table/features/cell-selection/copyData.ts
+function formatPrimitive(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+    return String(value);
+  }
+  return "";
+}
+function formatObjectValue(value) {
+  const text = value.text ?? value.label ?? value.name ?? value.title;
+  if (text != null && text !== "") {
+    return formatCellValue(text);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "";
+  }
+}
 function formatCellValue(value) {
   if (value === null || value === void 0) return "";
-  return String(value);
+  if (Array.isArray(value)) {
+    return value.map((item) => formatCellValue(item)).filter((item) => item.length > 0).join(", ");
+  }
+  if (typeof value === "object") {
+    return formatObjectValue(value);
+  }
+  return formatPrimitive(value);
 }
 function getNestedValue(row, path) {
   if (!path.includes(".")) return row[path];
@@ -1199,10 +1478,40 @@ function getColumnFreezeStyle(offset, options) {
   return {
     position: "sticky",
     ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
-    zIndex: zBase + offset.stack,
-    ...options?.isHeader ? { top: 0 } : {}
+    zIndex: zBase + offset.stack
   };
 }
+function resolveHeaderFreezeOffset(column, freezeOffsets) {
+  const direct = freezeOffsets.get(column.id);
+  if (direct) return direct;
+  const leaves = typeof column.getLeafColumns === "function" ? column.getLeafColumns() : column.columns && column.columns.length > 0 ? flattenHeaderLeaves(column) : [];
+  if (leaves.length === 0) return void 0;
+  const leafOffsets = [];
+  for (const leaf of leaves) {
+    const offset2 = freezeOffsets.get(leaf.id);
+    if (!offset2) return void 0;
+    leafOffsets.push(offset2);
+  }
+  const side = leafOffsets[0]?.side;
+  if (!side || leafOffsets.some((offset2) => offset2.side !== side)) {
+    return void 0;
+  }
+  const offset = Math.min(...leafOffsets.map((item) => item.offset));
+  const leftmost = leafOffsets[0];
+  const rightmost = leafOffsets[leafOffsets.length - 1];
+  return {
+    side,
+    offset,
+    edgeLeft: leftmost.edgeLeft,
+    edgeRight: rightmost.edgeRight,
+    isEdge: leftmost.edgeLeft || rightmost.edgeRight,
+    stack: Math.max(...leafOffsets.map((item) => item.stack))
+  };
+}
+function flattenHeaderLeaves(column) {
+  if (!column.columns || column.columns.length === 0) return [column];
+  return column.columns.flatMap((child) => flattenHeaderLeaves(child));
+}
 
 // src/components/ui/table/features/inline-search/inlineSearch.ts
 var INLINE_SEARCH_MAX_RESULTS = 1e3;
@@ -1946,6 +2255,7 @@ function useGlideTable(options) {
     onDataChange,
     onCellChange,
     onBatchChange,
+    cellRenderers,
     preserveRowSelection = false,
     toggleField,
     childField,
@@ -2171,6 +2481,22 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
+  const cellRendererRegistry = (0, import_react5.useMemo)(
+    () => createCellRendererRegistry(cellRenderers),
+    [cellRenderers]
+  );
+  const commitRenderedCellValue = (0, import_react5.useCallback)(
+    (rowId, columnId, value) => commitCellValue({
+      data: tableData,
+      rows,
+      rowId,
+      columnId,
+      value,
+      onCellChange,
+      onDataChange
+    }),
+    [onCellChange, onDataChange, rows, tableData]
+  );
   const handleCellMouseDownWithCommit = (0, import_react5.useCallback)(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -2407,6 +2733,10 @@ function useGlideTable(options) {
         onCommitEdit: commitEdit,
         onCancelEdit: cancelEdit
       },
+      cellRender: {
+        registry: cellRendererRegistry,
+        commitValue: commitRenderedCellValue
+      },
       expand: {
         enableExpand,
         toggleField,
@@ -2453,6 +2783,8 @@ function useGlideTable(options) {
     startEdit,
     commitEdit,
     cancelEdit,
+    cellRendererRegistry,
+    commitRenderedCellValue,
     enableExpand,
     toggleField,
     expandedRows,
@@ -2517,6 +2849,60 @@ function useGlideTable(options) {
   };
 }
 
+// src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
+var import_react7 = require("react");
+
+// src/components/ui/table/DataTableContext.tsx
+var import_react6 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DataTableContext = (0, import_react6.createContext)(null);
+function useDataTableRowContext() {
+  const context = (0, import_react6.use)(DataTableContext);
+  if (!context) {
+    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
+  }
+  return context;
+}
+function DataTableContextProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DataTableContext, { value, children });
+}
+
+// src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
+function ResolvedTableCell({
+  info
+}) {
+  const { cellRender } = useDataTableRowContext();
+  const { row, column, getValue } = info;
+  const meta = column.columnDef.meta;
+  const value = getValue();
+  const columnId = column.id;
+  const update = (0, import_react7.useCallback)(
+    (next) => {
+      cellRender.commitValue(row.id, columnId, next);
+    },
+    [cellRender, columnId, row.id]
+  );
+  const ctx = {
+    value,
+    row,
+    index: row.index,
+    columnId,
+    cellProps: meta?.cellProps,
+    update
+  };
+  if (meta?.cellRender) {
+    return meta.cellRender(ctx);
+  }
+  const renderer = resolveCellRenderer(cellRender.registry, meta?.kind, ctx);
+  if (renderer) {
+    return renderer.render(ctx);
+  }
+  return formatDefaultCellValue(value);
+}
+
 // src/components/ui/table/features/column-resize/columnResize.ts
 function getColumnSizeStyle(size, options) {
   const { force = false, lockMax = false } = options ?? {};
@@ -2532,34 +2918,16 @@ function getColumnSizeStyle(size, options) {
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 var import_react_table3 = require("@tanstack/react-table");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 var import_react_table2 = require("@tanstack/react-table");
-var import_react7 = require("react");
-
-// src/components/ui/table/DataTableContext.tsx
-var import_react6 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var DataTableContext = (0, import_react6.createContext)(null);
-function useDataTableRowContext() {
-  const context = (0, import_react6.use)(DataTableContext);
-  if (!context) {
-    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
-  }
-  return context;
-}
-function DataTableContextProvider({
-  value,
-  children
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataTableContext, { value, children });
-}
+var import_react8 = require("react");
 
 // src/components/ui/table/components/icons.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function ChevronDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",
     {
       className,
@@ -2572,12 +2940,12 @@ function ChevronDown({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
 function ChevronUp({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",
     {
       className,
@@ -2590,12 +2958,12 @@ function ChevronUp({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m18 15-6-6-6 6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m18 15-6-6-6 6" })
     }
   );
 }
 function ChevronLeft({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",
     {
       className,
@@ -2608,12 +2976,12 @@ function ChevronLeft({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m15 18-6-6 6-6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m15 18-6-6 6-6" })
     }
   );
 }
 function ChevronRight({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",
     {
       className,
@@ -2626,12 +2994,12 @@ function ChevronRight({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m9 18 6-6-6-6" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 18 6-6-6-6" })
     }
   );
 }
 function ArrowUp({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     {
       className,
@@ -2645,14 +3013,14 @@ function ArrowUp({ className, "aria-hidden": ariaHidden = true }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m18 15-6-6-6 6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 21V9" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m18 15-6-6-6 6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 21V9" })
       ]
     }
   );
 }
 function ArrowDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     {
       className,
@@ -2666,14 +3034,14 @@ function ArrowDown({ className, "aria-hidden": ariaHidden = true }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 9 6 6 6-6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 3v12" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 3v12" })
       ]
     }
   );
 }
 function ArrowUpDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     {
       className,
@@ -2687,10 +3055,10 @@ function ArrowUpDown({ className, "aria-hidden": ariaHidden = true }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21 16-4 4-4-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M17 20V4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m3 8 4-4 4 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M7 4v16" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21 16-4 4-4-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M17 20V4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m3 8 4-4 4 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 4v16" })
       ]
     }
   );
@@ -2702,7 +3070,7 @@ function cn(...inputs) {
 }
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function isInteractiveMouseTarget(target) {
   if (!(target instanceof Element)) return false;
   const interactiveSelector = [
@@ -2847,14 +3215,14 @@ function DataTableRow({
   const expandKey = toggleField && rowData[toggleField] !== null && rowData[toggleField] !== void 0 ? String(rowData[toggleField]) : null;
   const isExpanded = expandKey !== null && Boolean(expandedRows?.has(expandKey));
   const rowLevel = typeof rowData.level === "number" ? rowData.level : 0;
-  const editInputRef = (0, import_react7.useRef)(null);
+  const editInputRef = (0, import_react8.useRef)(null);
   const isRowEditing = editingCell?.rowIndex === rowIndex;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isRowEditing) return;
     editInputRef.current?.focus();
     editInputRef.current?.select();
   }, [isRowEditing, editingCell?.colIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "tr",
     {
       ref: measureElement,
@@ -2948,7 +3316,7 @@ function DataTableRow({
         const searchMatchKey = buildSearchMatchKey(cellIndex, rowIndex);
         const isSearchMatch = enableInlineSearch && searchMatchKeys.has(searchMatchKey);
         const isSearchActive = isSearchMatch && activeMatch !== null && activeMatch[0] === cellIndex && activeMatch[1] === rowIndex;
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "td",
           {
             "data-row-index": rowIndex,
@@ -3022,7 +3390,7 @@ function DataTableRow({
               classNames?.cell
             ),
             children: [
-              isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              isEditing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   ...editInputProps,
@@ -3065,8 +3433,8 @@ function DataTableRow({
                     onCommitEdit(event.currentTarget.value);
                   }
                 }
-              ) : isExpandCell && enableExpand ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("expand-cell", classNames?.expandCell), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              ) : isExpandCell && enableExpand ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("expand-cell", classNames?.expandCell), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                   "div",
                   {
                     className: cn(
@@ -3074,7 +3442,7 @@ function DataTableRow({
                       classNames?.expandCellContent
                     ),
                     children: [
-                      rowLevel > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      rowLevel > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         "span",
                         {
                           className: cn(
@@ -3084,7 +3452,7 @@ function DataTableRow({
                           children: "\xB7"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         "div",
                         {
                           className: cn(
@@ -3097,7 +3465,7 @@ function DataTableRow({
                     ]
                   }
                 ),
-                canExpand && expandKey && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                canExpand && expandKey && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3111,7 +3479,7 @@ function DataTableRow({
                       onToggleExpand?.(expandKey);
                     },
                     onMouseDown: (event) => event.stopPropagation(),
-                    children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       ChevronUp,
                       {
                         className: cn(
@@ -3119,7 +3487,7 @@ function DataTableRow({
                           classNames?.expandToggleIcon
                         )
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       ChevronDown,
                       {
                         className: cn(
@@ -3131,7 +3499,7 @@ function DataTableRow({
                   }
                 )
               ] }) : (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext()),
-              isBottomRightCell && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              isBottomRightCell && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
                   role: "presentation",
@@ -3153,9 +3521,9 @@ function DataTableRow({
 }
 
 // src/components/ui/table/components/DataTable/DataTableSearch.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function SearchCloseIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "svg",
     {
       className,
@@ -3169,8 +3537,8 @@ function SearchCloseIcon({ className }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6 6 18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 6 12 12" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m6 6 12 12" })
       ]
     }
   );
@@ -3216,15 +3584,15 @@ function DataTableSearch({
       onPrevious();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: cn("data-table-search", classNames?.search),
       role: "search",
       onMouseDown: (event) => event.stopPropagation(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "data-table-search-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "data-table-search-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
               ref: searchInputRef,
@@ -3240,7 +3608,7 @@ function DataTableSearch({
               onKeyDown: handleKeyDown
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               type: "button",
@@ -3250,10 +3618,10 @@ function DataTableSearch({
                 event.stopPropagation();
                 onPrevious();
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronUp, { className: "data-table-search-icon" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronUp, { className: "data-table-search-icon" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               type: "button",
@@ -3263,10 +3631,10 @@ function DataTableSearch({
                 event.stopPropagation();
                 onNext();
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronDown, { className: "data-table-search-icon" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronDown, { className: "data-table-search-icon" })
             }
           ),
-          canClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          canClose ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               type: "button",
@@ -3276,11 +3644,11 @@ function DataTableSearch({
                 event.stopPropagation();
                 onClose();
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SearchCloseIcon, { className: "data-table-search-icon" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SearchCloseIcon, { className: "data-table-search-icon" })
             }
           ) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             className: cn("data-table-search-status", classNames?.searchStatus),
@@ -3288,7 +3656,7 @@ function DataTableSearch({
             children: resultString
           }
         ),
-        searchStatus !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        searchStatus !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             className: cn(
@@ -3299,7 +3667,7 @@ function DataTableSearch({
             "aria-valuemin": 0,
             "aria-valuemax": 100,
             "aria-valuenow": progress,
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "div",
               {
                 className: "data-table-search-progress-bar",
@@ -3314,7 +3682,7 @@ function DataTableSearch({
 }
 
 // src/components/ui/table/components/DataTable/DataTableToolbar.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function DataTableToolbar({
   filteredCount,
   totalCount,
@@ -3332,39 +3700,71 @@ function DataTableToolbar({
   const selectionContent = selectionLabel?.(selectedCount) ?? null;
   const hasSelectionContent = selectionContent !== null && selectionContent !== false && selectionContent !== void 0 && typeof selectionContent !== "boolean";
   if (!hasLeftContent && !hasToolbar && !hasSelectionContent) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
-      hasCount && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "toolbar-count-placeholder", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
+      hasCount && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "toolbar-count-placeholder", children: [
           " / ",
           totalCount
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
       summary
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
-      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
-      hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
+      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
+      hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
     ] })
   ] });
 }
 
+// src/components/ui/table/features/column-groups/mergeHeaderGroups.ts
+function getMergedHeaderGroups(headerGroups) {
+  if (headerGroups.length <= 1) {
+    return headerGroups.map((group) => ({
+      ...group,
+      headers: group.headers.map((header) => ({
+        ...header,
+        mergedRowSpan: 1
+      }))
+    }));
+  }
+  const seenColumnIds = /* @__PURE__ */ new Set();
+  const fullDepth = headerGroups.length;
+  return headerGroups.map((group, depth) => ({
+    ...group,
+    headers: group.headers.filter((header) => !seenColumnIds.has(header.column.id)).map((header) => {
+      seenColumnIds.add(header.column.id);
+      if (header.isPlaceholder) {
+        return {
+          ...header,
+          isPlaceholder: false,
+          mergedRowSpan: fullDepth - depth
+        };
+      }
+      return {
+        ...header,
+        mergedRowSpan: 1
+      };
+    })
+  }));
+}
+
 // src/components/ui/table/components/DataTable/DataTable.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function DefaultScroll({
   scrollRef,
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
 }
 function DefaultPending({
   loadingText,
   className,
   classNames
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: cn(
@@ -3374,7 +3774,7 @@ function DefaultPending({
         classNames?.pending,
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
     }
   );
 }
@@ -3383,7 +3783,7 @@ function DefaultEmpty({
   columnCount,
   classNames
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "td",
     {
       colSpan: columnCount,
@@ -3435,12 +3835,13 @@ function DataTable({
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
   const freezeOffsets = rowContextValue.columnFreeze.offsets;
-  const contextValue = (0, import_react8.useMemo)(
+  const headerGroups = getMergedHeaderGroups(table.getHeaderGroups());
+  const contextValue = (0, import_react9.useMemo)(
     () => ({ ...rowContextValue, classNames }),
     [rowContextValue, classNames]
   );
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       PendingSlot,
       {
         loadingText,
@@ -3449,7 +3850,7 @@ function DataTable({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ref: rootRef,
@@ -3463,7 +3864,7 @@ function DataTable({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ToolbarSlot,
           {
             filteredCount: filteredCount ?? tableData.length,
@@ -3475,7 +3876,7 @@ function DataTable({
             classNames
           }
         ),
-        enableInlineSearch ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        enableInlineSearch ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           DataTableSearch,
           {
             showSearch: inlineSearch.showSearch,
@@ -3497,14 +3898,14 @@ function DataTable({
             onPrevious: inlineSearch.goToPrevious
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "table",
           {
             className: cn("data-table", classNames?.table),
             style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
             onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: headerGroups.map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "tr",
                 {
                   className: cn("data-table-head-row", classNames?.headRow),
@@ -3516,17 +3917,20 @@ function DataTable({
                       force: enableColumnResize,
                       lockMax: enableColumnResize
                     });
-                    const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
+                    const freezeOffset = enableColumnFreeze ? resolveHeaderFreezeOffset(header.column, freezeOffsets) : void 0;
                     const freezeStyle = getColumnFreezeStyle(freezeOffset, {
-                      isHeader: true
+                      isHeader: true,
+                      headerTop: header.depth * DATA_TABLE_HEADER_ROW_HEIGHT
                     });
                     const headerStyle = {
                       ...sizeStyle,
                       ...freezeStyle
                     };
-                    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                       "th",
                       {
+                        colSpan: header.colSpan,
+                        rowSpan: header.mergedRowSpan,
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
                         "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
@@ -3539,8 +3943,11 @@ function DataTable({
                           headerClassName
                         ),
                         children: [
-                          header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext()),
-                          canResize ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          header.isPlaceholder ? null : (0, import_react_table3.flexRender)(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          ),
+                          canResize ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             "div",
                             {
                               role: "separator",
@@ -3566,20 +3973,20 @@ function DataTable({
                 },
                 headerGroup.id
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "tbody",
                 {
                   onMouseLeave: clearHover,
                   className: cn("data-table-body", classNames?.body),
-                  children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     EmptySlot,
                     {
                       emptyText,
                       columnCount,
                       classNames
                     }
-                  ) : shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-                    paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  ) : shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                    paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -3587,7 +3994,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                           "td",
                           {
                             colSpan: columnCount,
@@ -3603,7 +4010,7 @@ function DataTable({
                     virtualRows.map((virtualRow) => {
                       const row = rows[virtualRow.index];
                       if (!row) return null;
-                      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         RowSlot,
                         {
                           row,
@@ -3614,7 +4021,7 @@ function DataTable({
                         row.id
                       );
                     }),
-                    paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -3622,7 +4029,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                           "td",
                           {
                             colSpan: columnCount,
@@ -3635,7 +4042,7 @@ function DataTable({
                         )
                       }
                     )
-                  ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     RowSlot,
                     {
                       row,
@@ -3654,10 +4061,10 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/ui/table/components/Table/buildColumnDef.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function SortableHeader({
   label,
   field,
@@ -3666,15 +4073,18 @@ function SortableHeader({
 }) {
   const isActive = sort?.field === field;
   const Icon = isActive ? sort.direction === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "button",
     {
       type: "button",
-      className: cn("SortableHeaderJSX", isActive ? "is-active" : "is-inactive"),
+      className: cn(
+        "SortableHeaderJSX",
+        isActive ? "is-active" : "is-inactive"
+      ),
       onClick: () => onSort(field),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "sortable-header-icon" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: "sortable-header-icon" })
       ]
     }
   );
@@ -3696,6 +4106,8 @@ function buildColumnDef(props, sort, onSort) {
     editable,
     editType,
     editInputProps,
+    kind,
+    cellProps,
     className,
     headerClassName,
     render
@@ -3707,18 +4119,20 @@ function buildColumnDef(props, sort, onSort) {
     ...minWidth != null ? { minSize: minWidth } : {},
     ...maxWidth != null ? { maxSize: maxWidth } : {},
     ...resizable === false ? { enableResizing: false } : {},
-    header: sortable ? () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SortableHeader, { label: children, field, sort, onSort }) : (
+    header: sortable ? () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      SortableHeader,
+      {
+        label: children,
+        field,
+        sort,
+        onSort
+      }
+    ) : (
       // eslint-disable-next-line @typescript-eslint/promise-function-async
       () => children
     ),
-    ...render ? {
-      // eslint-disable-next-line @typescript-eslint/promise-function-async
-      cell: ({ row, getValue }) => render(
-        getValue(),
-        row,
-        row.index
-      )
-    } : {},
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
+    cell: (info) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ResolvedTableCell, { info }),
     meta: {
       align,
       rowSpan,
@@ -3726,21 +4140,63 @@ function buildColumnDef(props, sort, onSort) {
       editable,
       editType,
       editInputProps,
+      kind,
+      cellProps,
+      cellRender: render,
       frozen,
       className,
       headerClassName
     }
   };
 }
+function resolveGroupId(props, index) {
+  if (props.id) return props.id;
+  if (typeof props.header === "string" || typeof props.header === "number") {
+    return `group:${props.header}:${index}`;
+  }
+  return `group:${index}`;
+}
+function buildColumnDefsFromTree(nodes, sort, onSort) {
+  return nodes.map((node, index) => {
+    if (node.type === "leaf") {
+      return buildColumnDef(node.props, sort, onSort);
+    }
+    const childDefs = buildColumnDefsFromTree(node.columns, sort, onSort);
+    const { header, align, headerClassName } = node.props;
+    return {
+      id: resolveGroupId(node.props, index),
+      // eslint-disable-next-line @typescript-eslint/promise-function-async
+      header: () => header,
+      columns: childDefs,
+      enableResizing: false,
+      meta: {
+        align,
+        headerClassName
+      }
+    };
+  });
+}
+function countLeafColumns(nodes) {
+  let count = 0;
+  for (const node of nodes) {
+    if (node.type === "leaf") {
+      count += 1;
+    } else {
+      count += countLeafColumns(node.columns);
+    }
+  }
+  return count;
+}
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/ui/table/components/Table/tableChildTypes.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var TABLE_HEADER_DISPLAY_NAME = "Table.Header";
 var TABLE_BODY_DISPLAY_NAME = "Table.Body";
 var TABLE_COLUMN_DISPLAY_NAME = "Table.Column";
+var TABLE_COLUMN_GROUP_DISPLAY_NAME = "Table.ColumnGroup";
 var TABLE_PAGINATION_DISPLAY_NAME = "Table.Pagination";
 function getComponentDisplayName(type) {
   if (typeof type === "function" || typeof type === "object" && type !== null) {
@@ -3749,16 +4205,19 @@ function getComponentDisplayName(type) {
   return void 0;
 }
 function isTableHeaderElement(child) {
-  return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
+  return (0, import_react10.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
 }
 function isTableBodyElement(child) {
-  return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
+  return (0, import_react10.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
 }
 function isTableColumnElement(child) {
-  return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
+  return (0, import_react10.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
+}
+function isTableColumnGroupElement(child) {
+  return (0, import_react10.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_GROUP_DISPLAY_NAME;
 }
 function isTablePaginationElement(child) {
-  return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
+  return (0, import_react10.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
@@ -3768,7 +4227,7 @@ function parseTableChildren(children) {
     body: null,
     pagination: null
   };
-  for (const child of import_react10.Children.toArray(children)) {
+  for (const child of import_react11.Children.toArray(children)) {
     if (isTableHeaderElement(child)) {
       slots.header = child;
       continue;
@@ -3783,26 +4242,38 @@ function parseTableChildren(children) {
   }
   return slots;
 }
-function flattenColumnElements(children) {
+function walkColumnTreeNodes(children) {
   const result = [];
-  for (const child of import_react10.Children.toArray(children)) {
+  for (const child of import_react11.Children.toArray(children)) {
     if (isTableColumnElement(child)) {
-      result.push(child);
+      result.push({
+        type: "leaf",
+        props: child.props
+      });
       continue;
     }
-    if ((0, import_react10.isValidElement)(child)) {
+    if (isTableColumnGroupElement(child)) {
+      const groupProps = child.props;
+      result.push({
+        type: "group",
+        props: groupProps,
+        columns: walkColumnTreeNodes(groupProps.children)
+      });
+      continue;
+    }
+    if ((0, import_react11.isValidElement)(child)) {
       const nested = child.props.children;
       if (nested != null) {
-        result.push(...flattenColumnElements(nested));
+        result.push(...walkColumnTreeNodes(nested));
       }
     }
   }
   return result;
 }
-function extractColumnElements(header) {
+function extractColumnTree(header) {
   if (!header) return [];
   const { children } = header.props;
-  return flattenColumnElements(children);
+  return walkColumnTreeNodes(children);
 }
 
 // src/components/ui/table/components/Table/TableBody.tsx
@@ -3818,6 +4289,13 @@ function TableColumn(props) {
 }
 TableColumn.displayName = TABLE_COLUMN_DISPLAY_NAME;
 
+// src/components/ui/table/components/Table/TableColumnGroup.tsx
+function TableColumnGroup(props) {
+  void props;
+  return null;
+}
+TableColumnGroup.displayName = TABLE_COLUMN_GROUP_DISPLAY_NAME;
+
 // src/components/ui/table/components/Table/tableDataPipeline.ts
 function sortTableData(data, sort) {
   if (!sort) return data;
@@ -3855,7 +4333,7 @@ function TableHeader(props) {
 TableHeader.displayName = TABLE_HEADER_DISPLAY_NAME;
 
 // src/components/ui/table/components/Table/TablePagination.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function TablePagination({
   page,
   pageSize = 10,
@@ -3867,8 +4345,8 @@ function TablePagination({
   const safePage = Math.min(Math.max(1, page), totalPages);
   const canGoPrev = safePage > 1;
   const canGoNext = safePage < totalPages;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("TablePaginationJSX", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("TablePaginationJSX", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         type: "button",
@@ -3876,15 +4354,15 @@ function TablePagination({
         disabled: !canGoPrev,
         onClick: () => onChange(safePage - 1),
         "aria-label": "Previous page",
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronLeft, { className: "pagination-button-icon" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronLeft, { className: "pagination-button-icon" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "pagination-label", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "pagination-label", children: [
       safePage,
       " / ",
       totalPages
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         type: "button",
@@ -3892,7 +4370,7 @@ function TablePagination({
         disabled: !canGoNext,
         onClick: () => onChange(safePage + 1),
         "aria-label": "Next page",
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRight, { className: "pagination-button-icon" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronRight, { className: "pagination-button-icon" })
       }
     )
   ] });
@@ -3900,7 +4378,7 @@ function TablePagination({
 TablePagination.displayName = TABLE_PAGINATION_DISPLAY_NAME;
 
 // src/components/ui/table/components/Table/Table.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function TableRoot({
   data,
   children,
@@ -3909,12 +4387,12 @@ function TableRoot({
   filteredCount,
   ...dataTableProps
 }) {
-  const { header, pagination: paginationElement } = (0, import_react11.useMemo)(
+  const { header, pagination: paginationElement } = (0, import_react12.useMemo)(
     () => parseTableChildren(children),
     [children]
   );
-  const [sort, setSort] = (0, import_react11.useState)(null);
-  const handleSort = (0, import_react11.useCallback)((field) => {
+  const [sort, setSort] = (0, import_react12.useState)(null);
+  const handleSort = (0, import_react12.useCallback)((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {
         return { field, direction: "asc" };
@@ -3925,25 +4403,25 @@ function TableRoot({
       return null;
     });
   }, []);
-  const columns = (0, import_react11.useMemo)(() => {
-    return extractColumnElements(header).map(
-      (columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
-    );
-  }, [header, sort, handleSort]);
+  const columnTree = (0, import_react12.useMemo)(() => extractColumnTree(header), [header]);
+  const columns = (0, import_react12.useMemo)(
+    () => buildColumnDefsFromTree(columnTree, sort, handleSort),
+    [columnTree, sort, handleSort]
+  );
   const paginationProps = paginationElement?.props;
   const pageSize = paginationProps?.pageSize ?? 10;
   const page = paginationProps?.page ?? 1;
   const resolvedTotalCount = paginationProps?.totalCount ?? totalCount ?? data.length;
-  const tableData = (0, import_react11.useMemo)(() => {
+  const tableData = (0, import_react12.useMemo)(() => {
     const sortedData = sortTableData(data, sort);
     if (!paginationProps) return sortedData;
     return paginateTableData(sortedData, page, pageSize);
   }, [data, sort, paginationProps, page, pageSize]);
-  if (columns.length === 0) {
+  if (countLeafColumns(columnTree) === 0) {
     console.warn("[Table] Declare at least one Table.Column inside Table.Header.");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "TableJSX", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "TableJSX", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       DataTable,
       {
         ...dataTableProps,
@@ -3954,7 +4432,7 @@ function TableRoot({
         className: cn(className, paginationProps && "DataTableJSX--with-pagination")
       }
     ),
-    paginationProps && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    paginationProps && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       TablePagination,
       {
         page,
@@ -3972,13 +4450,19 @@ function createTable() {
     return null;
   }
   Column.displayName = TABLE_COLUMN_DISPLAY_NAME;
+  function ColumnGroup(props) {
+    void props;
+    return null;
+  }
+  ColumnGroup.displayName = TABLE_COLUMN_GROUP_DISPLAY_NAME;
   return Object.assign(
     function BoundTable(props) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableRoot, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableRoot, { ...props });
     },
     {
       Header: TableHeader,
       Column,
+      ColumnGroup,
       Body: TableBody,
       Pagination: TablePagination
     }
@@ -3987,11 +4471,13 @@ function createTable() {
 var Table = Object.assign(TableRoot, {
   Header: TableHeader,
   Column: TableColumn,
+  ColumnGroup: TableColumnGroup,
   Body: TableBody,
   Pagination: TablePagination
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUILTIN_CELL_RENDERERS,
   CELL_SELECTION_EDGES_CLASS,
   DEFAULT_DATA_TABLE_LABELS,
   DEFAULT_TREE_CHILDREN_FIELD,
@@ -4000,6 +4486,7 @@ var Table = Object.assign(TableRoot, {
   DEFAULT_TREE_QTY_FIELD,
   DataTable,
   INLINE_SEARCH_MAX_RESULTS,
+  ResolvedTableCell,
   Table,
   applyCellEdit,
   applyFillData,
@@ -4019,10 +4506,14 @@ var Table = Object.assign(TableRoot, {
   collectFillChanges,
   collectRowSpanColumns,
   collectSearchMatchesInRange,
+  commitCellValue,
+  createCellRendererRegistry,
   createSearchRegex,
   createTable,
   escapeSearchRegex,
   flattenSubtreeRows,
+  formatCellValue,
+  formatDefaultCellValue,
   formatSearchResultLabel,
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
@@ -4044,8 +4535,10 @@ var Table = Object.assign(TableRoot, {
   parseClipboardTSV,
   parseClipboardTSVWithDepths,
   previousSearchIndex,
+  resolveCellRenderer,
   resolveColumnFreezeSide,
   resolveDataTableLabels,
+  resolveHeaderFreezeOffset,
   resolvePasteColumnIds,
   resolveRowSelection,
   resolveRowSpanAt,