[EuiDataGrid] Memoization & perf improvements

src-docs/src/views/datagrid/advanced/custom_renderer.tsx

@@ -19,6 +19,7 @@ import {
   EuiDataGridPaginationProps,
   EuiDataGridSorting,
   EuiDataGridColumnSortingConfig,
+  RenderCellValue,
 } from '../../../../../src';
 
 const raw_data: Array<{ [key: string]: string }> = [];
@@ -67,6 +68,14 @@ const columns = [
   },
 ];
 
+const checkboxRowCellRender: RenderCellValue = ({ rowIndex }) => (
+  <EuiCheckbox
+    id={`select-row-${rowIndex}`}
+    aria-label="Select row"
+    onChange={() => {}}
+  />
+);
+
 const leadingControlColumns: EuiDataGridProps['leadingControlColumns'] = [
   {
     id: 'selection',
@@ -78,13 +87,7 @@ const leadingControlColumns: EuiDataGridProps['leadingControlColumns'] = [
         onChange={() => {}}
       />
     ),
-    rowCellRender: ({ rowIndex }) => (
-      <EuiCheckbox
-        id={`select-row-${rowIndex}`}
-        aria-label="Select row"
-        onChange={() => {}}
-      />
-    ),
+    rowCellRender: checkboxRowCellRender,
   },
 ];
 
@@ -103,6 +106,22 @@ const trailingControlColumns: EuiDataGridProps['trailingControlColumns'] = [
   },
 ];
 
+const RowCellRender: RenderCellValue = ({ setCellProps, rowIndex }) => {
+  setCellProps({ style: { width: '100%', height: 'auto' } });
+
+  const firstName = raw_data[rowIndex].name.split(', ')[1];
+  const isGood = faker.datatype.boolean();
+  return (
+    <>
+      {firstName}&apos;s account has {isGood ? 'no' : ''} outstanding fees.{' '}
+      <EuiIcon
+        type={isGood ? 'checkInCircleFilled' : 'error'}
+        color={isGood ? 'success' : 'danger'}
+      />
+    </>
+  );
+};
+
 // The custom row details is actually a trailing control column cell with
 // a hidden header. This is important for accessibility and markup reasons
 // @see https://fuschia-stretch.glitch.me/ for more
@@ -120,21 +139,7 @@ const rowDetails: EuiDataGridProps['trailingControlColumns'] = [
 
     // When rendering this custom cell, we'll want to override
     // the automatic width/heights calculated by EuiDataGrid
-    rowCellRender: ({ setCellProps, rowIndex }) => {
-      setCellProps({ style: { width: '100%', height: 'auto' } });
-
-      const firstName = raw_data[rowIndex].name.split(', ')[1];
-      const isGood = faker.datatype.boolean();
-      return (
-        <>
-          {firstName}&apos;s account has {isGood ? 'no' : ''} outstanding fees.{' '}
-          <EuiIcon
-            type={isGood ? 'checkInCircleFilled' : 'error'}
-            color={isGood ? 'success' : 'danger'}
-          />
-        </>
-      );
-    },
+    rowCellRender: RowCellRender,
   },
 ];
 
@@ -144,10 +149,10 @@ const footerCellValues: { [key: string]: string } = {
     .toLocaleString('en-US', { style: 'currency', currency: 'USD' })}`,
 };
 
-const RenderFooterCellValue: EuiDataGridProps['renderFooterCellValue'] = ({
-  columnId,
-  setCellProps,
-}) => {
+const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
+  raw_data[rowIndex][columnId];
+
+const RenderFooterCellValue: RenderCellValue = ({ columnId, setCellProps }) => {
   const value = footerCellValues[columnId];
 
   useEffect(() => {
@@ -298,9 +303,7 @@ export default () => {
           onChangeItemsPerPage: onChangePageSize,
         }}
         rowCount={raw_data.length}
-        renderCellValue={({ rowIndex, columnId }) =>
-          raw_data[rowIndex][columnId]
-        }
+        renderCellValue={renderCellValue}
         renderFooterCellValue={RenderFooterCellValue}
         renderCustomGridBody={RenderCustomGridBody}
         height={autoHeight ? undefined : 400}

src-docs/src/views/datagrid/advanced/ref.tsx

@@ -20,6 +20,7 @@ import {
   EuiDataGridColumnSortingConfig,
   EuiDataGridPaginationProps,
   EuiDataGridSorting,
+  RenderCellValue,
 } from '../../../../../src';
 
 const raw_data: Array<{ [key: string]: string }> = [];
@@ -33,6 +34,9 @@ for (let i = 1; i < 100; i++) {
   });
 }
 
+const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
+  raw_data[rowIndex][columnId];
+
 export default () => {
   const dataGridRef = useRef<EuiDataGridRefProps | null>(null);
 
@@ -219,9 +223,7 @@ export default () => {
         sorting={{ columns: sortingColumns, onSort }}
         inMemory={{ level: 'sorting' }}
         rowCount={raw_data.length}
-        renderCellValue={({ rowIndex, columnId }) =>
-          raw_data[rowIndex][columnId]
-        }
+        renderCellValue={renderCellValue}
         pagination={{
           ...pagination,
           onChangePage: onChangePage,

src-docs/src/views/datagrid/cells_popovers/cell_popover_is_expandable.tsx

@@ -5,6 +5,7 @@ import {
   EuiDataGrid,
   EuiDataGridColumnCellAction,
   EuiDataGridColumn,
+  RenderCellValue as RenderCellValueType,
 } from '../../../../../src';
 
 const cellActions: EuiDataGridColumnCellAction[] = [
@@ -50,6 +51,22 @@ for (let i = 1; i < 5; i++) {
   });
 }
 
+const RenderCellValue: RenderCellValueType = ({
+  rowIndex,
+  columnId,
+  setCellProps,
+}) => {
+  const value = data[rowIndex][columnId];
+
+  useEffect(() => {
+    if (columnId === 'boolean' && value === 'false') {
+      setCellProps({ isExpandable: false });
+    }
+  }, [columnId, value, setCellProps]);
+
+  return value;
+};
+
 export default () => {
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -61,17 +78,7 @@ export default () => {
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       rowCount={data.length}
-      renderCellValue={({ rowIndex, columnId, setCellProps }) => {
-        const value = data[rowIndex][columnId];
-
-        useEffect(() => {
-          if (columnId === 'boolean' && value === 'false') {
-            setCellProps({ isExpandable: false });
-          }
-        }, [columnId, value, setCellProps]);
-
-        return value;
-      }}
+      renderCellValue={RenderCellValue}
     />
   );
 };

src-docs/src/views/datagrid/cells_popovers/cell_popover_rendercellpopover.tsx

@@ -14,6 +14,7 @@ import {
   EuiCopy,
   EuiText,
   EuiImage,
+  RenderCellValue as RenderCellValueType,
 } from '../../../../../src';
 
 const cellActions: EuiDataGridColumnCellAction[] = [
@@ -163,6 +164,9 @@ const RenderCellPopover = (props: EuiDataGridCellPopoverElementProps) => {
   );
 };
 
+const renderCellValue: RenderCellValueType = ({ rowIndex, columnId }) =>
+  data[rowIndex][columnId];
+
 export default () => {
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -174,7 +178,7 @@ export default () => {
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       rowCount={data.length}
-      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+      renderCellValue={renderCellValue}
       renderCellPopover={RenderCellPopover}
     />
   );

src-docs/src/views/datagrid/cells_popovers/visible_cell_actions.tsx

@@ -5,6 +5,7 @@ import {
   EuiDataGrid,
   EuiDataGridColumnCellAction,
   EuiDataGridColumn,
+  RenderCellValue as RenderCellValueType,
 } from '../../../../../src/components';
 
 const cellActions1: EuiDataGridColumnCellAction[] = [
@@ -79,6 +80,9 @@ for (let i = 1; i < 5; i++) {
   });
 }
 
+const renderCellValue: RenderCellValueType = ({ rowIndex, columnId }) =>
+  data[rowIndex][columnId];
+
 export default () => {
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -90,7 +94,7 @@ export default () => {
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       rowCount={data.length}
-      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+      renderCellValue={renderCellValue}
     />
   );
 };

src-docs/src/views/datagrid/styling/row_height_auto.tsx

@@ -10,7 +10,7 @@ import githubData from '../_row_auto_height_data.json';
 
 import {
   EuiDataGrid,
-  EuiDataGridProps,
+  RenderCellValue as RenderCellValueType,
   EuiLink,
   EuiAvatar,
   EuiBadge,
@@ -68,7 +68,7 @@ const columns = [
 // instead of loading up front, generate entries on the fly
 const raw_data: DataShape[] = githubData;
 
-const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+const RenderCellValue: RenderCellValueType = ({
   rowIndex,
   columnId,
   isDetails,

src-docs/src/views/datagrid/styling/row_height_fixed.tsx

@@ -10,7 +10,7 @@ import githubData from '../_row_auto_height_data.json';
 
 import {
   EuiDataGrid,
-  EuiDataGridProps,
+  RenderCellValue as RenderCellValueType,
   EuiLink,
   EuiAvatar,
   EuiBadge,
@@ -68,7 +68,7 @@ const columns = [
 // instead of loading up front, generate entries on the fly
 const raw_data: DataShape[] = githubData;
 
-const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+const RenderCellValue: RenderCellValueType = ({
   rowIndex,
   columnId,
   isDetails,

src-docs/src/views/datagrid/styling/row_line_height.tsx

@@ -12,7 +12,7 @@ import {
   EuiDataGrid,
   EuiDataGridColumnSortingConfig,
   EuiDataGridPaginationProps,
-  EuiDataGridProps,
+  RenderCellValue as RenderCellValueType,
   EuiDataGridSorting,
   formatDate,
 } from '../../../../../src';
@@ -62,7 +62,7 @@ const columns = [
 // instead of loading up front, generate entries on the fly
 const raw_data: DataShape[] = githubData;
 
-const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+const RenderCellValue: RenderCellValueType = ({
   rowIndex,
   columnId,
   isDetails,

src-docs/src/views/datagrid/toolbar/additional_controls.tsx

@@ -18,6 +18,7 @@ import {
   EuiContextMenuPanel,
   EuiPopover,
   EuiDataGridPaginationProps,
+  RenderCellValue,
 } from '../../../../../src';
 
 const columns = [
@@ -50,6 +51,9 @@ for (let i = 1; i < 20; i++) {
   });
 }
 
+const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
+  data[rowIndex][columnId];
+
 export default () => {
   const [pagination, setPagination] = useState({ pageIndex: 0 });
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
@@ -127,7 +131,7 @@ export default () => {
           border: 'horizontal',
           header: 'underline',
         }}
-        renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+        renderCellValue={renderCellValue}
         pagination={{
           ...pagination,
           onChangeItemsPerPage: setPageSize,

src-docs/src/views/datagrid/toolbar/render_custom_toolbar.tsx

@@ -13,6 +13,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   euiScreenReaderOnly,
+  RenderCellValue,
 } from '../../../../../src';
 
 const raw_data: Array<{ [key: string]: string }> = [];
@@ -82,6 +83,9 @@ const renderCustomToolbar: EuiDataGridToolbarProps['renderCustomToolbar'] = ({
   );
 };
 
+const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
+  raw_data[rowIndex][columnId];
+
 // Some additional custom settings to show in the Display popover
 const AdditionalDisplaySettings = () => {
   const [exampleSettingValue, setExampleSettingValue] = useState<number>(10);
@@ -126,7 +130,7 @@ export default () => {
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       sorting={{ columns: sortingColumns, onSort }}
       rowCount={raw_data.length}
-      renderCellValue={({ rowIndex, columnId }) => raw_data[rowIndex][columnId]}
+      renderCellValue={renderCellValue}
       gridStyle={{ border: 'none', header: 'underline' }}
       renderCustomToolbar={renderCustomToolbar}
       toolbarVisibility={{

src/components/datagrid/body/cell/data_grid_cell.test.tsx

@@ -175,6 +175,10 @@ describe('EuiDataGridCell', () => {
             style: { top: 0, left: 0, width: 50, height: 10 },
           });
         });
+        it('cellContext', () => {
+          component.setProps({ cellContext: { someData: true } });
+          component.setProps({ cellContext: { someData: false } });
+        });
       });
 
       describe('when state changes:', () => {