[EuiDataGrid] Virtualization

package.json

@@ -107,7 +107,6 @@
     "@types/react-dom": "^16.9.6",
     "@types/react-is": "^16.7.1",
     "@types/react-router-dom": "^5.1.5",
-    "@types/resize-observer-browser": "^0.1.3",
     "@types/tabbable": "^3.1.0",
     "@types/url-parse": "^1.4.3",
     "@types/uuid": "^8.3.0",

scripts/a11y-testing.js

@@ -40,6 +40,14 @@ const docsPages = async (root, page) => {
     `${root}#/forms/date-picker`,
     `${root}#/forms/suggest`,
     `${root}#/forms/super-date-picker`,
+    `${root}#/tabular-content/data-grid`,
+    `${root}#/tabular-content/data-grid-in-memory-settings`,
+    `${root}#/tabular-content/data-grid-schemas-and-popovers`,
+    `${root}#/tabular-content/data-grid-focus`,
+    `${root}#/tabular-content/data-grid-styling-and-control`,
+    `${root}#/tabular-content/data-grid-control-columns`,
+    `${root}#/tabular-content/data-grid-footer-row`,
+    `${root}#/tabular-content/data-grid-virtualization`,
     `${root}#/elastic-charts/creating-charts`,
     `${root}#/elastic-charts/part-to-whole-comparisons`,
     `${root}#/utilities/css-utility-classes`,

src-docs/src/routes.js

@@ -75,6 +75,7 @@ import { DataGridFocusExample } from './views/datagrid/datagrid_focus_example';
 import { DataGridStylingExample } from './views/datagrid/datagrid_styling_example';
 import { DataGridControlColumnsExample } from './views/datagrid/datagrid_controlcolumns_example';
 import { DataGridFooterRowExample } from './views/datagrid/datagrid_footer_row_example';
+import { DataGridVirtualizationExample } from './views/datagrid/datagrid_virtualization_example';
 
 import { DatePickerExample } from './views/date_picker/date_picker_example';
 
@@ -368,6 +369,7 @@ const navigation = [
       DataGridStylingExample,
       DataGridControlColumnsExample,
       DataGridFooterRowExample,
+      DataGridVirtualizationExample,
       TableExample,
       TableInMemoryExample,
     ].map((example) => createExample(example)),

src-docs/src/views/datagrid/datagrid.js

@@ -6,6 +6,7 @@ import React, {
   useState,
   createContext,
   useContext,
+  useRef,
 } from 'react';
 import { fake } from 'faker';
 
@@ -191,7 +192,7 @@ const trailingControlColumns = [
             ownFocus={true}>
             <EuiPopoverTitle>Actions</EuiPopoverTitle>
             <div style={{ width: 150 }}>
-              <button onClick={() => {}} component="span">
+              <button onClick={() => {}}>
                 <EuiFlexGroup
                   alignItems="center"
                   component="span"
@@ -293,6 +294,10 @@ export default () => {
     };
   }, []);
 
+  const onColumnResize = useRef((eventData) => {
+    console.log(eventData);
+  });
+
   return (
     <DataContext.Provider value={raw_data}>
       <EuiDataGrid
@@ -310,9 +315,7 @@ export default () => {
           onChangeItemsPerPage: onChangeItemsPerPage,
           onChangePage: onChangePage,
         }}
-        onColumnResize={(eventData) => {
-          console.log(eventData);
-        }}
+        onColumnResize={onColumnResize.current}
       />
     </DataContext.Provider>
   );

src-docs/src/views/datagrid/datagrid_virtualization_example.js

@@ -0,0 +1,86 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+import { EuiCallOut, EuiCode } from '../../../../src/components';
+import { GuideSectionTypes } from '../../components';
+
+import DataGridVirtualization from './virtualization';
+const dataGridVirtualizationSource = require('!!raw-loader!./virtualization');
+const dataGridVirtualizationHtml = renderToHtml(DataGridVirtualization);
+
+import DataGridVirtualizationConstrained from './virtualization_constrained';
+const dataGridVirtualizationConstrainedSource = require('!!raw-loader!./virtualization_constrained');
+const dataGridVirtualizationConstrainedHtml = renderToHtml(
+  DataGridVirtualizationConstrained
+);
+
+export const DataGridVirtualizationExample = {
+  title: 'Data grid virtualization',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridVirtualizationSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridVirtualizationHtml,
+        },
+      ],
+      text: (
+        <Fragment>
+          <p>
+            Creating a lot of DOM nodes is computationally expensive, and{' '}
+            <strong>EuiDataGrid</strong> uses a couple wrapping divs to build
+            each cell. To help offset the cost of larger tables, cell
+            virtualization can be opted into by constraining the grid&apos;s
+            height and/or width. There are two ways to enable this
+            functionality. First, <EuiCode>height</EuiCode> and/or{' '}
+            <EuiCode>width</EuiCode> can be passed as props, which are applied
+            to the grid&apos;s container style. Alternatively, if{' '}
+            <strong>EuiDataGrid</strong> is unable to render at the full
+            dimensions it needs due to screen real estate or other DOM
+            constraints, it will overflow within a scrollable container and only
+            render the visible cells.
+          </p>
+
+          <EuiCallOut
+            title={
+              <>
+                Never toggle the height between a value and{' '}
+                <EuiCode>undefined</EuiCode>.
+              </>
+            }
+            color="warning">
+            <p>
+              Similar to React&apos;s rule of not switching between a controlled
+              and uncontrolled input, <EuiCode>EuiDataGrid</EuiCode> does not
+              accommodate for its height switching to or from{' '}
+              <EuiCode>undefined</EuiCode>. For demonstration purposes, the
+              example below uses a <EuiCode>key</EuiCode> to force{' '}
+              <strong>EuiDataGrid</strong> to completely remount when its height
+              changes between constrained & constrained heights.
+            </p>
+          </EuiCallOut>
+        </Fragment>
+      ),
+      components: { DataGridVirtualization },
+      demo: <DataGridVirtualization />,
+    },
+    {
+      title: 'Constrained by DOM',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridVirtualizationConstrainedSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridVirtualizationConstrainedHtml,
+        },
+      ],
+      demo: <DataGridVirtualizationConstrained />,
+    },
+  ],
+};

src-docs/src/views/datagrid/virtualization.js

@@ -0,0 +1,200 @@
+import React, {
+  Fragment,
+  useCallback,
+  useState,
+  createContext,
+  useContext,
+  useMemo,
+  useEffect,
+} from 'react';
+import { fake } from 'faker';
+
+import {
+  EuiDataGrid,
+  EuiLink,
+  EuiText,
+  EuiSpacer,
+  EuiButtonGroup,
+} from '../../../../src/components/';
+import { EuiFormRow } from '../../../../src/components/form/form_row';
+
+const DataContext = createContext();
+
+const raw_data = [];
+
+for (let i = 1; i < 10000; i++) {
+  const email = fake('{{internet.email}}');
+  const name = fake('{{name.lastName}}, {{name.firstName}}');
+  const suffix = fake('{{name.suffix}}');
+  raw_data.push({
+    name: `${name} ${suffix}`,
+    email: <EuiLink href="">{email}</EuiLink>,
+    location: (
+      <Fragment>
+        {`${fake('{{address.city}}')}, `}
+        <EuiLink href="https://google.com">
+          {fake('{{address.country}}')}
+        </EuiLink>
+      </Fragment>
+    ),
+    date: fake('{{date.past}}'),
+    account: fake('{{finance.account}}'),
+    amount: fake('${{commerce.price}}'),
+    phone: fake('{{phone.phoneNumber}}'),
+    version: fake('{{system.semver}}'),
+  });
+}
+
+const columns = [
+  {
+    id: 'name',
+    displayAsText: 'Name',
+    defaultSortDirection: 'asc',
+  },
+  {
+    id: 'email',
+  },
+  {
+    id: 'location',
+  },
+  {
+    id: 'account',
+  },
+  {
+    id: 'date',
+    defaultSortDirection: 'desc',
+  },
+  {
+    id: 'amount',
+  },
+  {
+    id: 'phone',
+    isSortable: false,
+  },
+  {
+    id: 'version',
+    defaultSortDirection: 'desc',
+    initialWidth: 65,
+    isResizable: false,
+  },
+];
+
+function RenderCellValue({ rowIndex, columnId }) {
+  const { data, adjustMountedCellCount } = useContext(DataContext);
+
+  useEffect(() => {
+    adjustMountedCellCount(1);
+    return () => adjustMountedCellCount(-1);
+  }, [adjustMountedCellCount]);
+
+  return data.hasOwnProperty(rowIndex) ? data[rowIndex][columnId] : null;
+}
+
+const dimensionSizes = {
+  'height-300px': 300,
+  'height-600px': 600,
+
+  'width-200px': 200,
+  'width-50%': '50%',
+  'width-unconstrained': undefined,
+};
+
+export default () => {
+  // ** Pagination config
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
+  const onChangeItemsPerPage = useCallback(
+    (pageSize) =>
+      setPagination((pagination) => ({
+        ...pagination,
+        pageSize,
+        pageIndex: 0,
+      })),
+    [setPagination]
+  );
+  const onChangePage = useCallback(
+    (pageIndex) =>
+      setPagination((pagination) => ({ ...pagination, pageIndex })),
+    [setPagination]
+  );
+
+  // Column visibility
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  ); // initialize to the full set of columns
+
+  const [mountedCellCount, setMountedCellCount] = useState(0);
+
+  const dataContext = useMemo(
+    () => ({
+      data: raw_data,
+      adjustMountedCellCount: (adjustment) =>
+        setMountedCellCount(
+          (mountedCellCount) => mountedCellCount + adjustment
+        ),
+    }),
+    []
+  );
+
+  const [height, setHeight] = useState('height-300px');
+  const [width, setWidth] = useState('width-50%');
+
+  return (
+    <>
+      <EuiFormRow label="Height">
+        <EuiButtonGroup
+          legend="Set a height for the following grid"
+          options={[
+            { id: 'height-300px', label: '300px' },
+            { id: 'height-600px', label: '600px' },
+            { id: 'height-unconstrained', label: 'Unconstrained' },
+          ]}
+          idSelected={height}
+          onChange={setHeight}
+        />
+      </EuiFormRow>
+
+      <EuiFormRow label="Width">
+        <EuiButtonGroup
+          legend="Set a width for the following grid"
+          options={[
+            { id: 'width-200px', label: '200px' },
+            { id: 'width-50%', label: '50%' },
+            { id: 'width-unconstrained', label: 'Unconstrained' },
+          ]}
+          idSelected={width}
+          onChange={setWidth}
+        />
+      </EuiFormRow>
+
+      <EuiSpacer />
+
+      <EuiText>
+        <p>There are {mountedCellCount} rendered cells</p>
+      </EuiText>
+
+      <DataContext.Provider value={dataContext}>
+        <EuiDataGrid
+          // completely reset the grid when switching between controlled & uncontrolled heights
+          // otherwise, going from constrained->unconstrained is ignored.
+          // this is for example only, don't switch between controlled & uncontrolled heights
+          key={
+            height === 'height-unconstrained' ? 'unconstrained' : 'constrained'
+          }
+          aria-label="Virtualized data grid demo"
+          height={dimensionSizes[height]}
+          width={dimensionSizes[width]}
+          columns={columns}
+          columnVisibility={{ visibleColumns, setVisibleColumns }}
+          rowCount={raw_data.length}
+          renderCellValue={RenderCellValue}
+          pagination={{
+            ...pagination,
+            pageSizeOptions: [50, 250, 1000],
+            onChangeItemsPerPage: onChangeItemsPerPage,
+            onChangePage: onChangePage,
+          }}
+        />
+      </DataContext.Provider>
+    </>
+  );
+};