rm width/height props, use ResizeObserver to get the grid's content dimensions

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## `alpha` to `canary`
 - **Added:**
   - **Props:**
+    - `className`
     - `onSelectedCellChange`
       - ⚠️ This replaces the `onCellSelected` and `onCellDeSelected` props
     - `enableFilters`
@@ -34,6 +35,8 @@
   - **Packages:**
     - ⚠️ `react-data-grid-addons`
   - **Props:**
+    - ⚠️ `width`
+    - ⚠️ `height`
     - ⚠️ `cellContentRenderer`
     - ⚠️ `contextMenu`
       <!-- TODO: fill link to storybook -->

README.md

@@ -51,6 +51,7 @@ See [documentation](https://babeljs.io/docs/en/)
   import 'core-js/stable';
   ```
   - Babel's `env` preset, if configured correctly, will transform this import so only the necessary polyfills are included in your bundle.
+- Polyfilling the [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) API is required for older browsers.
 - Optional: we also recommend using the [`babel-plugin-optimize-clsx` plugin](https://www.npmjs.com/package/babel-plugin-optimize-clsx).
 </details>
 

package.json

@@ -55,7 +55,6 @@
     "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.8",
     "@types/react-select": "^3.0.15",
-    "@types/react-virtualized": "^9.21.10",
     "@typescript-eslint/eslint-plugin": "^3.7.1",
     "@typescript-eslint/parser": "^3.7.1",
     "babel-loader": "^8.1.0",
@@ -84,7 +83,6 @@
     "react-dom": "^16.13.1",
     "react-popper": "^2.2.3",
     "react-select": "^3.1.0",
-    "react-virtualized": "^9.21.2",
     "ts-jest": "^26.1.4",
     "ts-loader": "^8.0.2",
     "typescript": "~4.0.2"

src/DataGrid.tsx

@@ -10,7 +10,7 @@ import React, {
 } from 'react';
 import clsx from 'clsx';
 
-import { useGridWidth, useViewportColumns } from './hooks';
+import { useGridDimensions, useViewportColumns } from './hooks';
 import EventBus from './EventBus';
 import HeaderRow from './HeaderRow';
 import FilterRow from './FilterRow';
@@ -19,7 +19,6 @@ import SummaryRow from './SummaryRow';
 import {
   assertIsValidKey,
   getColumnScrollPosition,
-  getScrollbarSize,
   getVerticalRangeToRender,
   getNextSelectedCellPosition,
   isSelectedCellEditable,
@@ -103,10 +102,6 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
   /**
    * Dimensions props
    */
-  /** The width of the grid in pixels */
-  width?: number;
-  /** The height of the grid in pixels */
-  height?: number;
   /** The height of each row in pixels */
   rowHeight?: number;
   /** The height of the header row in pixels */
@@ -165,6 +160,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
    */
   /** The node where the editor portal should mount. */
   editorPortalTarget?: Element;
+  className?: string;
   rowClass?: (row: R) => string | undefined;
 }
 
@@ -184,8 +180,6 @@ function DataGrid<R, K extends keyof R, SR>({
   onRowsUpdate,
   onRowsChange,
   // Dimensions props
-  width,
-  height = 350,
   rowHeight = 35,
   headerRowHeight = rowHeight,
   headerFiltersHeight = 45,
@@ -214,6 +208,7 @@ function DataGrid<R, K extends keyof R, SR>({
   cellNavigationMode = CellNavigationMode.NONE,
   // Miscellaneous
   editorPortalTarget = document.body,
+  className,
   rowClass,
   // ARIA
   'aria-label': ariaLabel,
@@ -248,27 +243,21 @@ function DataGrid<R, K extends keyof R, SR>({
   /**
    * computed values
    */
-  const [gridRef, gridWidth] = useGridWidth(width);
-  const viewportWidth = gridWidth - 2; // 2 for border width;
+  const [gridRef, gridWidth, gridHeight] = useGridDimensions();
   const headerRowsCount = enableFilters ? 2 : 1;
   const summaryRowsCount = summaryRows?.length ?? 0;
+  const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
+  const clientHeight = gridHeight - totalHeaderHeight - summaryRowsCount * rowHeight;
   const isSelectable = selectedRows !== undefined && onSelectedRowsChange !== undefined;
 
   const { columns, viewportColumns, totalColumnWidth, lastFrozenColumnIndex } = useViewportColumns({
     columns: rawColumns,
     columnWidths,
     scrollLeft,
-    viewportWidth,
+    viewportWidth: gridWidth,
     defaultColumnOptions
   });
 
-  const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
-  const clientHeight = height
-    - 2 // border width
-    - totalHeaderHeight
-    - summaryRowsCount * rowHeight
-    - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
-
   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
     clientHeight,
     rowHeight,
@@ -787,10 +776,8 @@ function DataGrid<R, K extends keyof R, SR>({
       aria-multiselectable={isSelectable ? true : undefined}
       aria-colcount={columns.length}
       aria-rowcount={headerRowsCount + rows.length + summaryRowsCount}
-      className={clsx('rdg', { 'rdg-viewport-dragging': isDragging })}
+      className={clsx('rdg', { 'rdg-viewport-dragging': isDragging }, className)}
       style={{
-        width,
-        height,
         '--header-row-height': `${headerRowHeight}px`,
         '--filter-row-height': `${headerFiltersHeight}px`,
         '--row-width': `${totalColumnWidth}px`,

src/hooks/index.ts

@@ -1,4 +1,4 @@
 export * from './useCombinedRefs';
 export * from './useClickOutside';
-export * from './useGridWidth';
+export * from './useGridDimensions';
 export * from './useViewportColumns';

src/hooks/useGridDimensions.ts

@@ -0,0 +1,41 @@
+import { useRef, useState, useLayoutEffect } from 'react';
+
+// https://github.com/microsoft/TypeScript/issues/37861
+interface ResizeObserverEntry {
+  contentRect: {
+    width: number;
+    height: number;
+  };
+}
+
+type ResizeObserver = new (callback: (entries: readonly ResizeObserverEntry[]) => void) => {
+  observe: (target: Element) => void;
+  disconnect: () => void;
+};
+
+export function useGridDimensions(): [React.RefObject<HTMLDivElement>, number, number] {
+  const gridRef = useRef<HTMLDivElement>(null);
+  const [gridWidth, setGridWidth] = useState(1);
+  const [gridHeight, setGridHeight] = useState(1);
+
+  useLayoutEffect(() => {
+    const { ResizeObserver } = window as typeof window & { ResizeObserver: ResizeObserver };
+
+    // 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);
+    });
+
+    resizeObserver.observe(gridRef.current!);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return [gridRef, gridWidth, gridHeight];
+}

src/utils/columnUtils.ts

@@ -1,5 +1,4 @@
 import { Column, CalculatedColumn, FormatterProps, Omit } from '../types';
-import { getScrollbarSize } from './domUtils';
 
 interface Metrics<R, SR> {
   columns: readonly Column<R, SR>[];
@@ -45,7 +44,7 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
     }
   }
 
-  const unallocatedWidth = metrics.viewportWidth - allocatedWidths - getScrollbarSize();
+  const unallocatedWidth = metrics.viewportWidth - allocatedWidths;
   const unallocatedColumnWidth = Math.max(
     Math.floor(unallocatedWidth / unassignedColumnsCount),
     metrics.minColumnWidth

src/utils/domUtils.ts

@@ -1,23 +1,3 @@
-let size: number | undefined;
-
-export function getScrollbarSize(): number {
-  if (size === undefined) {
-    const scrollDiv = document.createElement('div');
-
-    scrollDiv.style.position = 'absolute';
-    scrollDiv.style.top = '-9999px';
-    scrollDiv.style.width = '50px';
-    scrollDiv.style.height = '50px';
-    scrollDiv.style.overflow = 'scroll';
-
-    document.body.appendChild(scrollDiv);
-    size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-    document.body.removeChild(scrollDiv);
-  }
-
-  return size;
-}
-
 export function preventDefault(event: React.SyntheticEvent) {
   event.preventDefault();
 }

stories/demos/AllFeatures.less

@@ -1,3 +1,13 @@
+.all-features {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  > .rdg {
+    flex: 1;
+  }
+}
+
 .highlight .rdg-cell {
   background-color: #9370DB;
   color: white;
@@ -6,3 +16,15 @@
 .highlight:hover .rdg-cell {
   background-color: #800080;
 }
+
+.load-more-rows-tag {
+  width: 180px;
+  padding: 8px 16px;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+
+  color: white;
+  line-height: 35px;
+  background: rgba(0, 0, 0, 0.6);
+}

stories/demos/AllFeatures.tsx

@@ -1,6 +1,5 @@
 import faker from 'faker';
 import React, { useState, useMemo, useCallback, useRef } from 'react';
-import { AutoSizer } from 'react-virtualized';
 import DataGrid, { Column, SelectColumn, UpdateActions, DataGridHandle, RowsUpdateEvent, CalculatedColumn } from '../../src';
 import DropDownEditor from './components/Editors/DropDownEditor';
 import { ImageFormatter } from './components/Formatters';
@@ -222,32 +221,24 @@ export default function AllFeatures() {
   }
 
   return (
-    <>
+    <div className="all-features">
       <Toolbar onAddRow={handleAddRow} numberOfRows={rows.length} />
-      <AutoSizer>
-        {({ height, width }) => (
-          <>
-            <DataGrid
-              ref={gridRef}
-              columns={columns}
-              rows={rows}
-              rowKey="id"
-              onRowsUpdate={handleRowUpdate}
-              onRowClick={handleRowClick}
-              rowHeight={30}
-              width={width}
-              height={height - 40}
-              selectedRows={selectedRows}
-              onScroll={handleScroll}
-              onSelectedRowsChange={setSelectedRows}
-              rowClass={row => row.id.includes('7') ? 'highlight' : undefined}
-              enableCellCopyPaste
-              enableCellDragAndDrop
-            />
-            {isLoading && <div className="load-more-rows-tag" style={{ left: width - 230 }}>Loading more rows...</div>}
-          </>
-        )}
-      </AutoSizer>
-    </>
+      <DataGrid
+        ref={gridRef}
+        columns={columns}
+        rows={rows}
+        rowKey="id"
+        onRowsUpdate={handleRowUpdate}
+        onRowClick={handleRowClick}
+        rowHeight={30}
+        selectedRows={selectedRows}
+        onScroll={handleScroll}
+        onSelectedRowsChange={setSelectedRows}
+        rowClass={row => row.id.includes('7') ? 'highlight' : undefined}
+        enableCellCopyPaste
+        enableCellDragAndDrop
+      />
+      {isLoading && <div className="load-more-rows-tag">Loading more rows...</div>}
+    </div>
   );
 }

stories/demos/CellActions.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { AutoSizer } from 'react-virtualized';
 import faker from 'faker';
 
 import DataGrid, { Column } from '../../src';
@@ -148,16 +147,11 @@ export default function CellActions() {
   const [rows] = useState(createRows);
 
   return (
-    <AutoSizer>
-      {({ height, width }) => (
-        <DataGrid<Row, 'id'>
-          columns={columns}
-          rows={rows}
-          width={width}
-          height={height}
-          rowHeight={55}
-        />
-      )}
-    </AutoSizer>
+    <DataGrid<Row, 'id'>
+      columns={columns}
+      rows={rows}
+      rowHeight={55}
+      className="fill-grid"
+    />
   );
 }