feat(HeaderCell): add header groupping possibility

src/components/HeaderCell/HeaderCell.tsx

@@ -10,6 +10,7 @@ export interface HeaderCellProps<TData, TValue> {
     className?: string;
     contentClassName?: string;
     header: Header<TData, TValue>;
+    parentHeader?: Header<TData, unknown>;
     renderSortIndicator?: (header: Header<TData, TValue>, className?: string) => React.ReactNode;
     selection?: boolean;
     sortIndicatorClassName?: string;
@@ -19,6 +20,7 @@ export const HeaderCell = <TData, TValue>({
     className,
     contentClassName,
     header,
+    parentHeader,
     renderSortIndicator = renderDefaultSortIndicator,
     selection,
     sortIndicatorClassName,
@@ -27,6 +29,23 @@ export const HeaderCell = <TData, TValue>({
     const {columnSizingInfo} = table.getState();
     const {columnResizeDirection, columnResizeMode, enableColumnResizing} = table.options;
 
+    const columnRelativeDepth = header.depth - header.column.depth;
+
+    if (!header.isPlaceholder && header.id === header.column.id && columnRelativeDepth > 1) {
+        return null;
+    }
+
+    let rowSpan = 1;
+
+    if (header.isPlaceholder) {
+        if (parentHeader?.isPlaceholder && parentHeader.placeholderId === header.placeholderId) {
+            return null;
+        }
+
+        const leafs = header.getLeafHeaders();
+        rowSpan = leafs.length ?? 1;
+    }
+
     return (
         <th
             className={b(
@@ -35,6 +54,7 @@ export const HeaderCell = <TData, TValue>({
                     id: header.column.id,
                     placeholder: header.isPlaceholder,
                     sortable: header.column.getCanSort(),
+                    wide: header.colSpan > 1,
                 },
                 className,
             )}
@@ -44,36 +64,34 @@ export const HeaderCell = <TData, TValue>({
                 maxWidth: header.column.columnDef.maxSize,
             }}
             colSpan={header.colSpan}
+            rowSpan={rowSpan}
             onClick={header.column.getToggleSortingHandler()}
         >
-            {header.isPlaceholder ? null : (
-                <div className={b('header-cell-content', {selection}, contentClassName)}>
-                    {flexRender(header.column.columnDef.header, header.getContext())}{' '}
-                    {header.column.getCanSort() &&
-                        renderSortIndicator(header, sortIndicatorClassName)}
-                    {enableColumnResizing && (
-                        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-                        <div
-                            className={b('resizer', {
-                                direction: columnResizeDirection,
-                                resizing: header.column.getIsResizing(),
-                            })}
-                            onDoubleClick={() => header.column.resetSize()}
-                            onMouseDown={header.getResizeHandler()}
-                            onTouchStart={header.getResizeHandler()}
-                            style={{
-                                transform:
-                                    columnResizeMode === 'onEnd' && header.column.getIsResizing()
-                                        ? `translateX(${
-                                              (columnResizeDirection === 'rtl' ? -1 : 1) *
-                                              (columnSizingInfo.deltaOffset ?? 0)
-                                          }px)`
-                                        : '',
-                            }}
-                        />
-                    )}
-                </div>
-            )}
+            <div className={b('header-cell-content', {selection}, contentClassName)}>
+                {flexRender(header.column.columnDef.header, header.getContext())}{' '}
+                {header.column.getCanSort() && renderSortIndicator(header, sortIndicatorClassName)}
+                {enableColumnResizing && (
+                    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                    <div
+                        className={b('resizer', {
+                            direction: columnResizeDirection,
+                            resizing: header.column.getIsResizing(),
+                        })}
+                        onDoubleClick={() => header.column.resetSize()}
+                        onMouseDown={header.getResizeHandler()}
+                        onTouchStart={header.getResizeHandler()}
+                        style={{
+                            transform:
+                                columnResizeMode === 'onEnd' && header.column.getIsResizing()
+                                    ? `translateX(${
+                                          (columnResizeDirection === 'rtl' ? -1 : 1) *
+                                          (columnSizingInfo.deltaOffset ?? 0)
+                                      }px)`
+                                    : '',
+                        }}
+                    />
+                )}
+            </div>
         </th>
     );
 };

src/components/HeaderRow/HeaderRow.tsx

@@ -11,6 +11,7 @@ export interface HeaderRowProps<TData, TValue> {
     cellContentClassName: HeaderCellProps<TData, TValue>['contentClassName'];
     className?: string;
     headerGroup: HeaderGroup<TData>;
+    parentHeaderGroup?: HeaderGroup<TData>;
     renderSortIndicator: HeaderCellProps<TData, TValue>['renderSortIndicator'];
     selectionColumnId?: string;
     sortIndicatorClassName: HeaderCellProps<TData, TValue>['sortIndicatorClassName'];
@@ -21,6 +22,7 @@ export const HeaderRow = <TData, TValue>({
     cellContentClassName,
     className,
     headerGroup,
+    parentHeaderGroup,
     renderSortIndicator,
     selectionColumnId,
     sortIndicatorClassName,
@@ -33,6 +35,9 @@ export const HeaderRow = <TData, TValue>({
                     className={cellClassName}
                     contentClassName={cellContentClassName}
                     header={header as Header<TData, TValue>}
+                    parentHeader={parentHeaderGroup?.headers.find(
+                        (item) => header.column.id === item.column.id,
+                    )}
                     renderSortIndicator={renderSortIndicator}
                     selection={header.column.id === selectionColumnId}
                     sortIndicatorClassName={sortIndicatorClassName}

src/components/Table/Table.scss

@@ -69,6 +69,12 @@ $block: '.#{variables.$ns}table';
                 opacity: 1;
             }
         }
+
+        &_wide {
+            #{$block}__header-cell-content {
+                justify-content: center;
+            }
+        }
     }
 
     &__header-cell-content,

src/components/Table/Table.tsx

@@ -258,6 +258,8 @@ export const Table = React.memo(
 
         const {rows} = table.getRowModel();
 
+        const headerGroups = table.getHeaderGroups();
+
         return (
             <TableContextProvider
                 getRowByIndex={getRowByIndex}
@@ -267,10 +269,11 @@ export const Table = React.memo(
                 <table className={b(null, className)}>
                     {withHeader && (
                         <thead className={b('header', headerClassName)}>
-                            {table.getHeaderGroups().map((headerGroup) => (
+                            {headerGroups.map((headerGroup, index) => (
                                 <HeaderRow
                                     key={headerGroup.id}
                                     headerGroup={headerGroup}
+                                    parentHeaderGroup={headerGroups[index - 1]}
                                     className={headerRowClassName}
                                     cellClassName={headerCellClassName}
                                     cellContentClassName={headerCellContentClassName}

src/components/__stories__/Grid2.stories.tsx

@@ -4,6 +4,7 @@ import type {Meta, StoryFn} from '@storybook/react';
 
 import {Table} from '../Table';
 
+import {cnGridDemo} from './GridDemo.classname';
 import {GroupingDemo} from './GroupingDemo';
 import {GroupingDemo2} from './GroupingDemo2';
 import {GroupingWithSelectionDemo} from './GroupingWithSelectionDemo';
@@ -20,6 +21,8 @@ import {data} from './constants/data';
 import type {Item} from './types';
 import {generateData} from './utils';
 
+import './GridDemo.scss';
+
 export default {
     title: 'Table',
     component: Table,
@@ -48,6 +51,51 @@ WithoutHeader.args = {
     onRowClick: undefined,
 };
 
+export const HeaderGroups: StoryFn<typeof Table<Item>> = Template.bind({});
+
+HeaderGroups.args = {
+    data,
+    columns: [
+        {
+            id: 'id',
+            header: 'ID',
+            accessorKey: 'id',
+        },
+        {
+            id: 'columns-parent',
+            header: 'Columns header',
+            columns: [
+                {
+                    id: 'columns',
+                    header: 'Columns',
+                    columns,
+                },
+            ],
+        },
+        {
+            id: 'actions',
+            header: 'Actions',
+            accessorKey: 'id',
+            columns: [
+                {
+                    id: 'edit',
+                    header: 'Edit',
+                    accessorKey: 'id',
+                },
+                {
+                    id: 'delete',
+                    header: 'Delete',
+                    accessorKey: 'id',
+                },
+            ],
+        },
+    ],
+    getRowId: (item: Item) => item.id,
+    onSelectedChange: undefined,
+    onRowClick: undefined,
+    className: cnGridDemo('header-groups-grid'),
+};
+
 const WithSelectionTemplate: StoryFn<typeof Table<Item>> = (args) => (
     <WithSelectionDemo {...args} />
 );

src/components/__stories__/GridDemo.classname.ts

@@ -0,0 +1,3 @@
+import {cn} from '@bem-react/classname';
+
+export const cnGridDemo = cn('grid-demo');

src/components/__stories__/GridDemo.scss

@@ -0,0 +1,10 @@
+.grid-demo {
+    &-header-groups-grid {
+        border-collapse: collapse;
+
+        th,
+        td {
+            border: 1px solid var(--g-color-line-generic);
+        }
+    }
+}