[EUI Datagrid] Adds rowHeightOptions property

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Updated `EuiContextMenuPanelDescriptor`'s `title` prop type from `string` to `ReactNode` ([#4933](https://github.com/elastic/eui/pull/4933))
 - Added `EuiTokensObject` type definition to allow enforcing i18n token coverage in consuming applications ([#4927](https://github.com/elastic/eui/issues/4927))
+- Added `rowHeightsOptions` to `EuiDataGrid` to allow configuring row heights ([#4853](https://github.com/elastic/eui/pull/4853))
 
 ## [`34.5.2`](https://github.com/elastic/eui/tree/v34.5.2)
 

scripts/a11y-testing.js

@@ -40,6 +40,7 @@ const docsPages = async (root, page) => {
     `${root}#/tabular-content/data-grid-control-columns`,
     `${root}#/tabular-content/data-grid-footer-row`,
     `${root}#/tabular-content/data-grid-virtualization`,
+    `${root}#/tabular-content/data-grid-row-height-options`,
   ];
 
   return [

src-docs/src/routes.js

@@ -80,6 +80,7 @@ import { DataGridStylingExample } from './views/datagrid/datagrid_styling_exampl
 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 { DataGridRowHeightOptionsExample } from './views/datagrid/datagrid_height_options_example';
 
 import { DatePickerExample } from './views/date_picker/date_picker_example';
 
@@ -379,6 +380,7 @@ const navigation = [
       DataGridControlColumnsExample,
       DataGridFooterRowExample,
       DataGridVirtualizationExample,
+      DataGridRowHeightOptionsExample,
       TableExample,
       TableInMemoryExample,
     ].map((example) => createExample(example)),

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

@@ -31,6 +31,7 @@ import {
   EuiDataGridPopoverContentProps,
   EuiDataGridControlColumn,
   EuiDataGridToolBarVisibilityColumnSelectorOptions,
+  EuiDataGridRowHeightsOptions,
 } from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';
 
 import { EuiDataGridCellValueElementProps } from '!!prop-loader!../../../../src/components/datagrid/data_grid_cell';
@@ -377,6 +378,7 @@ export const DataGridExample = {
         EuiDataGridToolBarVisibilityOptions,
         EuiDataGridToolBarVisibilityColumnSelectorOptions,
         EuiDataGridPopoverContentProps,
+        EuiDataGridRowHeightsOptions,
       },
       demo: (
         <Fragment>

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

@@ -0,0 +1,81 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+import { GuideSectionTypes } from '../../components';
+import {
+  EuiCallOut,
+  EuiCode,
+  EuiCodeBlock,
+  EuiSpacer,
+} from '../../../../src/components';
+
+import DataGridRowHeightOptions from './row_height_options';
+const dataGridRowHeightOptionsSource = require('!!raw-loader!./row_height_options');
+const dataGridRowHeightOptionsHtml = renderToHtml(DataGridRowHeightOptions);
+
+const rowHeightsSnippet = `
+  {
+    defaultHeight: {
+      lineCount: 2, // default every row to 2 lines of text. Also we can provide height in pixels
+    },
+    rowHeights: {
+      1: {
+        lineCount: 5, // for row which have index 1 we allow to show 5 lines after that we truncate
+      },
+      4: 140, // for row which have index 4 we set 140 pixel
+      5: 80,
+    },
+  }
+`;
+
+export const DataGridRowHeightOptionsExample = {
+  title: 'Data grid row height options',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridRowHeightOptionsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridRowHeightOptionsHtml,
+        },
+      ],
+      text: (
+        <Fragment>
+          <p>
+            Row height options can be passed down to the grid through the{' '}
+            <EuiCode>rowHeightsOptions</EuiCode> prop. It accepts an object
+            configuring the default height and/or specific row heights:
+          </p>
+          <ul>
+            <li>
+              <EuiCode>defaultHeight</EuiCode> - defines the default size for
+              all rows
+            </li>
+            <li>
+              <EuiCode>rowHeights</EuiCode> - overrides the height for a
+              specific row
+            </li>
+          </ul>
+          <EuiCallOut
+            color="warning"
+            title="Rows have minimum height requirements">
+            <p>
+              Rows must be at least <strong>34 pixels</strong> tall so they can
+              render at least one line of text. If you provide a smaller height
+              the row will default to 34 pixels.
+            </p>
+          </EuiCallOut>
+          <EuiSpacer />
+          <EuiCodeBlock language="javascript" paddingSize="s" isCopyable>
+            {rowHeightsSnippet}
+          </EuiCodeBlock>
+        </Fragment>
+      ),
+      components: { DataGridRowHeightOptions },
+      demo: <DataGridRowHeightOptions />,
+    },
+  ],
+};

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

@@ -0,0 +1,128 @@
+import React, {
+  useCallback,
+  useState,
+  createContext,
+  useContext,
+  useMemo,
+  useEffect,
+} from 'react';
+import { fake } from 'faker';
+
+import { EuiDataGrid, EuiText } from '../../../../src/components/';
+
+const DataContext = createContext();
+
+const columns = [
+  {
+    id: 'name',
+    displayAsText: 'Name',
+    defaultSortDirection: 'asc',
+  },
+  {
+    id: 'text',
+  },
+];
+
+// it is expensive to compute 10000 rows of fake data
+// instead of loading up front, generate entries on the fly
+const raw_data = [];
+
+function RenderCellValue({ rowIndex, columnId }) {
+  const { data, adjustMountedCellCount } = useContext(DataContext);
+
+  useEffect(() => {
+    adjustMountedCellCount(1);
+    return () => adjustMountedCellCount(-1);
+  }, [adjustMountedCellCount]);
+
+  if (data[rowIndex] == null) {
+    data[rowIndex] = {
+      name: fake('{{lorem.text}}'),
+      text: fake('{{lorem.text}}'),
+    };
+  }
+
+  return data[rowIndex][columnId];
+}
+
+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 rowHeightsOptions = useMemo(
+    () => ({
+      defaultHeight: {
+        lineCount: 2,
+      },
+      rowHeights: {
+        1: {
+          lineCount: 5,
+        },
+        4: 140,
+        5: 80,
+      },
+    }),
+    []
+  );
+
+  const dataContext = useMemo(
+    () => ({
+      data: raw_data,
+      adjustMountedCellCount: (adjustment) =>
+        setMountedCellCount(
+          (mountedCellCount) => mountedCellCount + adjustment
+        ),
+    }),
+    []
+  );
+
+  const grid = (
+    <EuiDataGrid
+      aria-label="Row height options demo"
+      columns={columns}
+      columnVisibility={{ visibleColumns, setVisibleColumns }}
+      rowCount={10000}
+      height={400}
+      renderCellValue={RenderCellValue}
+      rowHeightsOptions={rowHeightsOptions}
+      pagination={{
+        ...pagination,
+        pageSizeOptions: [50, 250, 1000],
+        onChangeItemsPerPage: onChangeItemsPerPage,
+        onChangePage: onChangePage,
+      }}
+    />
+  );
+
+  return (
+    <DataContext.Provider value={dataContext}>
+      <EuiText>
+        <p>There are {mountedCellCount} rendered cells</p>
+      </EuiText>
+      {grid}
+    </DataContext.Provider>
+  );
+};