[EuiDataGrid] Auto-fit rows to content

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `isDisabled` prop to `EuiFormRow` that disables the child field element ([#4908](https://github.com/elastic/eui/pull/4908))
+- Added `auto` as value for `defaultHeight` in prop `rowHeightsOptions` in `EuiDataGrid` that allows to content auto-fit to row ([#4958](https://github.com/elastic/eui/pull/4958))
 
 ## [`37.0.0`](https://github.com/elastic/eui/tree/v37.0.0)
 

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

@@ -7,11 +7,15 @@ import {
   EuiCode,
   EuiCodeBlock,
   EuiSpacer,
+  EuiText,
 } from '../../../../src/components';
 
 import DataGridRowHeightOptions from './row_height_options';
 const dataGridRowHeightOptionsSource = require('!!raw-loader!./row_height_options');
 const dataGridRowHeightOptionsHtml = renderToHtml(DataGridRowHeightOptions);
+import DataGridRowAutoHeight from './row_auto_height';
+const dataGridRowAutoHeightSource = require('!!raw-loader!./row_auto_height');
+const dataGridRowAutoHeightHtml = renderToHtml(DataGridRowAutoHeight);
 
 const rowHeightsSnippet = `rowHeightsOptions = {
   defaultHeight: {
@@ -26,8 +30,50 @@ const rowHeightsSnippet = `rowHeightsOptions = {
   },
 }`;
 
+const autoRowHeightsSnippet = `
+  {
+    defaultHeight: 'auto', // each row auto fit to content except rows which was defined in 'rowHeights'
+    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
+    },
+  }
+`;
+
 export const DataGridRowHeightOptionsExample = {
   title: 'Data grid row height options',
+  intro: (
+    <Fragment>
+      <EuiText>
+        <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>
+      </EuiText>
+      <EuiSpacer />
+      <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 />
+    </Fragment>
+  ),
   sections: [
     {
       source: [
@@ -40,33 +86,9 @@ export const DataGridRowHeightOptionsExample = {
           code: dataGridRowHeightOptionsHtml,
         },
       ],
+      title: 'Fixed heights for rows',
       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>
@@ -75,5 +97,34 @@ export const DataGridRowHeightOptionsExample = {
       components: { DataGridRowHeightOptions },
       demo: <DataGridRowHeightOptions />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridRowAutoHeightSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridRowAutoHeightHtml,
+        },
+      ],
+      title: 'Auto-fit row to content',
+      text: (
+        <Fragment>
+          <p>
+            Row height options also supports to set value so that rows auto fit
+            to content. Just provide <EuiCode>auto</EuiCode> as value for{' '}
+            <EuiCode>defaultHeight</EuiCode> or for one of the rows in{' '}
+            <EuiCode>rowHeights</EuiCode>
+          </p>
+          <EuiSpacer />
+          <EuiCodeBlock language="javascript" paddingSize="s" isCopyable>
+            {autoRowHeightsSnippet}
+          </EuiCodeBlock>
+        </Fragment>
+      ),
+      components: { DataGridRowAutoHeight },
+      demo: <DataGridRowAutoHeight />,
+    },
   ],
 };

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

@@ -0,0 +1,175 @@
+import React, {
+  useCallback,
+  useState,
+  createContext,
+  useContext,
+  useMemo,
+  useEffect,
+} from 'react';
+import { fake } from 'faker';
+
+import {
+  EuiDataGrid,
+  EuiText,
+  EuiImage,
+  EuiButtonGroup,
+  EuiSpacer,
+} 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, contentTypeSelected } = useContext(
+    DataContext
+  );
+
+  useEffect(() => {
+    adjustMountedCellCount(1);
+    return () => adjustMountedCellCount(-1);
+  }, [adjustMountedCellCount]);
+
+  if (data[rowIndex] == null) {
+    data[rowIndex] = {
+      name: fake('{{lorem.text}}'),
+      text: fake('{{lorem.text}}'),
+    };
+  }
+
+  const firstNumberSize = rowIndex < 7 && rowIndex > 0 ? rowIndex : 5;
+
+  return contentTypeSelected === 'images' ? (
+    <EuiImage
+      size={'original'}
+      alt="Fake img"
+      url={`https://source.unsplash.com/${firstNumberSize}00x${firstNumberSize}00/?starwars`}
+    />
+  ) : (
+    data[rowIndex][columnId]
+  );
+}
+
+const contentTypeOptions = [
+  {
+    id: 'text',
+    label: 'Text',
+  },
+  {
+    id: 'images',
+    label: 'Images',
+  },
+];
+
+export default () => {
+  // ** Pagination config
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
+  const [contentTypeSelected, setContentTypeSelected] = useState('text');
+
+  const onChangeItemsPerPage = useCallback(
+    (pageSize) =>
+      setPagination((pagination) => ({
+        ...pagination,
+        pageSize,
+        pageIndex: 0,
+      })),
+    [setPagination]
+  );
+
+  const onContentTypeChange = useCallback(
+    (optionId) => setContentTypeSelected(optionId),
+    [setContentTypeSelected]
+  );
+
+  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: 'auto',
+      rowHeights: {
+        1: {
+          lineCount: 5,
+        },
+        4: contentTypeSelected === 'images' ? 240 : 140,
+      },
+    }),
+    [contentTypeSelected]
+  );
+
+  const dataContext = useMemo(
+    () => ({
+      data: raw_data,
+      contentTypeSelected,
+      adjustMountedCellCount: (adjustment) =>
+        setMountedCellCount(
+          (mountedCellCount) => mountedCellCount + adjustment
+        ),
+    }),
+    [contentTypeSelected]
+  );
+
+  const grid = (
+    <EuiDataGrid
+      aria-label="Row height options with auto 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>
+      <EuiSpacer />
+      <EuiText style={{ textAlign: 'center' }}>
+        <p>Type of content</p>
+      </EuiText>
+      <EuiSpacer />
+      <EuiButtonGroup
+        isFullWidth
+        buttonSize="compressed"
+        legend="Content type"
+        options={contentTypeOptions}
+        idSelected={contentTypeSelected}
+        onChange={onContentTypeChange}
+      />
+      <EuiSpacer />
+      {grid}
+    </DataContext.Provider>
+  );
+};

src/components/datagrid/data_grid.test.tsx

@@ -24,6 +24,19 @@ jest.mock('./row_height_utils', () => {
     RowHeightUtils: jest.fn().mockImplementation(() => {
       return {
         computeStylesForGridCell: () => {},
+        clearHeightsCache: () => {},
+        setGrid: () => {},
+        getStylesForCell: () => ({
+          wordWrap: 'break-word',
+          wordBreak: 'break-word',
+          flexGrow: 1,
+        }),
+        isAutoHeight: () => false,
+        setRowHeight: () => {},
+        getRowHeight: () => 32,
+        getFont: () => null,
+        compareHeights: (currentRowHeight: number, cachedRowHeight: number) =>
+          currentRowHeight === cachedRowHeight,
         getCalculatedHeight: (
           heightOption: EuiDataGridRowHeightOption,
           defaultHeight: number
@@ -46,7 +59,6 @@ jest.mock('./row_height_utils', () => {
         },
       };
     }),
-    getStylesForCell: () => ({}),
   };
 });