Use grid layout for rows, split column metrics from compute columns (#2272)

* Use grid layout for rows

* Fix getCellStyle type

* Split column and column metrics

* sticky -> left

* Allow decimals in column widths, also fix resiverobserver handling in Firefox

* move onEditorNavigation to keyboardUtils

* -width

Author: nstepien

src/Cell.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, useRef } from 'react';
 import clsx from 'clsx';
 
 import type { CellRendererProps } from './types';
-import { wrapEvent } from './utils';
+import { getCellStyle, wrapEvent } from './utils';
 import { useCombinedRefs } from './hooks';
 
 function Cell<R, SR>({
@@ -72,10 +72,7 @@ function Cell<R, SR>({
       aria-selected={isCellSelected}
       ref={useCombinedRefs(cellRef, ref)}
       className={className}
-      style={{
-        width: column.width,
-        left: column.left
-      }}
+      style={getCellStyle(column)}
       onClick={wrapEvent(handleClick, onClick)}
       onDoubleClick={wrapEvent(handleDoubleClick, onDoubleClick)}
       onContextMenu={wrapEvent(handleContextMenu, onContextMenu)}

src/DataGrid.tsx

@@ -16,7 +16,6 @@ import GroupRowRenderer from './GroupRow';
 import SummaryRow from './SummaryRow';
 import {
   assertIsValidKeyGetter,
-  getColumnScrollPosition,
   onEditorNavigation,
   getNextSelectedCellPosition,
   isSelectedCellEditable,
@@ -248,7 +247,7 @@ function DataGrid<R, SR>({
   const clientHeight = gridHeight - totalHeaderHeight - summaryRowsCount * rowHeight;
   const isSelectable = selectedRows !== undefined && onSelectedRowsChange !== undefined;
 
-  const { columns, viewportColumns, totalColumnWidth, lastFrozenColumnIndex, totalFrozenColumnWidth, groupBy } = useViewportColumns({
+  const { columns, viewportColumns, layoutCssVars, columnMetrics, totalColumnWidth, lastFrozenColumnIndex, totalFrozenColumnWidth, groupBy } = useViewportColumns({
     rawColumns,
     columnWidths,
     scrollLeft,
@@ -637,12 +636,13 @@ function DataGrid<R, SR>({
 
     if (typeof idx === 'number' && idx > lastFrozenColumnIndex) {
       const { clientWidth } = current;
-      const { left, width } = columns[idx];
-      const isCellAtLeftBoundary = left < scrollLeft + width + totalFrozenColumnWidth;
+      const { left, width } = columnMetrics.get(columns[idx])!;
+      const isCellAtLeftBoundary = left < scrollLeft + totalFrozenColumnWidth;
       const isCellAtRightBoundary = left + width > clientWidth + scrollLeft;
-      if (isCellAtLeftBoundary || isCellAtRightBoundary) {
-        const newScrollLeft = getColumnScrollPosition(columns, idx, scrollLeft, clientWidth);
-        current.scrollLeft = scrollLeft + newScrollLeft;
+      if (isCellAtLeftBoundary) {
+        current.scrollLeft = left - totalFrozenColumnWidth;
+      } else if (isCellAtRightBoundary) {
+        current.scrollLeft = left + width - clientWidth;
       }
     }
 
@@ -884,7 +884,8 @@ function DataGrid<R, SR>({
         '--header-row-height': `${headerRowHeight}px`,
         '--filter-row-height': `${headerFiltersHeight}px`,
         '--row-width': `${totalColumnWidth}px`,
-        '--row-height': `${rowHeight}px`
+        '--row-height': `${rowHeight}px`,
+        ...layoutCssVars
       } as unknown as React.CSSProperties}
       ref={gridRef}
       onScroll={handleScroll}

src/EditCell.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback } from 'react';
 import clsx from 'clsx';
 
 import EditorContainer from './editors/EditorContainer';
+import { getCellStyle } from './utils';
 import type { CellRendererProps, SharedEditorProps, Omit } from './types';
 
 type SharedCellRendererProps<R, SR> = Pick<CellRendererProps<R, SR>,
@@ -69,10 +70,7 @@ export default function EditCell<R, SR>({
       aria-selected
       ref={cellRef}
       className={className}
-      style={{
-        width: column.width,
-        left: column.left
-      }}
+      style={getCellStyle(column)}
       {...props}
     >
       {getCellContent()}

src/FilterRow.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import clsx from 'clsx';
 
+import { getCellStyle } from './utils';
 import type { CalculatedColumn, Filters } from './types';
 import type { DataGridProps } from './DataGrid';
 
@@ -32,21 +33,16 @@ function FilterRow<R, SR>({
     >
       {columns.map(column => {
         const { key } = column;
-
         const className = clsx('rdg-cell', {
           'rdg-cell-frozen': column.frozen,
           'rdg-cell-frozen-last': column.isLastFrozenColumn
         });
-        const style: React.CSSProperties = {
-          width: column.width,
-          left: column.left
-        };
 
         return (
           <div
             key={key}
-            style={style}
             className={className}
+            style={getCellStyle(column)}
           >
             {column.filterRenderer && (
               <column.filterRenderer

src/GroupCell.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import clsx from 'clsx';
 
+import { getCellStyle } from './utils';
 import type { CalculatedColumn } from './types';
 import type { GroupRowRendererProps } from './GroupRow';
 
@@ -56,8 +57,7 @@ function GroupCell<R, SR>({
         'rdg-cell-selected': isCellSelected
       })}
       style={{
-        width: column.width,
-        left: column.left,
+        ...getCellStyle(column),
         cursor: isLevelMatching ? 'pointer' : 'default'
       }}
       onClick={isLevelMatching ? toggleGroup : undefined}

src/HeaderCell.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import type { CalculatedColumn } from './types';
 import type { HeaderRowProps } from './HeaderRow';
 import SortableHeaderCell from './headerCells/SortableHeaderCell';
+import { getCellStyle } from './utils';
 import type { SortDirection } from './enums';
 
 function getAriaSort(sortDirection?: SortDirection) {
@@ -109,18 +110,14 @@ export default function HeaderCell<R, SR>({
     'rdg-cell-frozen': column.frozen,
     'rdg-cell-frozen-last': column.isLastFrozenColumn
   });
-  const style: React.CSSProperties = {
-    width: column.width,
-    left: column.left
-  };
 
   return (
     <div
       role="columnheader"
       aria-colindex={column.idx + 1}
       aria-sort={sortColumn === column.key ? getAriaSort(sortDirection) : undefined}
       className={className}
-      style={style}
+      style={getCellStyle(column)}
       onPointerDown={column.resizable ? onPointerDown : undefined}
     >
       {getCell()}

src/SummaryCell.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import clsx from 'clsx';
 
+import { getCellStyle } from './utils';
 import type { CellRendererProps } from './types';
 
 type SharedCellRendererProps<R, SR> = Pick<CellRendererProps<R, SR>, 'column'>;
@@ -13,7 +14,7 @@ function SummaryCell<R, SR>({
   column,
   row
 }: SummaryCellProps<R, SR>) {
-  const { summaryFormatter: SummaryFormatter, width, left, summaryCellClass } = column;
+  const { summaryFormatter: SummaryFormatter, summaryCellClass } = column;
   const className = clsx(
     'rdg-cell',
     {
@@ -28,7 +29,7 @@ function SummaryCell<R, SR>({
       role="gridcell"
       aria-colindex={column.idx + 1}
       className={className}
-      style={{ width, left }}
+      style={getCellStyle(column)}
     >
       {SummaryFormatter && <SummaryFormatter column={column} row={row} />}
     </div>

src/hooks/useGridDimensions.ts

@@ -24,10 +24,12 @@ export function useGridDimensions(): [React.RefObject<HTMLDivElement>, number, n
     // don't break in jest/jsdom and browsers that don't support ResizeObserver
     if (ResizeObserver == null) return;
 
-    const resizeObserver = new ResizeObserver(entries => {
-      const { width, height } = entries[0].contentRect;
-      setGridWidth(width);
-      setGridHeight(height);
+    const resizeObserver = new ResizeObserver(() => {
+      // Get dimensions without scrollbars.
+      // The dimensions given by the callback entries in Firefox do not substract the scrollbar sizes.
+      const { clientWidth, clientHeight } = gridRef.current!;
+      setGridWidth(clientWidth);
+      setGridHeight(clientHeight);
     });
 
     resizeObserver.observe(gridRef.current!);