Add column.colSpan prop

src/Cell.tsx

@@ -44,6 +44,7 @@ const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;
 function Cell<R, SR>({
   className,
   column,
+  colSpan,
   isCellSelected,
   isCopied,
   isDraggedOver,
@@ -105,9 +106,10 @@ function Cell<R, SR>({
       role="gridcell"
       aria-colindex={column.idx + 1} // aria-colindex is 1-based
       aria-selected={isCellSelected}
+      aria-colspan={colSpan}
       ref={ref}
       className={className}
-      style={getCellStyle(column)}
+      style={getCellStyle(column, colSpan)}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       onContextMenu={handleContextMenu}

src/DataGrid.tsx

@@ -10,7 +10,7 @@ import type { RefAttributes } from 'react';
 import clsx from 'clsx';
 
 import { rootClassname, viewportDraggingClassname, focusSinkClassname } from './style';
-import { useGridDimensions, useViewportColumns, useViewportRows, useLatestFunc } from './hooks';
+import { useGridDimensions, useCalculatedColumns, useViewportColumns, useViewportRows, useLatestFunc } from './hooks';
 import HeaderRow from './HeaderRow';
 import FilterRow from './FilterRow';
 import Row from './Row';
@@ -258,7 +258,18 @@ function DataGrid<R, SR>({
   const clientHeight = gridHeight - totalHeaderHeight - summaryRowsCount * summaryRowHeight;
   const isSelectable = selectedRows !== undefined && onSelectedRowsChange !== undefined;
 
-  const { columns, viewportColumns, layoutCssVars, columnMetrics, totalColumnWidth, lastFrozenColumnIndex, totalFrozenColumnWidth, groupBy } = useViewportColumns({
+  const {
+    columns,
+    colSpanColumns,
+    colOverscanStartIdx,
+    colOverscanEndIdx,
+    layoutCssVars,
+    columnMetrics,
+    totalColumnWidth,
+    lastFrozenColumnIndex,
+    totalFrozenColumnWidth,
+    groupBy
+  } = useCalculatedColumns({
     rawColumns,
     columnWidths,
     scrollLeft,
@@ -279,6 +290,20 @@ function DataGrid<R, SR>({
     enableVirtualization
   });
 
+  const viewportColumns = useViewportColumns({
+    columns,
+    colSpanColumns,
+    colOverscanStartIdx,
+    colOverscanEndIdx,
+    lastFrozenColumnIndex,
+    rowOverscanStartIdx,
+    rowOverscanEndIdx,
+    rows,
+    summaryRows,
+    enableFilterRow,
+    isGroupRow
+  });
+
   const hasGroups = groupBy.length > 0 && typeof rowGrouper === 'function';
   const minColIdx = hasGroups ? -1 : 0;
 
@@ -778,12 +803,16 @@ function DataGrid<R, SR>({
     event.preventDefault();
 
     const ctrlKey = isCtrlKeyHeldDown(event);
-    let nextPosition = getNextPosition(key, ctrlKey, shiftKey);
-    nextPosition = getNextSelectedCellPosition({
+    const nextPosition = getNextSelectedCellPosition({
       columns,
-      rowsCount: rows.length,
+      colSpanColumns,
+      rows,
+      lastFrozenColumnIndex,
       cellNavigationMode: mode,
-      nextPosition
+      currentPosition: selectedPosition,
+      nextPosition: getNextPosition(key, ctrlKey, shiftKey),
+      isCellWithinBounds,
+      isGroupRow
     });
 
     selectCell(nextPosition);
@@ -887,6 +916,7 @@ function DataGrid<R, SR>({
           copiedCellIdx={copiedCell !== null && copiedCell.row === row ? columns.findIndex(c => c.key === copiedCell.columnKey) : undefined}
           draggedOverCellIdx={getDraggedOverCellIdx(rowIdx)}
           setDraggedOverRowIdx={isDragging ? setDraggedOverRowIdx : undefined}
+          lastFrozenColumnIndex={lastFrozenColumnIndex}
           selectedCellProps={getSelectedCellProps(rowIdx)}
           onRowChange={handleFormatterRowChangeWrapper}
           selectCell={selectCellWrapper}
@@ -941,6 +971,7 @@ function DataGrid<R, SR>({
         sortColumn={sortColumn}
         sortDirection={sortDirection}
         onSort={onSort}
+        lastFrozenColumnIndex={lastFrozenColumnIndex}
       />
       {enableFilterRow && (
         <FilterRow<R, SR>
@@ -968,6 +999,7 @@ function DataGrid<R, SR>({
               row={row}
               bottom={summaryRowHeight * (summaryRows.length - 1 - rowIdx)}
               viewportColumns={viewportColumns}
+              lastFrozenColumnIndex={lastFrozenColumnIndex}
             />
           ))}
         </>

src/EditCell.tsx

@@ -16,6 +16,7 @@ type SharedCellRendererProps<R, SR> = Pick<CellRendererProps<R, SR>,
   | 'rowIdx'
   | 'row'
   | 'column'
+  | 'colSpan'
 >;
 
 interface EditCellProps<R, SR> extends SharedCellRendererProps<R, SR>, Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
@@ -25,6 +26,7 @@ interface EditCellProps<R, SR> extends SharedCellRendererProps<R, SR>, Omit<Reac
 export default function EditCell<R, SR>({
   className,
   column,
+  colSpan,
   row,
   rowIdx,
   editorProps,
@@ -73,7 +75,7 @@ export default function EditCell<R, SR>({
       aria-selected
       ref={cellRef}
       className={className}
-      style={getCellStyle(column)}
+      style={getCellStyle(column, colSpan)}
       {...props}
     >
       {getCellContent()}

src/HeaderCell.tsx

@@ -39,12 +39,14 @@ type SharedHeaderRowProps<R, SR> = Pick<HeaderRowProps<R, SR>,
 
 export interface HeaderCellProps<R, SR> extends SharedHeaderRowProps<R, SR> {
   column: CalculatedColumn<R, SR>;
+  colSpan?: number;
   onResize: (column: CalculatedColumn<R, SR>, width: number) => void;
   onAllRowsSelectionChange: (checked: boolean) => void;
 }
 
 export default function HeaderCell<R, SR>({
   column,
+  colSpan,
   onResize,
   allRowsSelected,
   onAllRowsSelectionChange,
@@ -128,7 +130,7 @@ export default function HeaderCell<R, SR>({
       aria-colindex={column.idx + 1}
       aria-sort={sortColumn === column.key ? getAriaSort(sortDirection) : undefined}
       className={className}
-      style={getCellStyle(column)}
+      style={getCellStyle(column, colSpan)}
       onPointerDown={column.resizable ? onPointerDown : undefined}
     >
       {getCell()}

src/HeaderRow.tsx

@@ -2,7 +2,7 @@ import { useCallback, memo } from 'react';
 
 import HeaderCell from './HeaderCell';
 import type { CalculatedColumn } from './types';
-import { assertIsValidKeyGetter } from './utils';
+import { assertIsValidKeyGetter, getColSpan } from './utils';
 import type { DataGridProps } from './DataGrid';
 import { headerRowClassname } from './style';
 
@@ -19,6 +19,7 @@ export interface HeaderRowProps<R, SR> extends SharedDataGridProps<R, SR> {
   columns: readonly CalculatedColumn<R, SR>[];
   allRowsSelected: boolean;
   onColumnResize: (column: CalculatedColumn<R, SR>, width: number) => void;
+  lastFrozenColumnIndex: number;
 }
 
 function HeaderRow<R, SR>({
@@ -30,7 +31,8 @@ function HeaderRow<R, SR>({
   onColumnResize,
   sortColumn,
   sortDirection,
-  onSort
+  onSort,
+  lastFrozenColumnIndex
 }: HeaderRowProps<R, SR>) {
   const handleAllRowsSelectionChange = useCallback((checked: boolean) => {
     if (!onSelectedRowsChange) return;
@@ -41,26 +43,36 @@ function HeaderRow<R, SR>({
     onSelectedRowsChange(newSelectedRows);
   }, [onSelectedRowsChange, rows, rowKeyGetter]);
 
+  const cells = [];
+  for (let index = 0; index < columns.length; index++) {
+    const column = columns[index];
+    const colSpan = getColSpan(column, lastFrozenColumnIndex, { type: 'HEADER' });
+    if (colSpan !== undefined) {
+      index += colSpan - 1;
+    }
+
+    cells.push(
+      <HeaderCell<R, SR>
+        key={column.key}
+        column={column}
+        colSpan={colSpan}
+        onResize={onColumnResize}
+        allRowsSelected={allRowsSelected}
+        onAllRowsSelectionChange={handleAllRowsSelectionChange}
+        onSort={onSort}
+        sortColumn={sortColumn}
+        sortDirection={sortDirection}
+      />
+    );
+  }
+
   return (
     <div
       role="row"
       aria-rowindex={1} // aria-rowindex is 1 based
       className={headerRowClassname}
     >
-      {columns.map(column => {
-        return (
-          <HeaderCell<R, SR>
-            key={column.key}
-            column={column}
-            onResize={onColumnResize}
-            allRowsSelected={allRowsSelected}
-            onAllRowsSelectionChange={handleAllRowsSelectionChange}
-            onSort={onSort}
-            sortColumn={sortColumn}
-            sortDirection={sortDirection}
-          />
-        );
-      })}
+      {cells}
     </div>
   );
 }

src/Row.tsx

@@ -3,6 +3,7 @@ import type { RefAttributes } from 'react';
 import clsx from 'clsx';
 
 import { groupRowSelectedClassname, rowClassname, rowSelectedClassname } from './style';
+import { getColSpan } from './utils';
 import Cell from './Cell';
 import EditCell from './EditCell';
 import type { RowRendererProps, SelectedCellProps } from './types';
@@ -14,6 +15,7 @@ function Row<R, SR = unknown>({
   isRowSelected,
   copiedCellIdx,
   draggedOverCellIdx,
+  lastFrozenColumnIndex,
   row,
   viewportColumns,
   selectedCellProps,
@@ -44,6 +46,52 @@ function Row<R, SR = unknown>({
     className
   );
 
+  const cells = [];
+  for (let index = 0; index < viewportColumns.length; index++) {
+    const column = viewportColumns[index];
+    const colSpan = getColSpan(column, lastFrozenColumnIndex, { type: 'ROW', row });
+    if (colSpan !== undefined) {
+      index += colSpan - 1;
+    }
+
+    const isCellSelected = selectedCellProps?.idx === column.idx;
+    if (selectedCellProps?.mode === 'EDIT' && isCellSelected) {
+      cells.push(
+        <EditCell<R, SR>
+          key={column.key}
+          rowIdx={rowIdx}
+          column={column}
+          colSpan={colSpan}
+          row={row}
+          onKeyDown={selectedCellProps.onKeyDown}
+          editorProps={selectedCellProps.editorProps}
+        />
+      );
+      continue;
+    }
+
+    cells.push(
+      <CellRenderer
+        key={column.key}
+        rowIdx={rowIdx}
+        column={column}
+        colSpan={colSpan}
+        row={row}
+        isCopied={copiedCellIdx === column.idx}
+        isDraggedOver={draggedOverCellIdx === column.idx}
+        isCellSelected={isCellSelected}
+        isRowSelected={isRowSelected}
+        dragHandleProps={isCellSelected ? (selectedCellProps as SelectedCellProps).dragHandleProps : undefined}
+        onFocus={isCellSelected ? (selectedCellProps as SelectedCellProps).onFocus : undefined}
+        onKeyDown={isCellSelected ? selectedCellProps!.onKeyDown : undefined}
+        onRowClick={onRowClick}
+        onRowChange={onRowChange}
+        selectCell={selectCell}
+        selectRow={selectRow}
+      />
+    );
+  }
+
   return (
     <div
       role="row"
@@ -55,41 +103,7 @@ function Row<R, SR = unknown>({
       style={{ top }}
       {...props}
     >
-      {viewportColumns.map(column => {
-        const isCellSelected = selectedCellProps?.idx === column.idx;
-        if (selectedCellProps?.mode === 'EDIT' && isCellSelected) {
-          return (
-            <EditCell<R, SR>
-              key={column.key}
-              rowIdx={rowIdx}
-              column={column}
-              row={row}
-              onKeyDown={selectedCellProps.onKeyDown}
-              editorProps={selectedCellProps.editorProps}
-            />
-          );
-        }
-
-        return (
-          <CellRenderer
-            key={column.key}
-            rowIdx={rowIdx}
-            column={column}
-            row={row}
-            isCopied={copiedCellIdx === column.idx}
-            isDraggedOver={draggedOverCellIdx === column.idx}
-            isCellSelected={isCellSelected}
-            isRowSelected={isRowSelected}
-            dragHandleProps={isCellSelected ? (selectedCellProps as SelectedCellProps).dragHandleProps : undefined}
-            onFocus={isCellSelected ? (selectedCellProps as SelectedCellProps).onFocus : undefined}
-            onKeyDown={isCellSelected ? selectedCellProps!.onKeyDown : undefined}
-            onRowClick={onRowClick}
-            onRowChange={onRowChange}
-            selectCell={selectCell}
-            selectRow={selectRow}
-          />
-        );
-      })}
+      {cells}
     </div>
   );
 }

src/SummaryCell.tsx

@@ -3,14 +3,15 @@ import { memo } from 'react';
 import { getCellStyle, getCellClassname } from './utils';
 import type { CellRendererProps } from './types';
 
-type SharedCellRendererProps<R, SR> = Pick<CellRendererProps<R, SR>, 'column'>;
+type SharedCellRendererProps<R, SR> = Pick<CellRendererProps<R, SR>, 'column' | 'colSpan'>;
 
 interface SummaryCellProps<R, SR> extends SharedCellRendererProps<R, SR> {
   row: SR;
 }
 
 function SummaryCell<R, SR>({
   column,
+  colSpan,
   row
 }: SummaryCellProps<R, SR>) {
   const { summaryFormatter: SummaryFormatter, summaryCellClass } = column;
@@ -23,7 +24,7 @@ function SummaryCell<R, SR>({
       role="gridcell"
       aria-colindex={column.idx + 1}
       className={className}
-      style={getCellStyle(column)}
+      style={getCellStyle(column, colSpan)}
     >
       {SummaryFormatter && <SummaryFormatter column={column} row={row} />}
     </div>