Add column groups (Comcast#3287)

* Initial commit to support column groups

* idk

* calculated groups

* progress

* progress

* progress

* remove level, fix header rows count

* row span

* fix incorrectly skipped headers

* fix scrollPaddingBlock

* Add `aria-rowspan`

* add padding on top to move content at the bottom

* fix colSpan

* fix aria-rowspan

* render grouped column header cells without duplicates

* fix cell positions

* remove `children`

* disallow col groups in TreeDataGrid

* fix test

* add grouping test

* tweak

* dedupe headerRowsHeight

* Remove TODO

* Fix cell click selection on the column group

* grouping -> row grouping

* add col grouping page

* revert common features

* simplify getHeaderCellStyle

* Fix params

* add headerCellClass on ColumnGroup

* group the Or types

* remove TODO, add summary rows in the example

* export CalculatedColumnParent and CalculatedColumnOrColumnGroup

* minor tweaks

* Combine `useMoreCalculatedColumnsStuff` and `useCalculatedColumns`

* tweaks

* consistent gridColumnEnd

* fix tests

* rm rowSelectedClassname usage

* fix cell borders

---------

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <stepien.nicolas@gmail.com>

Author: 2 people

README.md

@@ -31,8 +31,9 @@
   - Click on a sortable column header to toggle between its ascending/descending sort order
   - Ctrl+Click / Meta+Click to sort an additional column
 - [Column spanning](https://adazzle.github.io/react-data-grid/#/column-spanning)
+- [Column grouping](https://adazzle.github.io/react-data-grid/#/column-grouping)
 - [Row selection](https://adazzle.github.io/react-data-grid/#/common-features)
-- [Row grouping](https://adazzle.github.io/react-data-grid/#/grouping)
+- [Row grouping](https://adazzle.github.io/react-data-grid/#/row-grouping)
 - [Summary rows](https://adazzle.github.io/react-data-grid/#/common-features)
 - [Dynamic row heights](https://adazzle.github.io/react-data-grid/#/variable-row-height)
 - [No rows fallback](https://adazzle.github.io/react-data-grid/#/no-rows)

src/Cell.tsx

@@ -93,8 +93,8 @@ function Cell<R, SR>({
     <div
       role="gridcell"
       aria-colindex={column.idx + 1} // aria-colindex is 1-based
-      aria-selected={isCellSelected}
       aria-colspan={colSpan}
+      aria-selected={isCellSelected}
       aria-readonly={!isEditable || undefined}
       tabIndex={tabIndex}
       className={className}

src/DataGrid.tsx

@@ -36,6 +36,7 @@ import type {
   CellMouseEvent,
   CellNavigationMode,
   Column,
+  ColumnOrColumnGroup,
   CopyEvent,
   Direction,
   FillEvent,
@@ -54,6 +55,7 @@ import {
 } from './DataGridDefaultRenderersProvider';
 import DragHandle from './DragHandle';
 import EditCell from './EditCell';
+import GroupedColumnHeaderRow from './GroupedColumnHeaderRow';
 import HeaderRow from './HeaderRow';
 import { defaultRenderRow } from './Row';
 import type { PartialPosition } from './ScrollToCell';
@@ -105,7 +107,7 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
    * Grid and data Props
    */
   /** An array of objects representing each column on the grid */
-  columns: readonly Column<R, SR>[];
+  columns: readonly ColumnOrColumnGroup<R, SR>[];
   /** A function called for each rendered row that should return a plain key/value pair object */
   rows: readonly R[];
   /**
@@ -258,14 +260,6 @@ function DataGrid<R, SR, K extends Key>(
   const enableVirtualization = rawEnableVirtualization ?? true;
   const direction = rawDirection ?? 'ltr';
 
-  const headerRowsCount = 1;
-  const topSummaryRowsCount = topSummaryRows?.length ?? 0;
-  const bottomSummaryRowsCount = bottomSummaryRows?.length ?? 0;
-  const summaryRowsCount = topSummaryRowsCount + bottomSummaryRowsCount;
-  const headerAndTopSummaryRowsCount = headerRowsCount + topSummaryRowsCount;
-  const minRowIdx = -headerAndTopSummaryRowsCount;
-  const maxRowIdx = rows.length + bottomSummaryRowsCount - 1;
-
   /**
    * states
    */
@@ -277,14 +271,45 @@ function DataGrid<R, SR, K extends Key>(
   const [measuredColumnWidths, setMeasuredColumnWidths] = useState(
     (): ReadonlyMap<string, number> => new Map()
   );
-  const [selectedPosition, setSelectedPosition] = useState(
-    (): SelectCellState | EditCellState<R> => ({ idx: -1, rowIdx: minRowIdx - 1, mode: 'SELECT' })
-  );
   const [copiedCell, setCopiedCell] = useState<{ row: R; columnKey: string } | null>(null);
   const [isDragging, setDragging] = useState(false);
   const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined);
   const [scrollToPosition, setScrollToPosition] = useState<PartialPosition | null>(null);
 
+  const [gridRef, gridWidth, gridHeight] = useGridDimensions();
+  const {
+    columns,
+    colSpanColumns,
+    lastFrozenColumnIndex,
+    headerRowsCount,
+    colOverscanStartIdx,
+    colOverscanEndIdx,
+    templateColumns,
+    layoutCssVars,
+    totalFrozenColumnWidth
+  } = useCalculatedColumns({
+    rawColumns,
+    defaultColumnOptions,
+    measuredColumnWidths,
+    resizedColumnWidths,
+    scrollLeft,
+    viewportWidth: gridWidth,
+    enableVirtualization
+  });
+
+  const topSummaryRowsCount = topSummaryRows?.length ?? 0;
+  const bottomSummaryRowsCount = bottomSummaryRows?.length ?? 0;
+  const summaryRowsCount = topSummaryRowsCount + bottomSummaryRowsCount;
+  const headerAndTopSummaryRowsCount = headerRowsCount + topSummaryRowsCount;
+  const groupedColumnHeaderRowsCount = headerRowsCount - 1;
+  const minRowIdx = -headerAndTopSummaryRowsCount;
+  const mainHeaderIndex = minRowIdx + groupedColumnHeaderRowsCount;
+  const maxRowIdx = rows.length + bottomSummaryRowsCount - 1;
+
+  const [selectedPosition, setSelectedPosition] = useState(
+    (): SelectCellState | EditCellState<R> => ({ idx: -1, rowIdx: minRowIdx - 1, mode: 'SELECT' })
+  );
+
   /**
    * refs
    */
@@ -298,8 +323,8 @@ function DataGrid<R, SR, K extends Key>(
    * computed values
    */
   const isTreeGrid = role === 'treegrid';
-  const [gridRef, gridWidth, gridHeight] = useGridDimensions();
-  const clientHeight = gridHeight - headerRowHeight - summaryRowsCount * summaryRowHeight;
+  const headerRowsHeight = headerRowsCount * headerRowHeight;
+  const clientHeight = gridHeight - headerRowsHeight - summaryRowsCount * summaryRowHeight;
   const isSelectable = selectedRows != null && onSelectedRowsChange != null;
   const isRtl = direction === 'rtl';
   const leftKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
@@ -326,25 +351,6 @@ function DataGrid<R, SR, K extends Key>(
     );
   }, [rows, selectedRows, rowKeyGetter]);
 
-  const {
-    columns,
-    colSpanColumns,
-    colOverscanStartIdx,
-    colOverscanEndIdx,
-    templateColumns,
-    layoutCssVars,
-    lastFrozenColumnIndex,
-    totalFrozenColumnWidth
-  } = useCalculatedColumns({
-    rawColumns,
-    measuredColumnWidths,
-    resizedColumnWidths,
-    scrollLeft,
-    viewportWidth: gridWidth,
-    defaultColumnOptions,
-    enableVirtualization
-  });
-
   const {
     rowOverscanStartIdx,
     rowOverscanEndIdx,
@@ -403,8 +409,8 @@ function DataGrid<R, SR, K extends Key>(
   const selectRowLatest = useLatestFunc(selectRow);
   const handleFormatterRowChangeLatest = useLatestFunc(updateRow);
   const selectCellLatest = useLatestFunc(selectCell);
-  const selectHeaderCellLatest = useLatestFunc((idx: number) => {
-    selectCell({ rowIdx: minRowIdx, idx });
+  const selectHeaderCellLatest = useLatestFunc(({ idx, rowIdx }: Position) => {
+    selectCell({ rowIdx: minRowIdx + rowIdx - 1, idx });
   });
 
   /**
@@ -958,7 +964,7 @@ function DataGrid<R, SR, K extends Key>(
     setDraggedOverRowIdx(undefined);
   }
 
-  let templateRows = `${headerRowHeight}px`;
+  let templateRows = `repeat(${headerRowsCount}, ${headerRowHeight}px)`;
   if (topSummaryRowsCount > 0) {
     templateRows += ` repeat(${topSummaryRowsCount}, ${summaryRowHeight}px)`;
   }
@@ -999,7 +1005,7 @@ function DataGrid<R, SR, K extends Key>(
           scrollPaddingBlock:
             isRowIdxWithinViewportBounds(selectedPosition.rowIdx) ||
             scrollToPosition?.rowIdx !== undefined
-              ? `${headerRowHeight + topSummaryRowsCount * summaryRowHeight}px ${
+              ? `${headerRowsHeight + topSummaryRowsCount * summaryRowHeight}px ${
                   bottomSummaryRowsCount * summaryRowHeight
                 }px`
               : undefined,
@@ -1020,14 +1026,27 @@ function DataGrid<R, SR, K extends Key>(
       <DataGridDefaultRenderersProvider value={defaultGridComponents}>
         <RowSelectionChangeProvider value={selectRowLatest}>
           <RowSelectionProvider value={allRowsSelected}>
+            {Array.from({ length: groupedColumnHeaderRowsCount }, (_, index) => (
+              <GroupedColumnHeaderRow
+                key={index}
+                rowIdx={index + 1}
+                level={-groupedColumnHeaderRowsCount + index}
+                columns={getRowViewportColumns(minRowIdx + index)}
+                selectedCellIdx={
+                  selectedPosition.rowIdx === minRowIdx + index ? selectedPosition.idx : undefined
+                }
+                selectCell={selectHeaderCellLatest}
+              />
+            ))}
             <HeaderRow
-              columns={getRowViewportColumns(minRowIdx)}
+              rowIdx={headerRowsCount}
+              columns={getRowViewportColumns(mainHeaderIndex)}
               onColumnResize={handleColumnResizeLatest}
               sortColumns={sortColumns}
               onSortColumnsChange={onSortColumnsChangeLatest}
               lastFrozenColumnIndex={lastFrozenColumnIndex}
               selectedCellIdx={
-                selectedPosition.rowIdx === minRowIdx ? selectedPosition.idx : undefined
+                selectedPosition.rowIdx === mainHeaderIndex ? selectedPosition.idx : undefined
               }
               selectCell={selectHeaderCellLatest}
               shouldFocusGrid={!selectedCellIsWithinSelectionBounds}
@@ -1039,15 +1058,15 @@ function DataGrid<R, SR, K extends Key>(
           ) : (
             <>
               {topSummaryRows?.map((row, rowIdx) => {
-                const gridRowStart = headerRowsCount + rowIdx + 1;
-                const summaryRowIdx = rowIdx + minRowIdx + 1;
+                const gridRowStart = headerRowsCount + 1 + rowIdx;
+                const summaryRowIdx = mainHeaderIndex + 1 + rowIdx;
                 const isSummaryRowSelected = selectedPosition.rowIdx === summaryRowIdx;
-                const top = headerRowHeight + summaryRowHeight * rowIdx;
+                const top = headerRowsHeight + summaryRowHeight * rowIdx;
 
                 return (
                   <SummaryRow
-                    aria-rowindex={gridRowStart}
                     key={rowIdx}
+                    aria-rowindex={gridRowStart}
                     rowIdx={summaryRowIdx}
                     gridRowStart={gridRowStart}
                     row={row}

src/GroupedColumnHeaderCell.tsx

@@ -0,0 +1,54 @@
+import clsx from 'clsx';
+
+import { useRovingTabIndex } from './hooks';
+import { getHeaderCellRowSpan, getHeaderCellStyle } from './utils';
+import type { CalculatedColumnParent } from './types';
+import { type GroupedColumnHeaderRowProps } from './GroupedColumnHeaderRow';
+import { cellClassname } from './style/cell';
+
+type SharedGroupedColumnHeaderRowProps<R, SR> = Pick<
+  GroupedColumnHeaderRowProps<R, SR>,
+  'rowIdx' | 'selectCell'
+>;
+
+interface GroupedColumnHeaderCellProps<R, SR> extends SharedGroupedColumnHeaderRowProps<R, SR> {
+  column: CalculatedColumnParent<R, SR>;
+  isCellSelected: boolean;
+}
+
+export default function GroupedColumnHeaderCell<R, SR>({
+  column,
+  rowIdx,
+  isCellSelected,
+  selectCell
+}: GroupedColumnHeaderCellProps<R, SR>) {
+  const { tabIndex, onFocus } = useRovingTabIndex(isCellSelected);
+  const { colSpan } = column;
+  const rowSpan = getHeaderCellRowSpan(column, rowIdx);
+  const index = column.idx + 1;
+
+  function onClick() {
+    selectCell({ idx: column.idx, rowIdx });
+  }
+
+  return (
+    <div
+      role="columnheader"
+      aria-colindex={index}
+      aria-colspan={colSpan}
+      aria-rowspan={rowSpan}
+      aria-selected={isCellSelected}
+      tabIndex={tabIndex}
+      className={clsx(cellClassname, column.headerCellClass)}
+      style={{
+        ...getHeaderCellStyle(column, rowIdx, rowSpan),
+        gridColumnStart: index,
+        gridColumnEnd: index + colSpan
+      }}
+      onFocus={onFocus}
+      onClick={onClick}
+    >
+      {column.name}
+    </div>
+  );
+}

src/GroupedColumnHeaderRow.tsx

@@ -0,0 +1,63 @@
+import { memo } from 'react';
+
+import type { CalculatedColumn, CalculatedColumnParent, Position } from './types';
+import GroupedColumnHeaderCell from './GroupedColumnHeaderCell';
+import { headerRowClassname } from './HeaderRow';
+
+export interface GroupedColumnHeaderRowProps<R, SR> {
+  rowIdx: number;
+  level: number;
+  columns: readonly CalculatedColumn<R, SR>[];
+  selectCell: (position: Position) => void;
+  selectedCellIdx: number | undefined;
+}
+
+function GroupedColumnHeaderRow<R, SR>({
+  rowIdx,
+  level,
+  columns,
+  selectedCellIdx,
+  selectCell
+}: GroupedColumnHeaderRowProps<R, SR>) {
+  const cells = [];
+  const renderedParents = new Set<CalculatedColumnParent<R, SR>>();
+
+  for (const column of columns) {
+    let { parent } = column;
+
+    if (parent === undefined) continue;
+
+    while (parent.level > level) {
+      if (parent.parent === undefined) break;
+      parent = parent.parent;
+    }
+
+    if (parent.level === level && !renderedParents.has(parent)) {
+      renderedParents.add(parent);
+      const { idx } = parent;
+      cells.push(
+        <GroupedColumnHeaderCell<R, SR>
+          key={idx}
+          column={parent}
+          rowIdx={rowIdx}
+          isCellSelected={selectedCellIdx === idx}
+          selectCell={selectCell}
+        />
+      );
+    }
+  }
+
+  return (
+    <div
+      role="row"
+      aria-rowindex={rowIdx} // aria-rowindex is 1 based
+      className={headerRowClassname}
+    >
+      {cells}
+    </div>
+  );
+}
+
+export default memo(GroupedColumnHeaderRow) as <R, SR>(
+  props: GroupedColumnHeaderRowProps<R, SR>
+) => JSX.Element;