[EUI Datagrid] Adds rowHeightOptions property

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';
 
@@ -388,6 +389,7 @@ const navigation = [
       DataGridControlColumnsExample,
       DataGridFooterRowExample,
       DataGridVirtualizationExample,
+      DataGridRowHeightOptionsExample,
       TableExample,
       TableInMemoryExample,
     ].map((example) => createExample(example)),

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

@@ -0,0 +1,54 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+import { GuideSectionTypes } from '../../components';
+import { EuiCode } from '../../../../src/components';
+
+import DataGridRowHeightOptions from './row_height_options';
+const dataGridRowHeightOptionsSource = require('!!raw-loader!./row_height_options');
+const dataGridRowHeightOptionsHtml = renderToHtml(DataGridRowHeightOptions);
+
+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>rowHeightOptions</EuiCode> prop. It accepts an object that
+            allows for customization.
+          </p>
+          <p>
+            The <EuiCode>rowHeightOptions</EuiCode> prop have two properties:
+          </p>
+          <ul>
+            <li>
+              <EuiCode>defaultHeight</EuiCode> - uses for defining height which
+              will be used for all rows as default (number)
+            </li>
+            <li>
+              <EuiCode>initialHeights</EuiCode> - uses for defining height which
+              will be used for defined row.
+              <br />
+              This is an object where the key is the row number and the value is
+              its height.
+            </li>
+          </ul>
+        </Fragment>
+      ),
+      components: { DataGridRowHeightOptions },
+      demo: <DataGridRowHeightOptions />,
+    },
+  ],
+};

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

@@ -0,0 +1,119 @@
+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 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}
+      rowHeightOptions={{
+        defaultHeight: 60,
+        initialHeights: {
+          1: 100,
+          4: 140,
+          5: 80,
+        },
+      }}
+      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>
+  );
+};

src/components/datagrid/_data_grid_data_row.scss

@@ -146,6 +146,11 @@
   flex-grow: 1;
 }
 
+.euiDataGridRowCell__contentByHeight {
+  max-width: 100%;
+  flex-grow: 1;
+}
+
 .euiDataGridRowCell__expandButton {
   display: flex;
   flex-grow: 0;
@@ -218,12 +223,20 @@
   }
 }
 
+.euiDataGridRowCell--fontSizeSmall {
+  @include euiFontSizeXS;
+}
+
 @include euiDataGridStyles(fontSizeLarge) {
   @include euiDataGridRowCell {
     @include euiFontSize;
   }
 }
 
+.euiDataGridRowCell--fontSizeLarge {
+  @include euiFontSize;
+}
+
 // Padding alternates
 @include euiDataGridStyles(paddingSmall) {
   @include euiDataGridRowCell {
@@ -236,6 +249,10 @@
   }
 }
 
+.euiDataGridRowCell--paddingSmall {
+  padding: $euiDataGridCellPaddingS;
+}
+
 @include euiDataGridStyles(paddingLarge) {
   @include euiDataGridRowCell {
     padding: $euiDataGridCellPaddingL;
@@ -247,6 +264,10 @@
   }
 }
 
+.euiDataGridRowCell--paddingLarge {
+  padding: $euiDataGridCellPaddingL;
+}
+
 @keyframes euiDataGridCellButtonSlideIn {
   from {
     margin-left: 0;

src/components/datagrid/data_grid.tsx

@@ -55,6 +55,7 @@ import {
   EuiDataGridFocusedCell,
   EuiDataGridOnColumnResizeHandler,
   EuiDataGridStyleFooter,
+  EuiDataGridRowHeightOptions,
 } from './data_grid_types';
 import { EuiDataGridCellProps } from './data_grid_cell';
 import { EuiButtonEmpty } from '../button';
@@ -78,6 +79,7 @@ import {
   DataGridSortingContext,
 } from './data_grid_context';
 import { useDataGridColumnSorting } from './column_sorting';
+import { computedStylesForGridCell } from './get_max_lines';
 
 // Used to short-circuit some async browser behaviour that is difficult to account for in tests
 const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
@@ -163,6 +165,8 @@ type CommonGridProps = CommonProps &
      * Sets the grid's width, forcing it to overflow in a scrollable container with cell virtualization
      */
     width?: CSSProperties['width'];
+
+    rowHeightOptions?: EuiDataGridRowHeightOptions;
   };
 
 // Force either aria-label or aria-labelledby to be defined
@@ -692,6 +696,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     minSizeForControls = MINIMUM_WIDTH_FOR_GRID_CONTROLS,
     height,
     width,
+    rowHeightOptions,
     ...rest
   } = props;
 
@@ -888,6 +893,8 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     }
   }, [focusedCell, contentRef]);
 
+  computedStylesForGridCell(gridStyles);
+
   const classes = classNames(
     'euiDataGrid',
     fontSizesToClassMap[gridStyles.fontSize!],
@@ -1128,6 +1135,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                         renderFooterCellValue={renderFooterCellValue}
                         rowCount={rowCount}
                         interactiveCellId={interactiveCellId}
+                        rowHeightOptions={rowHeightOptions}
                       />
                     </div>
                   </div>