[EuiDataGrid] InMemory Performance

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

@@ -1,12 +1,21 @@
-import React, { Component, Fragment, useEffect } from 'react';
+import React, {
+ Fragment,
+ useCallback,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
 import { fake } from 'faker';
 
 import {
+ EuiButton,
  EuiDataGrid,
  EuiButtonIcon,
  EuiLink,
+ EuiPopover,
 } from '../../../../src/components/';
 import { iconTypes } from '../../../../src-docs/src/views/icon/icons';
+import { EuiRadioGroup } from '../../../../src/components/form/radio';
 
 const columns = [
  {
@@ -38,10 +47,10 @@ const columns = [
  },
 ];
 
-const data = [];
+const raw_data = [];
 
-for (let i = 1; i < 100; i++) {
- data.push({
+for (let i = 1; i < 1000; i++) {
+ raw_data.push({
  name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
  email: <EuiLink href="">{fake('{{internet.email}}')}</EuiLink>,
  location: (
@@ -72,22 +81,39 @@ for (let i = 1; i < 100; i++) {
  });
 }
 
-export default class DataGridContainer extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- sortingColumns: [],
- data,
- pagination: {
- pageIndex: 0,
- pageSize: 50,
- },
- };
- }
+export default () => {
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+ // ** Pagination config
+ const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
+ const onChangeItemsPerPage = useCallback(
+ pageSize => setPagination(pagination => ({ ...pagination, pageSize })),
+ [setPagination]
+ );
+ const onChangePage = useCallback(
+ pageIndex => setPagination(pagination => ({ ...pagination, pageIndex })),
+ [setPagination]
+ );
+
+ // ** Sorting config
+ const [sortingColumns, setSortingColumns] = useState([]);
+ const onSort = useCallback(
+ sortingColumns => {
+ setSortingColumns(sortingColumns);
+ },
+ [setSortingColumns]
+ );
 
- setSorting = sortingColumns => {
- const sortedData = [...data].sort((a, b) => {
+ const [inMemoryLevel, setInMemoryLevel] = useState('');
+
+ // Sort data
+ let data = useMemo(() => {
+ // the grid itself is responsible for sorting if inMemory is `sorting`
+ if (inMemoryLevel === 'sorting') {
+ return raw_data;
+ }
+
+ return [...raw_data].sort((a, b) => {
  for (let i = 0; i < sortingColumns.length; i++) {
  const column = sortingColumns[i];
  const aValue = a[column.id];
@@ -99,58 +125,117 @@ export default class DataGridContainer extends Component {
 
  return 0;
  });
- this.setState({ sortingColumns, data: sortedData });
- };
-
- setPageIndex = pageIndex =>
- this.setState(({ pagination }) => ({
- pagination: { ...pagination, pageIndex },
- }));
-
- setPageSize = pageSize =>
- this.setState(({ pagination }) => ({
- pagination: { ...pagination, pageSize },
- }));
-
- dummyIcon = () => (
- <EuiButtonIcon
- aria-label="dummy icon"
- iconType={iconTypes[Math.floor(Math.random() * iconTypes.length)]}
- />
- );
+ }, [raw_data, sortingColumns, inMemoryLevel]);
+
+ // Pagination
+ data = useMemo(() => {
+ // the grid itself is responsible for sorting if inMemory is sorting or pagination
+ if (inMemoryLevel === 'sorting' || inMemoryLevel === 'pagination') {
+ return data;
+ }
+
+ const rowStart = pagination.pageIndex * pagination.pageSize;
+ const rowEnd = Math.min(rowStart + pagination.pageSize, data.length);
+ return data.slice(rowStart, rowEnd);
+ }, [data, pagination, inMemoryLevel]);
+
+ const renderCellValue = useMemo(() => {
+ return ({ rowIndex, columnId, setCellProps }) => {
+ let adjustedRowIndex = rowIndex;
 
- render() {
- const { data, pagination, sortingColumns } = this.state;
+ // If we are doing the pagination (instead of leaving that to the grid)
+ // then the row index must be adjusted as `data` has already been pruned to the page size
+ if (inMemoryLevel !== 'sorting' && inMemoryLevel !== 'pagination') {
+ adjustedRowIndex =
+ rowIndex - pagination.pageIndex * pagination.pageSize;
+ }
+
+ useEffect(() => {
+ if (columnId === 'amount') {
+ if (data.hasOwnProperty(adjustedRowIndex)) {
+ const numeric = parseFloat(
+ data[adjustedRowIndex][columnId].match(/\d+\.\d+/)[0],
+ 10
+ );
+ setCellProps({
+ style: {
+ backgroundColor: `rgba(0, ${(numeric / 1000) * 255}, 0, 0.2)`,
+ },
+ });
+ }
+ }
+ }, [adjustedRowIndex, columnId, setCellProps]);
+
+ return data.hasOwnProperty(adjustedRowIndex)
+ ? data[adjustedRowIndex][columnId]
+ : null;
+ };
+ }, [data, inMemoryLevel]);
+
+ const inMemoryProps = {};
+ if (inMemoryLevel !== '') {
+ inMemoryProps.inMemory = {
+ level: inMemoryLevel,
+ skipColumns: ['actions'],
+ };
+ }
+
+ return (
+ <div>
+ <EuiPopover
+ isOpen={isPopoverOpen}
+ button={
+ <EuiButton onClick={() => setIsPopoverOpen(state => !state)}>
+ inMemory options
+ </EuiButton>
+ }
+ closePopover={() => setIsPopoverOpen(false)}>
+ <EuiRadioGroup
+ compressed={true}
+ options={[
+ {
+ id: '',
+ label: 'off',
+ value: '',
+ },
+ {
+ id: 'enhancements',
+ label: 'only enhancements',
+ value: 'enhancements',
+ },
+ {
+ id: 'pagination',
+ label: 'only pagination',
+ value: 'pagination',
+ },
+ {
+ id: 'sorting',
+ label: 'sorting and pagination',
+ value: 'sorting',
+ },
+ ]}
+ idSelected={inMemoryLevel}
+ onChange={(id, value) => {
+ setInMemoryLevel(value === '' ? undefined : value);
+ setIsPopoverOpen(false);
+ }}
+ />
+ </EuiPopover>
 
- return (
  <EuiDataGrid
  aria-label="Data grid demo"
  columns={columns}
- rowCount={data.length}
- renderCellValue={({ rowIndex, columnId, setCellProps }) => {
- useEffect(() => {
- if (columnId === 'amount') {
- const numeric = parseFloat(
- data[rowIndex][columnId].match(/\d+\.\d+/)[0],
- 10
- );
- setCellProps({
- style: {
- backgroundColor: `rgba(0, ${(numeric / 1000) * 255}, 0, 0.2)`,
- },
- });
- }
- }, [rowIndex, columnId, setCellProps]);
- return data[rowIndex][columnId];
- }}
- sorting={{ columns: sortingColumns, onSort: this.setSorting }}
+ rowCount={raw_data.length}
+ renderCellValue={renderCellValue}
+ {...inMemoryProps}
+ sorting={{ columns: sortingColumns, onSort }}
  pagination={{
  ...pagination,
- pageSizeOptions: [5, 10, 25],
- onChangeItemsPerPage: this.setPageSize,
- onChangePage: this.setPageIndex,
+ pageSizeOptions: [10, 25, 50, 100],
+ onChangeItemsPerPage: onChangeItemsPerPage,
+ onChangePage: onChangePage,
  }}
  />
- );
- }
-}
+ </div>
+ );
+};

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

@@ -91,7 +91,7 @@ export default class InMemoryDataGrid extends Component {
  const value = data[rowIndex][columnId];
  return value;
  }}
- inMemory="sorting"
+ inMemory={{ level: 'sorting' }}
  sorting={{ columns: sortingColumns, onSort: this.setSorting }}
  pagination={{
  ...pagination,

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

@@ -74,7 +74,22 @@ export default class InMemoryDataGrid extends Component {
  };
  }
 
- setSorting = sortingColumns => this.setState({ sortingColumns });
+ setSorting = sortingColumns => {
+ const data = [...this.state.data].sort((a, b) => {
+ for (let i = 0; i < sortingColumns.length; i++) {
+ const column = sortingColumns[i];
+ const aValue = a[column.id];
+ const bValue = b[column.id];
+
+ if (aValue < bValue) return column.direction === 'asc' ? -1 : 1;
+ if (aValue > bValue) return column.direction === 'asc' ? 1 : -1;
+ }
+
+ return 0;
+ });
+
+ this.setState({ data, sortingColumns });
+ };
 
  setPageIndex = pageIndex =>
  this.setState(({ pagination }) => ({