react-glide-table 1.6.0 → 2.0.1

package/dist/compound.cjs

@@ -44,6 +44,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;
@@ -98,20 +99,6 @@ function getCellEditDraftValue(value) {
   if (value === null || value === void 0) return "";
   return String(value);
 }
-function applyCellEdit(data, rows, rowIndex, colIndex, raw) {
-  const cell = rows[rowIndex]?.getVisibleCells()[colIndex];
-  if (!cell) return null;
-  const columnDef = cell.column.columnDef;
-  if (!isColumnEditable(columnDef)) return null;
-  const accessorKey = getColumnAccessorKey(columnDef);
-  if (!accessorKey) return null;
-  const parsed = parseCellEditValue(raw, getColumnEditType(columnDef));
-  if (!parsed.ok) return null;
-  const newData = data.map((row) => ({ ...row }));
-  if (!newData[rowIndex]) return null;
-  newData[rowIndex][accessorKey] = parsed.value;
-  return newData;
-}
 
 // src/components/ui/table/features/cell-selection/cellSelection.ts
 var INITIAL_DRAG_STATE = {
@@ -496,10 +483,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/column-resize/columnResize.ts
 function getColumnSizeStyle(size, options) {
@@ -1721,6 +1738,38 @@ function DataTableToolbar({
   ] });
 }
 
+// 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/core/useGlideTable.ts
 var import_react_table2 = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
@@ -1728,6 +1777,39 @@ var import_react7 = require("react");
 
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
 var import_react4 = require("react");
+
+// 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,
   rows,
@@ -1762,21 +1844,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;
     },
@@ -1805,13 +1889,250 @@ function useCellEdit({
   };
 }
 
+// src/components/ui/table/features/cell-render/builtins.tsx
+var import_jsx_runtime6 = 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_runtime6.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_runtime6.jsx)("span", { className: "data-table-cell-uri", children: raw });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)("span", { className: "data-table-cell-image", children: urls.map((url, index) => /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)("span", { className: "data-table-cell-bubble", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.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_runtime6.jsx)("span", { className: "data-table-cell-drilldown", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "span",
+    {
+      className: "data-table-cell-drilldown-item",
+      children: [
+        item.img ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "img",
+          {
+            src: item.img,
+            alt: "",
+            className: "data-table-cell-drilldown-image"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "data-table-cell-drilldown-text", children: item.text })
+      ]
+    },
+    `${index}:${item.text}:${item.img ?? ""}`
+  )) });
+}
+function LoadingCell() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "data-table-cell-loading", "aria-busy": "true" });
+}
+function ProtectedCell() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "data-table-cell-protected", "aria-label": "protected", children: "****" });
+}
+function RowIdCell({ value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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_react5 = require("react");
 
 // 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];
@@ -2693,6 +3014,7 @@ function useGlideTable(options) {
     onDataChange,
     onCellChange,
     onBatchChange,
+    cellRenderers,
     preserveRowSelection = false,
     toggleField,
     childField,
@@ -2918,6 +3240,22 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
+  const cellRendererRegistry = (0, import_react7.useMemo)(
+    () => createCellRendererRegistry(cellRenderers),
+    [cellRenderers]
+  );
+  const commitRenderedCellValue = (0, import_react7.useCallback)(
+    (rowId, columnId, value) => commitCellValue({
+      data: tableData,
+      rows,
+      rowId,
+      columnId,
+      value,
+      onCellChange,
+      onDataChange
+    }),
+    [onCellChange, onDataChange, rows, tableData]
+  );
   const handleCellMouseDownWithCommit = (0, import_react7.useCallback)(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -3154,6 +3492,10 @@ function useGlideTable(options) {
         onCommitEdit: commitEdit,
         onCancelEdit: cancelEdit
       },
+      cellRender: {
+        registry: cellRendererRegistry,
+        commitValue: commitRenderedCellValue
+      },
       expand: {
         enableExpand,
         toggleField,
@@ -3200,6 +3542,8 @@ function useGlideTable(options) {
     startEdit,
     commitEdit,
     cancelEdit,
+    cellRendererRegistry,
+    commitRenderedCellValue,
     enableExpand,
     toggleField,
     expandedRows,
@@ -3265,20 +3609,20 @@ function useGlideTable(options) {
 }
 
 // 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(
@@ -3288,7 +3632,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 })
     }
   );
 }
@@ -3297,7 +3641,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,
@@ -3349,12 +3693,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 = (0, import_react8.useMemo)(
     () => ({ ...rowContextValue, classNames }),
     [rowContextValue, classNames]
   );
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       PendingSlot,
       {
         loadingText,
@@ -3363,7 +3708,7 @@ function DataTable({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ref: rootRef,
@@ -3377,7 +3722,7 @@ function DataTable({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ToolbarSlot,
           {
             filteredCount: filteredCount ?? tableData.length,
@@ -3389,7 +3734,7 @@ function DataTable({
             classNames
           }
         ),
-        enableInlineSearch ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        enableInlineSearch ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           DataTableSearch,
           {
             showSearch: inlineSearch.showSearch,
@@ -3411,14 +3756,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),
@@ -3430,17 +3775,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),
@@ -3453,8 +3801,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",
@@ -3480,20 +3831,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,
@@ -3501,7 +3852,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,
@@ -3517,7 +3868,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,
@@ -3528,7 +3879,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,
@@ -3536,7 +3887,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,
@@ -3549,7 +3900,7 @@ function DataTable({
                         )
                       }
                     )
-                  ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     RowSlot,
                     {
                       row,
@@ -3568,10 +3919,44 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
+
+// src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
+var import_react9 = require("react");
+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_react9.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/components/Table/buildColumnDef.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function SortableHeader({
   label,
   field,
@@ -3580,15 +3965,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" })
       ]
     }
   );
@@ -3610,6 +3998,8 @@ function buildColumnDef(props, sort, onSort) {
     editable,
     editType,
     editInputProps,
+    kind,
+    cellProps,
     className,
     headerClassName,
     render
@@ -3621,18 +4011,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,
@@ -3640,21 +4032,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) {
@@ -3663,16 +4097,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
@@ -3682,7 +4119,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;
@@ -3697,26 +4134,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 (isTableColumnGroupElement(child)) {
+      const groupProps = child.props;
+      result.push({
+        type: "group",
+        props: groupProps,
+        columns: walkColumnTreeNodes(groupProps.children)
+      });
       continue;
     }
-    if ((0, import_react10.isValidElement)(child)) {
+    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
@@ -3732,6 +4181,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;
@@ -3769,7 +4225,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,
@@ -3781,8 +4237,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",
@@ -3790,15 +4246,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",
@@ -3806,7 +4262,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" })
       }
     )
   ] });
@@ -3814,7 +4270,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,
@@ -3823,12 +4279,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" };
@@ -3839,25 +4295,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,
@@ -3868,7 +4324,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,
@@ -3886,13 +4342,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
     }
@@ -3901,6 +4363,7 @@ function createTable() {
 var Table = Object.assign(TableRoot, {
   Header: TableHeader,
   Column: TableColumn,
+  ColumnGroup: TableColumnGroup,
   Body: TableBody,
   Pagination: TablePagination
 });