react-glide-table 1.6.0 → 1.7.0

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;
@@ -497,7 +498,7 @@ function getColumnFreezeStyle(offset, options) {
     position: "sticky",
     ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
     zIndex: zBase + offset.stack,
-    ...options?.isHeader ? { top: 0 } : {}
+    ...options?.isHeader ? { top: options.headerTop ?? 0 } : {}
   };
 }
 
@@ -1721,6 +1722,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");
@@ -3349,6 +3382,7 @@ 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]
@@ -3418,7 +3452,7 @@ function DataTable({
             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_runtime6.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: headerGroups.map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "tr",
                 {
                   className: cn("data-table-head-row", classNames?.headRow),
@@ -3432,7 +3466,8 @@ function DataTable({
                     });
                     const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
                     const freezeStyle = getColumnFreezeStyle(freezeOffset, {
-                      isHeader: true
+                      isHeader: true,
+                      headerTop: header.depth * DATA_TABLE_HEADER_ROW_HEIGHT
                     });
                     const headerStyle = {
                       ...sizeStyle,
@@ -3441,6 +3476,8 @@ function DataTable({
                     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                       "th",
                       {
+                        colSpan: header.colSpan,
+                        rowSpan: header.mergedRowSpan,
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
                         "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
@@ -3646,6 +3683,46 @@ function buildColumnDef(props, sort, onSort) {
     }
   };
 }
+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),
+      header: (
+        // eslint-disable-next-line @typescript-eslint/promise-function-async
+        () => 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");
@@ -3655,6 +3732,7 @@ var import_react9 = 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) {
@@ -3671,6 +3749,9 @@ function isTableBodyElement(child) {
 function isTableColumnElement(child) {
   return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
 }
+function isTableColumnGroupElement(child) {
+  return (0, import_react9.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;
 }
@@ -3697,26 +3778,38 @@ function parseTableChildren(children) {
   }
   return slots;
 }
-function flattenColumnElements(children) {
+function walkColumnTreeNodes(children) {
   const result = [];
   for (const child of import_react10.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)) {
       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 +3825,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;
@@ -3839,11 +3939,11 @@ 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_react11.useMemo)(() => extractColumnTree(header), [header]);
+  const columns = (0, import_react11.useMemo)(
+    () => buildColumnDefsFromTree(columnTree, sort, handleSort),
+    [columnTree, sort, handleSort]
+  );
   const paginationProps = paginationElement?.props;
   const pageSize = paginationProps?.pageSize ?? 10;
   const page = paginationProps?.page ?? 1;
@@ -3853,7 +3953,7 @@ 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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "TableJSX", children: [
@@ -3886,6 +3986,11 @@ 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 });
@@ -3893,6 +3998,7 @@ function createTable() {
     {
       Header: TableHeader,
       Column,
+      ColumnGroup,
       Body: TableBody,
       Pagination: TablePagination
     }
@@ -3901,6 +4007,7 @@ function createTable() {
 var Table = Object.assign(TableRoot, {
   Header: TableHeader,
   Column: TableColumn,
+  ColumnGroup: TableColumnGroup,
   Body: TableBody,
   Pagination: TablePagination
 });

package/dist/compound.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { h as DataTableProps, T as TableColumnProps, n as TableProps } from './types-tkOzBZ4V.cjs';
-export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableScrollSlotProps, j as DataTableSlots, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload, l as SearchResultItem } from './types-tkOzBZ4V.cjs';
+import { h as DataTableProps, n as TableColumnProps, T as TableColumnGroupProps, o as TableProps } from './types-Cs9MiZs1.cjs';
+export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableScrollSlotProps, j as DataTableSlots, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload, l as SearchResultItem } from './types-Cs9MiZs1.cjs';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**
@@ -25,6 +25,12 @@ declare namespace TableColumn {
     var displayName: string;
 }
 
+/** Used only inside Table.Header. Groups leaf columns under a multi-row header; does not render DOM. */
+declare function TableColumnGroup(props: TableColumnGroupProps): null;
+declare namespace TableColumnGroup {
+    var displayName: string;
+}
+
 type TableHeaderProps = {
     children: ReactNode;
 };
@@ -49,6 +55,7 @@ declare namespace TablePagination {
 type TableCompoundComponent<T extends Record<string, unknown>> = ((props: TableProps<T>) => ReactElement) & {
     Header: typeof TableHeader;
     Column: <K extends string>(props: TableColumnProps<T, K>) => null;
+    ColumnGroup: (props: TableColumnGroupProps) => null;
     Body: typeof TableBody;
     Pagination: typeof TablePagination;
 };
@@ -57,8 +64,9 @@ declare function createTable<T extends Record<string, unknown>>(): TableCompound
 declare const Table: typeof TableRoot & {
     Header: typeof TableHeader;
     Column: typeof TableColumn;
+    ColumnGroup: typeof TableColumnGroup;
     Body: typeof TableBody;
     Pagination: typeof TablePagination;
 };
 
-export { DataTable, DataTableProps, Table, TableColumnProps, type TableCompoundComponent, TableProps, createTable };
+export { DataTable, DataTableProps, Table, TableColumnGroupProps, TableColumnProps, type TableCompoundComponent, TableProps, createTable };

package/dist/compound.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { h as DataTableProps, T as TableColumnProps, n as TableProps } from './types-tkOzBZ4V.js';
-export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableScrollSlotProps, j as DataTableSlots, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload, l as SearchResultItem } from './types-tkOzBZ4V.js';
+import { h as DataTableProps, n as TableColumnProps, T as TableColumnGroupProps, o as TableProps } from './types-Cs9MiZs1.js';
+export { b as ColumnFreezeMeta, d as ColumnFreezeSide, e as DataTableClassNames, g as DataTableLabels, i as DataTableScrollSlotProps, j as DataTableSlots, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload, l as SearchResultItem } from './types-Cs9MiZs1.js';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**
@@ -25,6 +25,12 @@ declare namespace TableColumn {
     var displayName: string;
 }
 
+/** Used only inside Table.Header. Groups leaf columns under a multi-row header; does not render DOM. */
+declare function TableColumnGroup(props: TableColumnGroupProps): null;
+declare namespace TableColumnGroup {
+    var displayName: string;
+}
+
 type TableHeaderProps = {
     children: ReactNode;
 };
@@ -49,6 +55,7 @@ declare namespace TablePagination {
 type TableCompoundComponent<T extends Record<string, unknown>> = ((props: TableProps<T>) => ReactElement) & {
     Header: typeof TableHeader;
     Column: <K extends string>(props: TableColumnProps<T, K>) => null;
+    ColumnGroup: (props: TableColumnGroupProps) => null;
     Body: typeof TableBody;
     Pagination: typeof TablePagination;
 };
@@ -57,8 +64,9 @@ declare function createTable<T extends Record<string, unknown>>(): TableCompound
 declare const Table: typeof TableRoot & {
     Header: typeof TableHeader;
     Column: typeof TableColumn;
+    ColumnGroup: typeof TableColumnGroup;
     Body: typeof TableBody;
     Pagination: typeof TablePagination;
 };
 
-export { DataTable, DataTableProps, Table, TableColumnProps, type TableCompoundComponent, TableProps, createTable };
+export { DataTable, DataTableProps, Table, TableColumnGroupProps, TableColumnProps, type TableCompoundComponent, TableProps, createTable };

package/dist/compound.js

@@ -16,6 +16,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;
@@ -469,7 +470,7 @@ function getColumnFreezeStyle(offset, options) {
     position: "sticky",
     ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
     zIndex: zBase + offset.stack,
-    ...options?.isHeader ? { top: 0 } : {}
+    ...options?.isHeader ? { top: options.headerTop ?? 0 } : {}
   };
 }
 
@@ -1693,6 +1694,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
 import {
   getCoreRowModel,
@@ -3339,6 +3372,7 @@ 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]
@@ -3408,7 +3442,7 @@ function DataTable({
             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__ */ jsx6("thead", { className: cn("data-table-head", classNames?.head), children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx6(
                 "tr",
                 {
                   className: cn("data-table-head-row", classNames?.headRow),
@@ -3422,7 +3456,8 @@ function DataTable({
                     });
                     const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
                     const freezeStyle = getColumnFreezeStyle(freezeOffset, {
-                      isHeader: true
+                      isHeader: true,
+                      headerTop: header.depth * DATA_TABLE_HEADER_ROW_HEIGHT
                     });
                     const headerStyle = {
                       ...sizeStyle,
@@ -3431,6 +3466,8 @@ function DataTable({
                     return /* @__PURE__ */ jsxs5(
                       "th",
                       {
+                        colSpan: header.colSpan,
+                        rowSpan: header.mergedRowSpan,
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
                         "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
@@ -3636,6 +3673,46 @@ function buildColumnDef(props, sort, onSort) {
     }
   };
 }
+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),
+      header: (
+        // eslint-disable-next-line @typescript-eslint/promise-function-async
+        () => 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";
@@ -3645,6 +3722,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) {
@@ -3661,6 +3739,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;
 }
@@ -3687,26 +3768,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
@@ -3722,6 +3815,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;
@@ -3829,11 +3929,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;
@@ -3843,7 +3943,7 @@ 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: [
@@ -3876,6 +3976,11 @@ 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 });
@@ -3883,6 +3988,7 @@ function createTable() {
     {
       Header: TableHeader,
       Column,
+      ColumnGroup,
       Body: TableBody,
       Pagination: TablePagination
     }
@@ -3891,6 +3997,7 @@ function createTable() {
 var Table = Object.assign(TableRoot, {
   Header: TableHeader,
   Column: TableColumn,
+  ColumnGroup: TableColumnGroup,
   Body: TableBody,
   Pagination: TablePagination
 });

package/dist/core.cjs

@@ -1189,7 +1189,7 @@ function getColumnFreezeStyle(offset, options) {
     position: "sticky",
     ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
     zIndex: zBase + offset.stack,
-    ...options?.isHeader ? { top: 0 } : {}
+    ...options?.isHeader ? { top: options.headerTop ?? 0 } : {}
   };
 }
 

package/dist/core.d.cts

@@ -1,5 +1,5 @@
-import { L as CellEditType, e as DataTableClassNames, R as RowSelectionMode, c as ColumnFreezeOffset, l as SearchResultItem, m as SearchStatus, h as DataTableProps, g as DataTableLabels, f as DataTableCopyActions, P as PasteMode, k as RowsPastePayload } from './types-tkOzBZ4V.cjs';
-export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, o as buildColumnFreezeOffsets, p as buildFlatSearchCorpus, q as buildSearchMatchKey, r as buildSearchMatchKeys, s as buildTreeSearchCorpus, t as cellValueToSearchText, u as collectAncestorKeysToExpand, v as collectSearchMatchesInRange, w as createSearchRegex, x as escapeSearchRegex, y as formatSearchResultLabel, z as getColumnFreezeEdgeAttr, A as getColumnFreezeStyle, B as mapSearchResultToVisibleItem, E as mapSearchResultsToVisibleKeys, F as nextSearchIndex, G as nextSearchStride, H as previousSearchIndex, J as resolveColumnFreezeSide, K as resolveDataTableLabels } from './types-tkOzBZ4V.cjs';
+import { M as CellEditType, e as DataTableClassNames, R as RowSelectionMode, c as ColumnFreezeOffset, l as SearchResultItem, m as SearchStatus, h as DataTableProps, g as DataTableLabels, f as DataTableCopyActions, P as PasteMode, k as RowsPastePayload } from './types-Cs9MiZs1.cjs';
+export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, p as buildColumnFreezeOffsets, q as buildFlatSearchCorpus, r as buildSearchMatchKey, s as buildSearchMatchKeys, t as buildTreeSearchCorpus, u as cellValueToSearchText, v as collectAncestorKeysToExpand, w as collectSearchMatchesInRange, x as createSearchRegex, y as escapeSearchRegex, z as formatSearchResultLabel, A as getColumnFreezeEdgeAttr, B as getColumnFreezeStyle, E as mapSearchResultToVisibleItem, F as mapSearchResultsToVisibleKeys, G as nextSearchIndex, H as nextSearchStride, J as previousSearchIndex, K as resolveColumnFreezeSide, L as resolveDataTableLabels } from './types-Cs9MiZs1.cjs';
 import { Row, ColumnDef, Table, Updater, RowSelectionState } from '@tanstack/react-table';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';

package/dist/core.d.ts

@@ -1,5 +1,5 @@
-import { L as CellEditType, e as DataTableClassNames, R as RowSelectionMode, c as ColumnFreezeOffset, l as SearchResultItem, m as SearchStatus, h as DataTableProps, g as DataTableLabels, f as DataTableCopyActions, P as PasteMode, k as RowsPastePayload } from './types-tkOzBZ4V.js';
-export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, o as buildColumnFreezeOffsets, p as buildFlatSearchCorpus, q as buildSearchMatchKey, r as buildSearchMatchKeys, s as buildTreeSearchCorpus, t as cellValueToSearchText, u as collectAncestorKeysToExpand, v as collectSearchMatchesInRange, w as createSearchRegex, x as escapeSearchRegex, y as formatSearchResultLabel, z as getColumnFreezeEdgeAttr, A as getColumnFreezeStyle, B as mapSearchResultToVisibleItem, E as mapSearchResultsToVisibleKeys, F as nextSearchIndex, G as nextSearchStride, H as previousSearchIndex, J as resolveColumnFreezeSide, K as resolveDataTableLabels } from './types-tkOzBZ4V.js';
+import { M as CellEditType, e as DataTableClassNames, R as RowSelectionMode, c as ColumnFreezeOffset, l as SearchResultItem, m as SearchStatus, h as DataTableProps, g as DataTableLabels, f as DataTableCopyActions, P as PasteMode, k as RowsPastePayload } from './types-Cs9MiZs1.js';
+export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, p as buildColumnFreezeOffsets, q as buildFlatSearchCorpus, r as buildSearchMatchKey, s as buildSearchMatchKeys, t as buildTreeSearchCorpus, u as cellValueToSearchText, v as collectAncestorKeysToExpand, w as collectSearchMatchesInRange, x as createSearchRegex, y as escapeSearchRegex, z as formatSearchResultLabel, A as getColumnFreezeEdgeAttr, B as getColumnFreezeStyle, E as mapSearchResultToVisibleItem, F as mapSearchResultsToVisibleKeys, G as nextSearchIndex, H as nextSearchStride, J as previousSearchIndex, K as resolveColumnFreezeSide, L as resolveDataTableLabels } from './types-Cs9MiZs1.js';
 import { Row, ColumnDef, Table, Updater, RowSelectionState } from '@tanstack/react-table';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';

package/dist/core.js

@@ -1111,7 +1111,7 @@ function getColumnFreezeStyle(offset, options) {
     position: "sticky",
     ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
     zIndex: zBase + offset.stack,
-    ...options?.isHeader ? { top: 0 } : {}
+    ...options?.isHeader ? { top: options.headerTop ?? 0 } : {}
   };
 }
 

package/dist/index.cjs

@@ -132,6 +132,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;
@@ -1200,7 +1201,7 @@ function getColumnFreezeStyle(offset, options) {
     position: "sticky",
     ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
     zIndex: zBase + offset.stack,
-    ...options?.isHeader ? { top: 0 } : {}
+    ...options?.isHeader ? { top: options.headerTop ?? 0 } : {}
   };
 }
 
@@ -3350,6 +3351,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/components/ui/table/components/DataTable/DataTable.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function DefaultScroll({
@@ -3435,6 +3468,7 @@ 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]
@@ -3504,7 +3538,7 @@ function DataTable({
             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_runtime6.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: headerGroups.map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "tr",
                 {
                   className: cn("data-table-head-row", classNames?.headRow),
@@ -3518,7 +3552,8 @@ function DataTable({
                     });
                     const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
                     const freezeStyle = getColumnFreezeStyle(freezeOffset, {
-                      isHeader: true
+                      isHeader: true,
+                      headerTop: header.depth * DATA_TABLE_HEADER_ROW_HEIGHT
                     });
                     const headerStyle = {
                       ...sizeStyle,
@@ -3527,6 +3562,8 @@ function DataTable({
                     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                       "th",
                       {
+                        colSpan: header.colSpan,
+                        rowSpan: header.mergedRowSpan,
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
                         "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
@@ -3732,6 +3769,46 @@ function buildColumnDef(props, sort, onSort) {
     }
   };
 }
+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),
+      header: (
+        // eslint-disable-next-line @typescript-eslint/promise-function-async
+        () => 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");
@@ -3741,6 +3818,7 @@ var import_react9 = 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) {
@@ -3757,6 +3835,9 @@ function isTableBodyElement(child) {
 function isTableColumnElement(child) {
   return (0, import_react9.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
 }
+function isTableColumnGroupElement(child) {
+  return (0, import_react9.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;
 }
@@ -3783,26 +3864,38 @@ function parseTableChildren(children) {
   }
   return slots;
 }
-function flattenColumnElements(children) {
+function walkColumnTreeNodes(children) {
   const result = [];
   for (const child of import_react10.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)) {
       const nested = child.props.children;
       if (nested != null) {
-        result.push(...flattenColumnElements(nested));
+        result.push(...walkColumnTreeNodes(nested));
       }
     }
   }
   return result;
 }
-function extractColumnElements(header) {
+function extractColumnTree(header) {
   if (!header) return [];
   const { children } = header.props;
-  return flattenColumnElements(children);
+  return walkColumnTreeNodes(children);
 }
 
 // src/components/ui/table/components/Table/TableBody.tsx
@@ -3818,6 +3911,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;
@@ -3925,11 +4025,11 @@ 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_react11.useMemo)(() => extractColumnTree(header), [header]);
+  const columns = (0, import_react11.useMemo)(
+    () => buildColumnDefsFromTree(columnTree, sort, handleSort),
+    [columnTree, sort, handleSort]
+  );
   const paginationProps = paginationElement?.props;
   const pageSize = paginationProps?.pageSize ?? 10;
   const page = paginationProps?.page ?? 1;
@@ -3939,7 +4039,7 @@ 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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "TableJSX", children: [
@@ -3972,6 +4072,11 @@ 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 });
@@ -3979,6 +4084,7 @@ function createTable() {
     {
       Header: TableHeader,
       Column,
+      ColumnGroup,
       Body: TableBody,
       Pagination: TablePagination
     }
@@ -3987,6 +4093,7 @@ function createTable() {
 var Table = Object.assign(TableRoot, {
   Header: TableHeader,
   Column: TableColumn,
+  ColumnGroup: TableColumnGroup,
   Body: TableBody,
   Pagination: TablePagination
 });

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, c as ColumnFreezeOffset, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, e as DataTableClassNames, f as DataTableCopyActions, g as DataTableLabels, h as DataTableProps, i as DataTableScrollSlotProps, j as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload, S as SearchCorpusRow, l as SearchResultItem, m as SearchStatus, T as TableColumnProps, n as TableProps, o as buildColumnFreezeOffsets, p as buildFlatSearchCorpus, q as buildSearchMatchKey, r as buildSearchMatchKeys, s as buildTreeSearchCorpus, t as cellValueToSearchText, u as collectAncestorKeysToExpand, v as collectSearchMatchesInRange, w as createSearchRegex, x as escapeSearchRegex, y as formatSearchResultLabel, z as getColumnFreezeEdgeAttr, A as getColumnFreezeStyle, B as mapSearchResultToVisibleItem, E as mapSearchResultsToVisibleKeys, F as nextSearchIndex, G as nextSearchStride, H as previousSearchIndex, J as resolveColumnFreezeSide, K as resolveDataTableLabels } from './types-tkOzBZ4V.cjs';
+export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, c as ColumnFreezeOffset, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, e as DataTableClassNames, f as DataTableCopyActions, g as DataTableLabels, h as DataTableProps, i as DataTableScrollSlotProps, j as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload, S as SearchCorpusRow, l as SearchResultItem, m as SearchStatus, T as TableColumnGroupProps, n as TableColumnProps, o as TableProps, p as buildColumnFreezeOffsets, q as buildFlatSearchCorpus, r as buildSearchMatchKey, s as buildSearchMatchKeys, t as buildTreeSearchCorpus, u as cellValueToSearchText, v as collectAncestorKeysToExpand, w as collectSearchMatchesInRange, x as createSearchRegex, y as escapeSearchRegex, z as formatSearchResultLabel, A as getColumnFreezeEdgeAttr, B as getColumnFreezeStyle, E as mapSearchResultToVisibleItem, F as mapSearchResultsToVisibleKeys, G as nextSearchIndex, H as nextSearchStride, J as previousSearchIndex, K as resolveColumnFreezeSide, L as resolveDataTableLabels } from './types-Cs9MiZs1.cjs';
 export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, UseInlineSearchOptions, UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, writeSelectionToClipboard } from './core.cjs';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.cjs';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, c as ColumnFreezeOffset, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, e as DataTableClassNames, f as DataTableCopyActions, g as DataTableLabels, h as DataTableProps, i as DataTableScrollSlotProps, j as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload, S as SearchCorpusRow, l as SearchResultItem, m as SearchStatus, T as TableColumnProps, n as TableProps, o as buildColumnFreezeOffsets, p as buildFlatSearchCorpus, q as buildSearchMatchKey, r as buildSearchMatchKeys, s as buildTreeSearchCorpus, t as cellValueToSearchText, u as collectAncestorKeysToExpand, v as collectSearchMatchesInRange, w as createSearchRegex, x as escapeSearchRegex, y as formatSearchResultLabel, z as getColumnFreezeEdgeAttr, A as getColumnFreezeStyle, B as mapSearchResultToVisibleItem, E as mapSearchResultsToVisibleKeys, F as nextSearchIndex, G as nextSearchStride, H as previousSearchIndex, J as resolveColumnFreezeSide, K as resolveDataTableLabels } from './types-tkOzBZ4V.js';
+export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, c as ColumnFreezeOffset, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, e as DataTableClassNames, f as DataTableCopyActions, g as DataTableLabels, h as DataTableProps, i as DataTableScrollSlotProps, j as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, k as RowsPastePayload, S as SearchCorpusRow, l as SearchResultItem, m as SearchStatus, T as TableColumnGroupProps, n as TableColumnProps, o as TableProps, p as buildColumnFreezeOffsets, q as buildFlatSearchCorpus, r as buildSearchMatchKey, s as buildSearchMatchKeys, t as buildTreeSearchCorpus, u as cellValueToSearchText, v as collectAncestorKeysToExpand, w as collectSearchMatchesInRange, x as createSearchRegex, y as escapeSearchRegex, z as formatSearchResultLabel, A as getColumnFreezeEdgeAttr, B as getColumnFreezeStyle, E as mapSearchResultToVisibleItem, F as mapSearchResultsToVisibleKeys, G as nextSearchIndex, H as nextSearchStride, J as previousSearchIndex, K as resolveColumnFreezeSide, L as resolveDataTableLabels } from './types-Cs9MiZs1.js';
 export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, UseInlineSearchOptions, UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, writeSelectionToClipboard } from './core.js';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.js';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';

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;
@@ -1119,7 +1120,7 @@ function getColumnFreezeStyle(offset, options) {
     position: "sticky",
     ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
     zIndex: zBase + offset.stack,
-    ...options?.isHeader ? { top: 0 } : {}
+    ...options?.isHeader ? { top: options.headerTop ?? 0 } : {}
   };
 }
 
@@ -3276,6 +3277,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/components/ui/table/components/DataTable/DataTable.tsx
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function DefaultScroll({
@@ -3361,6 +3394,7 @@ 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]
@@ -3430,7 +3464,7 @@ function DataTable({
             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__ */ jsx6("thead", { className: cn("data-table-head", classNames?.head), children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx6(
                 "tr",
                 {
                   className: cn("data-table-head-row", classNames?.headRow),
@@ -3444,7 +3478,8 @@ function DataTable({
                     });
                     const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
                     const freezeStyle = getColumnFreezeStyle(freezeOffset, {
-                      isHeader: true
+                      isHeader: true,
+                      headerTop: header.depth * DATA_TABLE_HEADER_ROW_HEIGHT
                     });
                     const headerStyle = {
                       ...sizeStyle,
@@ -3453,6 +3488,8 @@ function DataTable({
                     return /* @__PURE__ */ jsxs5(
                       "th",
                       {
+                        colSpan: header.colSpan,
+                        rowSpan: header.mergedRowSpan,
                         "data-resizing": header.column.getIsResizing() ? "" : void 0,
                         "data-frozen": freezeOffset?.side,
                         "data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
@@ -3658,6 +3695,46 @@ function buildColumnDef(props, sort, onSort) {
     }
   };
 }
+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),
+      header: (
+        // eslint-disable-next-line @typescript-eslint/promise-function-async
+        () => 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 +3744,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 +3761,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 +3790,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 +3837,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;
@@ -3851,11 +3951,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,7 +3965,7 @@ 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: [
@@ -3898,6 +3998,11 @@ 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 });
@@ -3905,6 +4010,7 @@ function createTable() {
     {
       Header: TableHeader,
       Column,
+      ColumnGroup,
       Body: TableBody,
       Pagination: TablePagination
     }
@@ -3913,6 +4019,7 @@ function createTable() {
 var Table = Object.assign(TableRoot, {
   Header: TableHeader,
   Column: TableColumn,
+  ColumnGroup: TableColumnGroup,
   Body: TableBody,
   Pagination: TablePagination
 });

package/dist/{types-tkOzBZ4V.d.cts → types-Cs9MiZs1.d.cts}

@@ -46,6 +46,7 @@ declare function buildColumnFreezeOffsets(columns: ColumnFreezeColumnInput[]): M
 /** Sticky position styles for a frozen header or body cell. */
 declare function getColumnFreezeStyle(offset: ColumnFreezeOffset | undefined, options?: {
     isHeader?: boolean;
+    headerTop?: number;
 }): CSSProperties | undefined;
 
 /** Cell match as `[colIndex, rowIndex]` — same order as Glide Data Grid `Item`.
@@ -478,8 +479,18 @@ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyo
     headerClassName?: string;
     render?: (value: K extends keyof T ? T[K] : unknown, row: Row<T>, index: number) => ReactNode;
 };
+/** Declares a multi-row header group wrapping leaf `Table.Column`s. */
+type TableColumnGroupProps = {
+    /** Group header label shown in the top header row */
+    header: ReactNode;
+    children: ReactNode;
+    /** Stable group id. Auto-generated when omitted */
+    id?: string;
+    align?: "left" | "center" | "right";
+    headerClassName?: string;
+};
 type TableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "columns"> & {
     children: ReactNode;
 };
 
-export { getColumnFreezeStyle as A, mapSearchResultToVisibleItem as B, type ColumnFreezeColumnInput as C, DEFAULT_DATA_TABLE_LABELS as D, mapSearchResultsToVisibleKeys as E, nextSearchIndex as F, nextSearchStride as G, previousSearchIndex as H, INLINE_SEARCH_MAX_RESULTS as I, resolveColumnFreezeSide as J, resolveDataTableLabels as K, type CellEditType as L, type PasteMode as P, type RowSelectionMode as R, type SearchCorpusRow as S, type TableColumnProps as T, type ColumnFreezeEdgeSide as a, type ColumnFreezeMeta as b, type ColumnFreezeOffset as c, type ColumnFreezeSide as d, type DataTableClassNames as e, type DataTableCopyActions as f, type DataTableLabels as g, type DataTableProps as h, type DataTableScrollSlotProps as i, type DataTableSlots as j, type RowsPastePayload as k, type SearchResultItem as l, type SearchStatus as m, type TableProps as n, buildColumnFreezeOffsets as o, buildFlatSearchCorpus as p, buildSearchMatchKey as q, buildSearchMatchKeys as r, buildTreeSearchCorpus as s, cellValueToSearchText as t, collectAncestorKeysToExpand as u, collectSearchMatchesInRange as v, createSearchRegex as w, escapeSearchRegex as x, formatSearchResultLabel as y, getColumnFreezeEdgeAttr as z };
+export { getColumnFreezeEdgeAttr as A, getColumnFreezeStyle as B, type ColumnFreezeColumnInput as C, DEFAULT_DATA_TABLE_LABELS as D, mapSearchResultToVisibleItem as E, mapSearchResultsToVisibleKeys as F, nextSearchIndex as G, nextSearchStride as H, INLINE_SEARCH_MAX_RESULTS as I, previousSearchIndex as J, resolveColumnFreezeSide as K, resolveDataTableLabels as L, type CellEditType as M, type PasteMode as P, type RowSelectionMode as R, type SearchCorpusRow as S, type TableColumnGroupProps as T, type ColumnFreezeEdgeSide as a, type ColumnFreezeMeta as b, type ColumnFreezeOffset as c, type ColumnFreezeSide as d, type DataTableClassNames as e, type DataTableCopyActions as f, type DataTableLabels as g, type DataTableProps as h, type DataTableScrollSlotProps as i, type DataTableSlots as j, type RowsPastePayload as k, type SearchResultItem as l, type SearchStatus as m, type TableColumnProps as n, type TableProps as o, buildColumnFreezeOffsets as p, buildFlatSearchCorpus as q, buildSearchMatchKey as r, buildSearchMatchKeys as s, buildTreeSearchCorpus as t, cellValueToSearchText as u, collectAncestorKeysToExpand as v, collectSearchMatchesInRange as w, createSearchRegex as x, escapeSearchRegex as y, formatSearchResultLabel as z };

package/dist/{types-tkOzBZ4V.d.ts → types-Cs9MiZs1.d.ts}

@@ -46,6 +46,7 @@ declare function buildColumnFreezeOffsets(columns: ColumnFreezeColumnInput[]): M
 /** Sticky position styles for a frozen header or body cell. */
 declare function getColumnFreezeStyle(offset: ColumnFreezeOffset | undefined, options?: {
     isHeader?: boolean;
+    headerTop?: number;
 }): CSSProperties | undefined;
 
 /** Cell match as `[colIndex, rowIndex]` — same order as Glide Data Grid `Item`.
@@ -478,8 +479,18 @@ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyo
     headerClassName?: string;
     render?: (value: K extends keyof T ? T[K] : unknown, row: Row<T>, index: number) => ReactNode;
 };
+/** Declares a multi-row header group wrapping leaf `Table.Column`s. */
+type TableColumnGroupProps = {
+    /** Group header label shown in the top header row */
+    header: ReactNode;
+    children: ReactNode;
+    /** Stable group id. Auto-generated when omitted */
+    id?: string;
+    align?: "left" | "center" | "right";
+    headerClassName?: string;
+};
 type TableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "columns"> & {
     children: ReactNode;
 };
 
-export { getColumnFreezeStyle as A, mapSearchResultToVisibleItem as B, type ColumnFreezeColumnInput as C, DEFAULT_DATA_TABLE_LABELS as D, mapSearchResultsToVisibleKeys as E, nextSearchIndex as F, nextSearchStride as G, previousSearchIndex as H, INLINE_SEARCH_MAX_RESULTS as I, resolveColumnFreezeSide as J, resolveDataTableLabels as K, type CellEditType as L, type PasteMode as P, type RowSelectionMode as R, type SearchCorpusRow as S, type TableColumnProps as T, type ColumnFreezeEdgeSide as a, type ColumnFreezeMeta as b, type ColumnFreezeOffset as c, type ColumnFreezeSide as d, type DataTableClassNames as e, type DataTableCopyActions as f, type DataTableLabels as g, type DataTableProps as h, type DataTableScrollSlotProps as i, type DataTableSlots as j, type RowsPastePayload as k, type SearchResultItem as l, type SearchStatus as m, type TableProps as n, buildColumnFreezeOffsets as o, buildFlatSearchCorpus as p, buildSearchMatchKey as q, buildSearchMatchKeys as r, buildTreeSearchCorpus as s, cellValueToSearchText as t, collectAncestorKeysToExpand as u, collectSearchMatchesInRange as v, createSearchRegex as w, escapeSearchRegex as x, formatSearchResultLabel as y, getColumnFreezeEdgeAttr as z };
+export { getColumnFreezeEdgeAttr as A, getColumnFreezeStyle as B, type ColumnFreezeColumnInput as C, DEFAULT_DATA_TABLE_LABELS as D, mapSearchResultToVisibleItem as E, mapSearchResultsToVisibleKeys as F, nextSearchIndex as G, nextSearchStride as H, INLINE_SEARCH_MAX_RESULTS as I, previousSearchIndex as J, resolveColumnFreezeSide as K, resolveDataTableLabels as L, type CellEditType as M, type PasteMode as P, type RowSelectionMode as R, type SearchCorpusRow as S, type TableColumnGroupProps as T, type ColumnFreezeEdgeSide as a, type ColumnFreezeMeta as b, type ColumnFreezeOffset as c, type ColumnFreezeSide as d, type DataTableClassNames as e, type DataTableCopyActions as f, type DataTableLabels as g, type DataTableProps as h, type DataTableScrollSlotProps as i, type DataTableSlots as j, type RowsPastePayload as k, type SearchResultItem as l, type SearchStatus as m, type TableColumnProps as n, type TableProps as o, buildColumnFreezeOffsets as p, buildFlatSearchCorpus as q, buildSearchMatchKey as r, buildSearchMatchKeys as s, buildTreeSearchCorpus as t, cellValueToSearchText as u, collectAncestorKeysToExpand as v, collectSearchMatchesInRange as w, createSearchRegex as x, escapeSearchRegex as y, formatSearchResultLabel as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-glide-table",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zpxlffjrm/react-glide-table.git"