react-glide-table 1.6.0 → 2.0.1

package/dist/index.js

@@ -51,6 +51,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;
@@ -105,6 +106,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,
@@ -140,21 +172,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;
     },
@@ -183,6 +217,218 @@ function useCellEdit({
   };
 }
 
+// src/components/ui/table/features/cell-render/builtins.tsx
+import { jsx, jsxs } from "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__ */ 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__ */ jsx("span", { className: "data-table-cell-uri", children: raw });
+  }
+  return /* @__PURE__ */ 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__ */ jsx("span", { className: "data-table-cell-image", children: urls.map((url, index) => /* @__PURE__ */ 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__ */ jsx("span", { className: "data-table-cell-bubble", children: items.map((item, index) => /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "data-table-cell-drilldown", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "data-table-cell-drilldown-item",
+      children: [
+        item.img ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.img,
+            alt: "",
+            className: "data-table-cell-drilldown-image"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { className: "data-table-cell-drilldown-text", children: item.text })
+      ]
+    },
+    `${index}:${item.text}:${item.img ?? ""}`
+  )) });
+}
+function LoadingCell() {
+  return /* @__PURE__ */ jsx("span", { className: "data-table-cell-loading", "aria-busy": "true" });
+}
+function ProtectedCell() {
+  return /* @__PURE__ */ jsx("span", { className: "data-table-cell-protected", "aria-label": "protected", children: "****" });
+}
+function RowIdCell({ value }) {
+  return /* @__PURE__ */ 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
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
@@ -492,9 +738,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];
@@ -1118,10 +1389,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;
@@ -1872,6 +2173,7 @@ function useGlideTable(options) {
     onDataChange,
     onCellChange,
     onBatchChange,
+    cellRenderers,
     preserveRowSelection = false,
     toggleField,
     childField,
@@ -2097,6 +2399,22 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
+  const cellRendererRegistry = useMemo3(
+    () => createCellRendererRegistry(cellRenderers),
+    [cellRenderers]
+  );
+  const commitRenderedCellValue = useCallback4(
+    (rowId, columnId, value) => commitCellValue({
+      data: tableData,
+      rows,
+      rowId,
+      columnId,
+      value,
+      onCellChange,
+      onDataChange
+    }),
+    [onCellChange, onDataChange, rows, tableData]
+  );
   const handleCellMouseDownWithCommit = useCallback4(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -2333,6 +2651,10 @@ function useGlideTable(options) {
         onCommitEdit: commitEdit,
         onCancelEdit: cancelEdit
       },
+      cellRender: {
+        registry: cellRendererRegistry,
+        commitValue: commitRenderedCellValue
+      },
       expand: {
         enableExpand,
         toggleField,
@@ -2379,6 +2701,8 @@ function useGlideTable(options) {
     startEdit,
     commitEdit,
     cancelEdit,
+    cellRendererRegistry,
+    commitRenderedCellValue,
     enableExpand,
     toggleField,
     expandedRows,
@@ -2443,6 +2767,60 @@ function useGlideTable(options) {
   };
 }
 
+// src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
+import { useCallback as useCallback5 } from "react";
+
+// src/components/ui/table/DataTableContext.tsx
+import { createContext, use } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DataTableContext = createContext(null);
+function useDataTableRowContext() {
+  const context = use(DataTableContext);
+  if (!context) {
+    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
+  }
+  return context;
+}
+function DataTableContextProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(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 = useCallback5(
+    (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 ?? {};
@@ -2464,28 +2842,10 @@ import { useMemo as useMemo4 } from "react";
 import { flexRender } from "@tanstack/react-table";
 import { useEffect as useEffect6, useRef as useRef6 } from "react";
 
-// src/components/ui/table/DataTableContext.tsx
-import { createContext, use } from "react";
-import { jsx } from "react/jsx-runtime";
-var DataTableContext = createContext(null);
-function useDataTableRowContext() {
-  const context = use(DataTableContext);
-  if (!context) {
-    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
-  }
-  return context;
-}
-function DataTableContextProvider({
-  value,
-  children
-}) {
-  return /* @__PURE__ */ jsx(DataTableContext, { value, children });
-}
-
 // src/components/ui/table/components/icons.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ChevronDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       className,
@@ -2498,12 +2858,12 @@ function ChevronDown({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
 function ChevronUp({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       className,
@@ -2516,12 +2876,12 @@ function ChevronUp({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" })
+      children: /* @__PURE__ */ jsx3("path", { d: "m18 15-6-6-6 6" })
     }
   );
 }
 function ChevronLeft({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       className,
@@ -2534,12 +2894,12 @@ function ChevronLeft({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx2("path", { d: "m15 18-6-6 6-6" })
+      children: /* @__PURE__ */ jsx3("path", { d: "m15 18-6-6 6-6" })
     }
   );
 }
 function ChevronRight({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       className,
@@ -2552,12 +2912,12 @@ function ChevronRight({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" })
+      children: /* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6" })
     }
   );
 }
 function ArrowUp({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       className,
@@ -2571,14 +2931,14 @@ function ArrowUp({ className, "aria-hidden": ariaHidden = true }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" }),
-        /* @__PURE__ */ jsx2("path", { d: "M12 21V9" })
+        /* @__PURE__ */ jsx3("path", { d: "m18 15-6-6-6 6" }),
+        /* @__PURE__ */ jsx3("path", { d: "M12 21V9" })
       ]
     }
   );
 }
 function ArrowDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       className,
@@ -2592,14 +2952,14 @@ function ArrowDown({ className, "aria-hidden": ariaHidden = true }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }),
-        /* @__PURE__ */ jsx2("path", { d: "M12 3v12" })
+        /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" }),
+        /* @__PURE__ */ jsx3("path", { d: "M12 3v12" })
       ]
     }
   );
 }
 function ArrowUpDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       className,
@@ -2613,10 +2973,10 @@ function ArrowUpDown({ className, "aria-hidden": ariaHidden = true }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx2("path", { d: "m21 16-4 4-4-4" }),
-        /* @__PURE__ */ jsx2("path", { d: "M17 20V4" }),
-        /* @__PURE__ */ jsx2("path", { d: "m3 8 4-4 4 4" }),
-        /* @__PURE__ */ jsx2("path", { d: "M7 4v16" })
+        /* @__PURE__ */ jsx3("path", { d: "m21 16-4 4-4-4" }),
+        /* @__PURE__ */ jsx3("path", { d: "M17 20V4" }),
+        /* @__PURE__ */ jsx3("path", { d: "m3 8 4-4 4 4" }),
+        /* @__PURE__ */ jsx3("path", { d: "M7 4v16" })
       ]
     }
   );
@@ -2628,7 +2988,7 @@ function cn(...inputs) {
 }
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function isInteractiveMouseTarget(target) {
   if (!(target instanceof Element)) return false;
   const interactiveSelector = [
@@ -2780,7 +3140,7 @@ function DataTableRow({
     editInputRef.current?.focus();
     editInputRef.current?.select();
   }, [isRowEditing, editingCell?.colIndex]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "tr",
     {
       ref: measureElement,
@@ -2874,7 +3234,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__ */ jsxs2(
+        return /* @__PURE__ */ jsxs3(
           "td",
           {
             "data-row-index": rowIndex,
@@ -2948,7 +3308,7 @@ function DataTableRow({
               classNames?.cell
             ),
             children: [
-              isEditing ? /* @__PURE__ */ jsx3(
+              isEditing ? /* @__PURE__ */ jsx4(
                 "input",
                 {
                   ...editInputProps,
@@ -2991,8 +3351,8 @@ function DataTableRow({
                     onCommitEdit(event.currentTarget.value);
                   }
                 }
-              ) : isExpandCell && enableExpand ? /* @__PURE__ */ jsxs2("div", { className: cn("expand-cell", classNames?.expandCell), children: [
-                /* @__PURE__ */ jsxs2(
+              ) : isExpandCell && enableExpand ? /* @__PURE__ */ jsxs3("div", { className: cn("expand-cell", classNames?.expandCell), children: [
+                /* @__PURE__ */ jsxs3(
                   "div",
                   {
                     className: cn(
@@ -3000,7 +3360,7 @@ function DataTableRow({
                       classNames?.expandCellContent
                     ),
                     children: [
-                      rowLevel > 0 && /* @__PURE__ */ jsx3(
+                      rowLevel > 0 && /* @__PURE__ */ jsx4(
                         "span",
                         {
                           className: cn(
@@ -3010,7 +3370,7 @@ function DataTableRow({
                           children: "\xB7"
                         }
                       ),
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsx4(
                         "div",
                         {
                           className: cn(
@@ -3023,7 +3383,7 @@ function DataTableRow({
                     ]
                   }
                 ),
-                canExpand && expandKey && /* @__PURE__ */ jsx3(
+                canExpand && expandKey && /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -3037,7 +3397,7 @@ function DataTableRow({
                       onToggleExpand?.(expandKey);
                     },
                     onMouseDown: (event) => event.stopPropagation(),
-                    children: isExpanded ? /* @__PURE__ */ jsx3(
+                    children: isExpanded ? /* @__PURE__ */ jsx4(
                       ChevronUp,
                       {
                         className: cn(
@@ -3045,7 +3405,7 @@ function DataTableRow({
                           classNames?.expandToggleIcon
                         )
                       }
-                    ) : /* @__PURE__ */ jsx3(
+                    ) : /* @__PURE__ */ jsx4(
                       ChevronDown,
                       {
                         className: cn(
@@ -3057,7 +3417,7 @@ function DataTableRow({
                   }
                 )
               ] }) : flexRender(cell.column.columnDef.cell, cell.getContext()),
-              isBottomRightCell && /* @__PURE__ */ jsx3(
+              isBottomRightCell && /* @__PURE__ */ jsx4(
                 "div",
                 {
                   role: "presentation",
@@ -3079,9 +3439,9 @@ function DataTableRow({
 }
 
 // src/components/ui/table/components/DataTable/DataTableSearch.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function SearchCloseIcon({ className }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "svg",
     {
       className,
@@ -3095,8 +3455,8 @@ function SearchCloseIcon({ className }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
-        /* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
+        /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
       ]
     }
   );
@@ -3142,15 +3502,15 @@ function DataTableSearch({
       onPrevious();
     }
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn("data-table-search", classNames?.search),
       role: "search",
       onMouseDown: (event) => event.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: "data-table-search-row", children: [
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs4("div", { className: "data-table-search-row", children: [
+          /* @__PURE__ */ jsx5(
             "input",
             {
               ref: searchInputRef,
@@ -3166,7 +3526,7 @@ function DataTableSearch({
               onKeyDown: handleKeyDown
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -3176,10 +3536,10 @@ function DataTableSearch({
                 event.stopPropagation();
                 onPrevious();
               },
-              children: /* @__PURE__ */ jsx4(ChevronUp, { className: "data-table-search-icon" })
+              children: /* @__PURE__ */ jsx5(ChevronUp, { className: "data-table-search-icon" })
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -3189,10 +3549,10 @@ function DataTableSearch({
                 event.stopPropagation();
                 onNext();
               },
-              children: /* @__PURE__ */ jsx4(ChevronDown, { className: "data-table-search-icon" })
+              children: /* @__PURE__ */ jsx5(ChevronDown, { className: "data-table-search-icon" })
             }
           ),
-          canClose ? /* @__PURE__ */ jsx4(
+          canClose ? /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -3202,11 +3562,11 @@ function DataTableSearch({
                 event.stopPropagation();
                 onClose();
               },
-              children: /* @__PURE__ */ jsx4(SearchCloseIcon, { className: "data-table-search-icon" })
+              children: /* @__PURE__ */ jsx5(SearchCloseIcon, { className: "data-table-search-icon" })
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: cn("data-table-search-status", classNames?.searchStatus),
@@ -3214,7 +3574,7 @@ function DataTableSearch({
             children: resultString
           }
         ),
-        searchStatus !== void 0 ? /* @__PURE__ */ jsx4(
+        searchStatus !== void 0 ? /* @__PURE__ */ jsx5(
           "div",
           {
             className: cn(
@@ -3225,7 +3585,7 @@ function DataTableSearch({
             "aria-valuemin": 0,
             "aria-valuemax": 100,
             "aria-valuenow": progress,
-            children: /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsx5(
               "div",
               {
                 className: "data-table-search-progress-bar",
@@ -3240,7 +3600,7 @@ function DataTableSearch({
 }
 
 // src/components/ui/table/components/DataTable/DataTableToolbar.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function DataTableToolbar({
   filteredCount,
   totalCount,
@@ -3258,39 +3618,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__ */ jsxs4("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
-    /* @__PURE__ */ jsxs4("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
-      hasCount && /* @__PURE__ */ jsx5("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsx5("span", { className: "toolbar-count-primary", children: displayFiltered }),
-        /* @__PURE__ */ jsxs4("span", { className: "toolbar-count-placeholder", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
+      hasCount && /* @__PURE__ */ jsx6("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+        /* @__PURE__ */ jsx6("span", { className: "toolbar-count-primary", children: displayFiltered }),
+        /* @__PURE__ */ jsxs5("span", { className: "toolbar-count-placeholder", children: [
           " / ",
           totalCount
         ] })
-      ] }) : /* @__PURE__ */ jsx5("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
+      ] }) : /* @__PURE__ */ jsx6("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
       summary
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
-      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ jsx5("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
-      hasToolbar && /* @__PURE__ */ jsx5("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
+    /* @__PURE__ */ jsxs5("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
+      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ jsx6("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
+      hasToolbar && /* @__PURE__ */ jsx6("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
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function DefaultScroll({
   scrollRef,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx6("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
+  return /* @__PURE__ */ jsx7("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
 }
 function DefaultPending({
   loadingText,
   className,
   classNames
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: cn(
@@ -3300,7 +3692,7 @@ function DefaultPending({
         classNames?.pending,
         className
       ),
-      children: /* @__PURE__ */ jsx6("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
+      children: /* @__PURE__ */ jsx7("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
     }
   );
 }
@@ -3309,7 +3701,7 @@ function DefaultEmpty({
   columnCount,
   classNames
 }) {
-  return /* @__PURE__ */ jsx6("tr", { children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7("tr", { children: /* @__PURE__ */ jsx7(
     "td",
     {
       colSpan: columnCount,
@@ -3361,12 +3753,13 @@ function DataTable({
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
   const freezeOffsets = rowContextValue.columnFreeze.offsets;
+  const headerGroups = getMergedHeaderGroups(table.getHeaderGroups());
   const contextValue = useMemo4(
     () => ({ ...rowContextValue, classNames }),
     [rowContextValue, classNames]
   );
   if (isPending) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       PendingSlot,
       {
         loadingText,
@@ -3375,7 +3768,7 @@ function DataTable({
       }
     );
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: rootRef,
@@ -3389,7 +3782,7 @@ function DataTable({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           ToolbarSlot,
           {
             filteredCount: filteredCount ?? tableData.length,
@@ -3401,7 +3794,7 @@ function DataTable({
             classNames
           }
         ),
-        enableInlineSearch ? /* @__PURE__ */ jsx6(
+        enableInlineSearch ? /* @__PURE__ */ jsx7(
           DataTableSearch,
           {
             showSearch: inlineSearch.showSearch,
@@ -3423,14 +3816,14 @@ function DataTable({
             onPrevious: inlineSearch.goToPrevious
           }
         ) : null,
-        /* @__PURE__ */ jsx6(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsx7(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ jsxs6(
           "table",
           {
             className: cn("data-table", classNames?.table),
             style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
             onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
             children: [
-              /* @__PURE__ */ jsx6("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7("thead", { className: cn("data-table-head", classNames?.head), children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx7(
                 "tr",
                 {
                   className: cn("data-table-head-row", classNames?.headRow),
@@ -3442,17 +3835,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__ */ jsxs5(
+                    return /* @__PURE__ */ jsxs6(
                       "th",
                       {
+                        colSpan: header.colSpan,
+                        rowSpan: header.mergedRowSpan,
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
                         "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
@@ -3465,8 +3861,11 @@ function DataTable({
                           headerClassName
                         ),
                         children: [
-                          header.isPlaceholder ? null : flexRender2(header.column.columnDef.header, header.getContext()),
-                          canResize ? /* @__PURE__ */ jsx6(
+                          header.isPlaceholder ? null : flexRender2(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          ),
+                          canResize ? /* @__PURE__ */ jsx7(
                             "div",
                             {
                               role: "separator",
@@ -3492,20 +3891,20 @@ function DataTable({
                 },
                 headerGroup.id
               )) }),
-              /* @__PURE__ */ jsx6(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx7(
                 "tbody",
                 {
                   onMouseLeave: clearHover,
                   className: cn("data-table-body", classNames?.body),
-                  children: rows.length === 0 ? /* @__PURE__ */ jsx6(
+                  children: rows.length === 0 ? /* @__PURE__ */ jsx7(
                     EmptySlot,
                     {
                       emptyText,
                       columnCount,
                       classNames
                     }
-                  ) : shouldVirtualize ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                    paddingTop > 0 && /* @__PURE__ */ jsx6(
+                  ) : shouldVirtualize ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                    paddingTop > 0 && /* @__PURE__ */ jsx7(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -3513,7 +3912,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ jsx6(
+                        children: /* @__PURE__ */ jsx7(
                           "td",
                           {
                             colSpan: columnCount,
@@ -3529,7 +3928,7 @@ function DataTable({
                     virtualRows.map((virtualRow) => {
                       const row = rows[virtualRow.index];
                       if (!row) return null;
-                      return /* @__PURE__ */ jsx6(
+                      return /* @__PURE__ */ jsx7(
                         RowSlot,
                         {
                           row,
@@ -3540,7 +3939,7 @@ function DataTable({
                         row.id
                       );
                     }),
-                    paddingBottom > 0 && /* @__PURE__ */ jsx6(
+                    paddingBottom > 0 && /* @__PURE__ */ jsx7(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -3548,7 +3947,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ jsx6(
+                        children: /* @__PURE__ */ jsx7(
                           "td",
                           {
                             colSpan: columnCount,
@@ -3561,7 +3960,7 @@ function DataTable({
                         )
                       }
                     )
-                  ] }) : rows.map((row) => /* @__PURE__ */ jsx6(
+                  ] }) : rows.map((row) => /* @__PURE__ */ jsx7(
                     RowSlot,
                     {
                       row,
@@ -3580,10 +3979,10 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-import { useCallback as useCallback5, useMemo as useMemo5, useState as useState5 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo5, useState as useState5 } from "react";
 
 // src/components/ui/table/components/Table/buildColumnDef.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function SortableHeader({
   label,
   field,
@@ -3592,15 +3991,18 @@ function SortableHeader({
 }) {
   const isActive = sort?.field === field;
   const Icon = isActive ? sort.direction === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "button",
     {
       type: "button",
-      className: cn("SortableHeaderJSX", isActive ? "is-active" : "is-inactive"),
+      className: cn(
+        "SortableHeaderJSX",
+        isActive ? "is-active" : "is-inactive"
+      ),
       onClick: () => onSort(field),
       children: [
-        /* @__PURE__ */ jsx7("span", { children: label }),
-        /* @__PURE__ */ jsx7(Icon, { className: "sortable-header-icon" })
+        /* @__PURE__ */ jsx8("span", { children: label }),
+        /* @__PURE__ */ jsx8(Icon, { className: "sortable-header-icon" })
       ]
     }
   );
@@ -3622,6 +4024,8 @@ function buildColumnDef(props, sort, onSort) {
     editable,
     editType,
     editInputProps,
+    kind,
+    cellProps,
     className,
     headerClassName,
     render
@@ -3633,18 +4037,20 @@ function buildColumnDef(props, sort, onSort) {
     ...minWidth != null ? { minSize: minWidth } : {},
     ...maxWidth != null ? { maxSize: maxWidth } : {},
     ...resizable === false ? { enableResizing: false } : {},
-    header: sortable ? () => /* @__PURE__ */ jsx7(SortableHeader, { label: children, field, sort, onSort }) : (
+    header: sortable ? () => /* @__PURE__ */ jsx8(
+      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__ */ jsx8(ResolvedTableCell, { info }),
     meta: {
       align,
       rowSpan,
@@ -3652,12 +4058,53 @@ 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
 import { Children, isValidElement as isValidElement2 } from "react";
@@ -3667,6 +4114,7 @@ import { isValidElement } from "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) {
@@ -3683,6 +4131,9 @@ function isTableBodyElement(child) {
 function isTableColumnElement(child) {
   return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
 }
+function isTableColumnGroupElement(child) {
+  return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_GROUP_DISPLAY_NAME;
+}
 function isTablePaginationElement(child) {
   return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
 }
@@ -3709,26 +4160,38 @@ function parseTableChildren(children) {
   }
   return slots;
 }
-function flattenColumnElements(children) {
+function walkColumnTreeNodes(children) {
   const result = [];
   for (const child of Children.toArray(children)) {
     if (isTableColumnElement(child)) {
-      result.push(child);
+      result.push({
+        type: "leaf",
+        props: child.props
+      });
+      continue;
+    }
+    if (isTableColumnGroupElement(child)) {
+      const groupProps = child.props;
+      result.push({
+        type: "group",
+        props: groupProps,
+        columns: walkColumnTreeNodes(groupProps.children)
+      });
       continue;
     }
     if (isValidElement2(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
@@ -3744,6 +4207,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;
@@ -3781,7 +4251,7 @@ function TableHeader(props) {
 TableHeader.displayName = TABLE_HEADER_DISPLAY_NAME;
 
 // src/components/ui/table/components/Table/TablePagination.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function TablePagination({
   page,
   pageSize = 10,
@@ -3793,8 +4263,8 @@ function TablePagination({
   const safePage = Math.min(Math.max(1, page), totalPages);
   const canGoPrev = safePage > 1;
   const canGoNext = safePage < totalPages;
-  return /* @__PURE__ */ jsxs7("div", { className: cn("TablePaginationJSX", className), children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8("div", { className: cn("TablePaginationJSX", className), children: [
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -3802,15 +4272,15 @@ function TablePagination({
         disabled: !canGoPrev,
         onClick: () => onChange(safePage - 1),
         "aria-label": "Previous page",
-        children: /* @__PURE__ */ jsx8(ChevronLeft, { className: "pagination-button-icon" })
+        children: /* @__PURE__ */ jsx9(ChevronLeft, { className: "pagination-button-icon" })
       }
     ),
-    /* @__PURE__ */ jsxs7("span", { className: "pagination-label", children: [
+    /* @__PURE__ */ jsxs8("span", { className: "pagination-label", children: [
       safePage,
       " / ",
       totalPages
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -3818,7 +4288,7 @@ function TablePagination({
         disabled: !canGoNext,
         onClick: () => onChange(safePage + 1),
         "aria-label": "Next page",
-        children: /* @__PURE__ */ jsx8(ChevronRight, { className: "pagination-button-icon" })
+        children: /* @__PURE__ */ jsx9(ChevronRight, { className: "pagination-button-icon" })
       }
     )
   ] });
@@ -3826,7 +4296,7 @@ function TablePagination({
 TablePagination.displayName = TABLE_PAGINATION_DISPLAY_NAME;
 
 // src/components/ui/table/components/Table/Table.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function TableRoot({
   data,
   children,
@@ -3840,7 +4310,7 @@ function TableRoot({
     [children]
   );
   const [sort, setSort] = useState5(null);
-  const handleSort = useCallback5((field) => {
+  const handleSort = useCallback6((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {
         return { field, direction: "asc" };
@@ -3851,11 +4321,11 @@ function TableRoot({
       return null;
     });
   }, []);
-  const columns = useMemo5(() => {
-    return extractColumnElements(header).map(
-      (columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
-    );
-  }, [header, sort, handleSort]);
+  const columnTree = useMemo5(() => extractColumnTree(header), [header]);
+  const columns = useMemo5(
+    () => buildColumnDefsFromTree(columnTree, sort, handleSort),
+    [columnTree, sort, handleSort]
+  );
   const paginationProps = paginationElement?.props;
   const pageSize = paginationProps?.pageSize ?? 10;
   const page = paginationProps?.page ?? 1;
@@ -3865,11 +4335,11 @@ function TableRoot({
     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__ */ jsxs8("div", { className: "TableJSX", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9("div", { className: "TableJSX", children: [
+    /* @__PURE__ */ jsx10(
       DataTable,
       {
         ...dataTableProps,
@@ -3880,7 +4350,7 @@ function TableRoot({
         className: cn(className, paginationProps && "DataTableJSX--with-pagination")
       }
     ),
-    paginationProps && /* @__PURE__ */ jsx9(
+    paginationProps && /* @__PURE__ */ jsx10(
       TablePagination,
       {
         page,
@@ -3898,13 +4368,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__ */ jsx9(TableRoot, { ...props });
+      return /* @__PURE__ */ jsx10(TableRoot, { ...props });
     },
     {
       Header: TableHeader,
       Column,
+      ColumnGroup,
       Body: TableBody,
       Pagination: TablePagination
     }
@@ -3913,10 +4389,12 @@ function createTable() {
 var Table = Object.assign(TableRoot, {
   Header: TableHeader,
   Column: TableColumn,
+  ColumnGroup: TableColumnGroup,
   Body: TableBody,
   Pagination: TablePagination
 });
 export {
+  BUILTIN_CELL_RENDERERS,
   CELL_SELECTION_EDGES_CLASS,
   DEFAULT_DATA_TABLE_LABELS,
   DEFAULT_TREE_CHILDREN_FIELD,
@@ -3925,6 +4403,7 @@ export {
   DEFAULT_TREE_QTY_FIELD,
   DataTable,
   INLINE_SEARCH_MAX_RESULTS,
+  ResolvedTableCell,
   Table,
   applyCellEdit,
   applyFillData,
@@ -3944,10 +4423,14 @@ export {
   collectFillChanges,
   collectRowSpanColumns,
   collectSearchMatchesInRange,
+  commitCellValue,
+  createCellRendererRegistry,
   createSearchRegex,
   createTable,
   escapeSearchRegex,
   flattenSubtreeRows,
+  formatCellValue,
+  formatDefaultCellValue,
   formatSearchResultLabel,
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
@@ -3969,8 +4452,10 @@ export {
   parseClipboardTSV,
   parseClipboardTSVWithDepths,
   previousSearchIndex,
+  resolveCellRenderer,
   resolveColumnFreezeSide,
   resolveDataTableLabels,
+  resolveHeaderFreezeOffset,
   resolvePasteColumnIds,
   resolveRowSelection,
   resolveRowSpanAt,