Feature: Add support for flex column width (adazzle#2839)

* Add support for "auto" width

* Calculate columns when grid width is set

* Remove unnecessary code

* Add support for css column units (fr, %, max-content)

* Bring back virtualization

* Remove console

* Fix minWidth and examples

* Add min width

* Disable @typescript-eslint/naming-convention

* Add comments

* Revent some changes

* Use getBoundingClientRect

* Rename variables

* support flex width on all the columns

* Fix tests

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Address a few comments

* Move width type close to minWidth

* Do not reset max-content columns

* Remove flexColumnWidths state

* Add max-content example

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Fix classname

* Update src/hooks/useGridDimensions.ts

Co-authored-by: Nicolas Stepien <[email protected]>

* Remove useMemo

* Add back useMemo

* tweak autosizeColumnsClassname for better measuring

* Revert "tweak autosizeColumnsClassname for better measuring"

This reverts commit 151d724.

Co-authored-by: Aman Mahajan <[email protected]>
Co-authored-by: Nicolas Stepien <[email protected]>
Co-authored-by: Nicolas Stepien <[email protected]>

Author: amanmahajan7

src/DataGrid.tsx

@@ -7,7 +7,7 @@ import {
   rootClassname,
   viewportDraggingClassname,
   focusSinkClassname,
-  cellAutoResizeClassname,
+  autosizeColumnsClassname,
   rowSelected,
   rowSelectedWithFrozenCell
 } from './style';
@@ -282,7 +282,7 @@ function DataGrid<R, SR, K extends Key>(
   /**
    * computed values
    */
-  const [gridRef, gridWidth, gridHeight] = useGridDimensions();
+  const [gridRef, gridWidth, gridHeight, isWidthInitialized] = useGridDimensions();
   const headerRowsCount = 1;
   const topSummaryRowsCount = topSummaryRows?.length ?? 0;
   const bottomSummaryRowsCount = bottomSummaryRows?.length ?? 0;
@@ -355,7 +355,7 @@ function DataGrid<R, SR, K extends Key>(
     enableVirtualization
   });
 
-  const viewportColumns = useViewportColumns({
+  const { viewportColumns, flexWidthViewportColumns } = useViewportColumns({
     columns,
     colSpanColumns,
     colOverscanStartIdx,
@@ -366,6 +366,7 @@ function DataGrid<R, SR, K extends Key>(
     rows,
     topSummaryRows,
     bottomSummaryRows,
+    columnWidths,
     isGroupRow
   });
 
@@ -432,6 +433,25 @@ function DataGrid<R, SR, K extends Key>(
     }
   });
 
+  useLayoutEffect(() => {
+    if (!isWidthInitialized || flexWidthViewportColumns.length === 0) return;
+    const newColumnWidths = new Map<string, number>();
+    for (const column of flexWidthViewportColumns) {
+      const columnElement = gridRef.current!.querySelector<HTMLDivElement>(
+        `[aria-colindex="${column.idx + 1}"]`
+      );
+      if (columnElement) {
+        // Set the actual width of the column after it is rendered
+        const { width } = columnElement.getBoundingClientRect();
+        newColumnWidths.set(column.key, width);
+      }
+    }
+    if (newColumnWidths.size === 0) return;
+    setColumnWidths((columnWidths) => {
+      return new Map([...columnWidths, ...newColumnWidths]);
+    });
+  }, [isWidthInitialized, flexWidthViewportColumns, gridRef]);
+
   useLayoutEffect(() => {
     if (autoResizeColumn === null) return;
     const columnElement = gridRef.current!.querySelector(
@@ -465,8 +485,8 @@ function DataGrid<R, SR, K extends Key>(
    * callbacks
    */
   const handleColumnResize = useCallback(
-    (column: CalculatedColumn<R, SR>, width: number | 'auto') => {
-      if (width === 'auto') {
+    (column: CalculatedColumn<R, SR>, width: number | 'max-content') => {
+      if (width === 'max-content') {
         setAutoResizeColumn(column);
         return;
       }
@@ -909,10 +929,16 @@ function DataGrid<R, SR, K extends Key>(
   }
 
   function getLayoutCssVars() {
-    if (autoResizeColumn === null) return layoutCssVars;
+    if (autoResizeColumn === null && flexWidthViewportColumns.length === 0) return layoutCssVars;
     const { gridTemplateColumns } = layoutCssVars;
     const newSizes = gridTemplateColumns.split(' ');
-    newSizes[autoResizeColumn.idx] = 'max-content';
+    if (autoResizeColumn !== null) {
+      newSizes[autoResizeColumn.idx] = 'max-content';
+    }
+    for (const column of flexWidthViewportColumns) {
+      newSizes[column.idx] = column.width as string;
+    }
+
     return {
       ...layoutCssVars,
       gridTemplateColumns: newSizes.join(' ')
@@ -1146,7 +1172,8 @@ function DataGrid<R, SR, K extends Key>(
         rootClassname,
         {
           [viewportDraggingClassname]: isDragging,
-          [cellAutoResizeClassname]: autoResizeColumn !== null
+          [autosizeColumnsClassname]:
+            autoResizeColumn !== null || flexWidthViewportColumns.length > 0
         },
         className
       )}

src/HeaderCell.tsx

@@ -155,7 +155,7 @@ export default function HeaderCell<R, SR>({
       return;
     }
 
-    onColumnResize(column, 'auto');
+    onColumnResize(column, 'max-content');
   }
 
   function handleFocus(event: React.FocusEvent<HTMLDivElement>) {

src/HeaderRow.tsx

@@ -17,7 +17,7 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
   columns: readonly CalculatedColumn<R, SR>[];
   allRowsSelected: boolean;
   onAllRowsSelectionChange: (checked: boolean) => void;
-  onColumnResize: (column: CalculatedColumn<R, SR>, width: number | 'auto') => void;
+  onColumnResize: (column: CalculatedColumn<R, SR>, width: number | 'max-content') => void;
   selectCell: (columnIdx: number) => void;
   lastFrozenColumnIndex: number;
   selectedCellIdx: number | undefined;

src/hooks/useCalculatedColumns.ts

@@ -4,7 +4,7 @@ import type { CalculatedColumn, Column, Maybe } from '../types';
 import type { DataGridProps } from '../DataGrid';
 import { valueFormatter, toggleGroupFormatter } from '../formatters';
 import { SELECT_COLUMN_KEY } from '../Columns';
-import { clampColumnWidth, floor, max, min, round } from '../utils';
+import { clampColumnWidth, max, min } from '../utils';
 
 type Mutable<T> = {
   -readonly [P in keyof T]: T[P];
@@ -15,6 +15,9 @@ interface ColumnMetric {
   left: number;
 }
 
+const DEFAULT_COLUMN_WIDTH = 'auto';
+const DEFAULT_COLUMN_MIN_WIDTH = 80;
+
 interface CalculatedColumnsArgs<R, SR> extends Pick<DataGridProps<R, SR>, 'defaultColumnOptions'> {
   rawColumns: readonly Column<R, SR>[];
   rawGroupBy: Maybe<readonly string[]>;
@@ -33,8 +36,8 @@ export function useCalculatedColumns<R, SR>({
   rawGroupBy,
   enableVirtualization
 }: CalculatedColumnsArgs<R, SR>) {
-  const defaultWidth = defaultColumnOptions?.width;
-  const defaultMinWidth = defaultColumnOptions?.minWidth ?? 80;
+  const defaultWidth = defaultColumnOptions?.width ?? DEFAULT_COLUMN_WIDTH;
+  const defaultMinWidth = defaultColumnOptions?.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH;
   const defaultMaxWidth = defaultColumnOptions?.maxWidth;
   const defaultFormatter = defaultColumnOptions?.formatter ?? valueFormatter;
   const defaultSortable = defaultColumnOptions?.sortable ?? false;
@@ -148,38 +151,19 @@ export function useCalculatedColumns<R, SR>({
     let left = 0;
     let totalFrozenColumnWidth = 0;
     let templateColumns = '';
-    let allocatedWidth = 0;
-    let unassignedColumnsCount = 0;
 
     for (const column of columns) {
-      let width = getSpecifiedWidth(column, columnWidths, viewportWidth);
-
-      if (width === undefined) {
-        unassignedColumnsCount++;
-      } else {
+      let width = columnWidths.get(column.key) ?? column.width;
+      if (typeof width === 'number') {
         width = clampColumnWidth(width, column);
-        allocatedWidth += width;
-        columnMetrics.set(column, { width, left: 0 });
-      }
-    }
-
-    for (const column of columns) {
-      let width: number;
-      if (columnMetrics.has(column)) {
-        const columnMetric = columnMetrics.get(column)!;
-        columnMetric.left = left;
-        ({ width } = columnMetric);
       } else {
-        // avoid decimals as subpixel positioning can lead to cell borders not being displayed
-        const unallocatedWidth = viewportWidth - allocatedWidth;
-        const unallocatedColumnWidth = round(unallocatedWidth / unassignedColumnsCount);
-        width = clampColumnWidth(unallocatedColumnWidth, column);
-        allocatedWidth += width;
-        unassignedColumnsCount--;
-        columnMetrics.set(column, { width, left });
+        // This is a placeholder width so we can continue to use virtualization.
+        // The actual value is set after the column is rendered
+        width = column.minWidth;
       }
-      left += width;
       templateColumns += `${width}px `;
+      columnMetrics.set(column, { width, left });
+      left += width;
     }
 
     if (lastFrozenColumnIndex !== -1) {
@@ -197,7 +181,7 @@ export function useCalculatedColumns<R, SR>({
     }
 
     return { layoutCssVars, totalFrozenColumnWidth, columnMetrics };
-  }, [columnWidths, columns, viewportWidth, lastFrozenColumnIndex]);
+  }, [columnWidths, columns, lastFrozenColumnIndex]);
 
   const [colOverscanStartIdx, colOverscanEndIdx] = useMemo((): [number, number] => {
     if (!enableVirtualization) {
@@ -265,22 +249,3 @@ export function useCalculatedColumns<R, SR>({
     groupBy
   };
 }
-
-function getSpecifiedWidth<R, SR>(
-  { key, width }: Column<R, SR>,
-  columnWidths: ReadonlyMap<string, number>,
-  viewportWidth: number
-): number | undefined {
-  if (columnWidths.has(key)) {
-    // Use the resized width if available
-    return columnWidths.get(key);
-  }
-
-  if (typeof width === 'number') {
-    return width;
-  }
-  if (typeof width === 'string' && /^\d+%$/.test(width)) {
-    return floor((viewportWidth * parseInt(width, 10)) / 100);
-  }
-  return undefined;
-}

src/hooks/useGridDimensions.ts

@@ -6,11 +6,13 @@ import { ceil } from '../utils';
 export function useGridDimensions(): [
   ref: React.RefObject<HTMLDivElement>,
   width: number,
-  height: number
+  height: number,
+  isWidthInitialized: boolean
 ] {
   const gridRef = useRef<HTMLDivElement>(null);
   const [inlineSize, setInlineSize] = useState(1);
   const [blockSize, setBlockSize] = useState(1);
+  const [isWidthInitialized, setWidthInitialized] = useState(false);
 
   useLayoutEffect(() => {
     const { ResizeObserver } = window;
@@ -31,6 +33,7 @@ export function useGridDimensions(): [
       const size = entries[0].contentBoxSize[0];
       setInlineSize(handleDevicePixelRatio(size.inlineSize));
       setBlockSize(size.blockSize);
+      setWidthInitialized(true);
     });
     resizeObserver.observe(gridRef.current!);
 
@@ -39,7 +42,7 @@ export function useGridDimensions(): [
     };
   }, []);
 
-  return [gridRef, inlineSize, blockSize];
+  return [gridRef, inlineSize, blockSize, isWidthInitialized];
 }
 
 // TODO: remove once fixed upstream

src/hooks/useViewportColumns.ts

@@ -14,6 +14,7 @@ interface ViewportColumnsArgs<R, SR> {
   lastFrozenColumnIndex: number;
   rowOverscanStartIdx: number;
   rowOverscanEndIdx: number;
+  columnWidths: ReadonlyMap<string, number>;
   isGroupRow: (row: R | GroupRow<R>) => row is GroupRow<R>;
 }
 
@@ -28,6 +29,7 @@ export function useViewportColumns<R, SR>({
   lastFrozenColumnIndex,
   rowOverscanStartIdx,
   rowOverscanEndIdx,
+  columnWidths,
   isGroupRow
 }: ViewportColumnsArgs<R, SR>) {
   // find the column that spans over a column within the visible columns range and adjust colOverscanStartIdx
@@ -104,15 +106,31 @@ export function useViewportColumns<R, SR>({
     isGroupRow
   ]);
 
-  return useMemo((): readonly CalculatedColumn<R, SR>[] => {
+  const { viewportColumns, flexWidthViewportColumns } = useMemo((): {
+    viewportColumns: readonly CalculatedColumn<R, SR>[];
+    flexWidthViewportColumns: readonly CalculatedColumn<R, SR>[];
+  } => {
     const viewportColumns: CalculatedColumn<R, SR>[] = [];
+    const flexWidthViewportColumns: CalculatedColumn<R, SR>[] = [];
     for (let colIdx = 0; colIdx <= colOverscanEndIdx; colIdx++) {
       const column = columns[colIdx];
 
       if (colIdx < startIdx && !column.frozen) continue;
       viewportColumns.push(column);
+      if (typeof column.width === 'string') {
+        flexWidthViewportColumns.push(column);
+      }
     }
 
-    return viewportColumns;
+    return { viewportColumns, flexWidthViewportColumns };
   }, [startIdx, colOverscanEndIdx, columns]);
+
+  const unsizedFlexWidthViewportColumns = useMemo((): readonly CalculatedColumn<R, SR>[] => {
+    return flexWidthViewportColumns.filter((column) => !columnWidths.has(column.key));
+  }, [flexWidthViewportColumns, columnWidths]);
+
+  return {
+    viewportColumns,
+    flexWidthViewportColumns: unsizedFlexWidthViewportColumns
+  };
 }

src/style/cell.ts

@@ -33,7 +33,7 @@ export const cell = css`
 export const cellClassname = `rdg-cell ${cell}`;
 
 // max-content does not calculate width when contain is set to style or size
-export const cellAutoResizeClassname = css`
+export const autosizeColumnsClassname = css`
   @layer rdg.Root {
     .${cell} {
       contain: content;

src/types.ts

@@ -55,6 +55,7 @@ export interface Column<TRow, TSummaryRow = unknown> {
 
 export interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
   readonly idx: number;
+  readonly width: number | string;
   readonly minWidth: number;
   readonly resizable: boolean;
   readonly sortable: boolean;

test/column/formatter.test.tsx

@@ -108,7 +108,7 @@ describe('Custom formatter component', () => {
         resizable: false,
         rowGroup: false,
         sortable: false,
-        width: undefined
+        width: 'auto'
       },
       indexes: [0]
     });

website/demos/AllFeatures.tsx

@@ -89,7 +89,7 @@ const columns: readonly Column<Row>[] = [
   {
     key: 'email',
     name: 'Email',
-    width: 200,
+    width: 'max-content',
     resizable: true,
     editor: textEditor
   },
@@ -124,7 +124,7 @@ const columns: readonly Column<Row>[] = [
   {
     key: 'catchPhrase',
     name: 'Catch Phrase',
-    width: 200,
+    width: 'max-content',
     resizable: true,
     editor: textEditor
   },
@@ -138,7 +138,7 @@ const columns: readonly Column<Row>[] = [
   {
     key: 'sentence',
     name: 'Sentence',
-    width: 200,
+    width: 'max-content',
     resizable: true,
     editor: textEditor
   }

website/demos/ColumnSpanning.tsx

@@ -32,6 +32,7 @@ export default function ColumnSpanning({ direction }: Props) {
         key,
         name: key,
         frozen: i < 5,
+        width: 80,
         resizable: true,
         formatter: cellFormatter,
         colSpan(args) {

website/demos/ColumnsReordering.tsx

@@ -126,6 +126,7 @@ export default function ColumnsReordering({ direction }: Props) {
         sortColumns={sortColumns}
         onSortColumnsChange={onSortColumnsChange}
         direction={direction}
+        defaultColumnOptions={{ width: '1fr' }}
       />
     </DndProvider>
   );

website/demos/CommonFeatures.tsx

@@ -100,7 +100,7 @@ function getColumns(countries: string[], direction: Direction): readonly Column<
     {
       key: 'client',
       name: 'Client',
-      width: 220,
+      width: 'max-content',
       editor: textEditor
     },
     {

website/demos/MillionCells.tsx

@@ -24,6 +24,7 @@ export default function MillionCells({ direction }: Props) {
         key,
         name: key,
         frozen: i < 5,
+        width: 80,
         resizable: true,
         formatter: cellFormatter
       });