[EuiDataGrid] Auto-fit rows to content

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added optional line numbers to `EuiCodeBlock` ([#4993](https://github.com/elastic/eui/pull/4993))
 - Removed `emoticon` support and removed rendered `<div>` from `EuiMarkdownFormat` ([#5176](https://github.com/elastic/eui/pull/5176))
+- 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))
 
 **Bug fixes**
 

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,34 +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>
@@ -76,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.tsx

@@ -0,0 +1,211 @@
+import React, {
+  useCallback,
+  useState,
+  createContext,
+  useContext,
+  useMemo,
+  ReactNode,
+} from 'react';
+// @ts-ignore not configured to import json
+import githubData from './row_auto_height_data.json';
+
+import {
+  EuiDataGrid,
+  EuiDataGridProps,
+} from '../../../../src/components/datagrid';
+import { EuiLink } from '../../../../src/components/link';
+import { EuiIcon } from '../../../../src/components/icon';
+import { EuiToolTip } from '../../../../src/components/tool_tip';
+import { EuiAvatar } from '../../../../src/components/avatar';
+import { EuiBadge } from '../../../../src/components/badge';
+import { EuiMarkdownFormat } from '../../../../src/components/markdown_editor';
+
+interface DataShape {
+  html_url: string;
+  title: string;
+  user: {
+    login: string;
+    avatar_url: string;
+  };
+  labels: Array<{
+    name: string;
+    color: string;
+  }>;
+  comments: number;
+  created_at: string;
+  body?: string;
+}
+
+// convert strings to Date objects
+for (let i = 0; i < githubData.length; i++) {
+  githubData[i].created_at = new Date(githubData[i].created_at);
+}
+
+type DataContextShape =
+  | undefined
+  | {
+      data: DataShape[];
+    };
+const DataContext = createContext<DataContextShape>(undefined);
+
+const columns = [
+  {
+    id: 'created',
+    displayAsText: 'Created',
+    schema: 'datetime',
+    isExpandable: false,
+  },
+  {
+    id: 'title',
+    displayAsText: 'Title',
+    isExpandable: false,
+  },
+  {
+    id: 'user',
+    displayAsText: 'User',
+    isExpandable: false,
+  },
+  {
+    id: 'body',
+    displayAsText: 'Description',
+  },
+  {
+    id: 'labels',
+    displayAsText: 'Labels',
+    isExpandable: false,
+  },
+];
+
+// it is expensive to compute 10000 rows of fake data
+// instead of loading up front, generate entries on the fly
+const raw_data: DataShape[] = githubData;
+
+const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+  rowIndex,
+  columnId,
+  isDetails,
+}) => {
+  const { data } = useContext(DataContext)!;
+
+  const item = data[rowIndex];
+  let content: ReactNode = '';
+
+  if (columnId === 'title') {
+    content = (
+      <>
+        {item.comments >= 1 && (
+          <EuiToolTip content={`${item.comments} comments`}>
+            <EuiIcon type="editorComment" />
+          </EuiToolTip>
+        )}
+        <EuiLink href={item.html_url} target="blank" external>
+          {item.title}
+        </EuiLink>
+      </>
+    );
+  } else if (columnId === 'user') {
+    content = (
+      <>
+        <EuiAvatar
+          name={item.user.login}
+          imageUrl={item.user.avatar_url}
+          size="l"
+        />
+        &nbsp;{item.user.login}
+      </>
+    );
+  } else if (columnId === 'labels') {
+    content = (
+      <>
+        {item.labels.map(({ name, color }) => (
+          <EuiBadge key={name} color={`#${color}`}>
+            {name}
+          </EuiBadge>
+        ))}
+      </>
+    );
+  } else if (columnId === 'created') {
+    content = item.created_at.toString();
+  } else if (columnId === 'body') {
+    if (isDetails) {
+      // expanded in a popover
+      content = <EuiMarkdownFormat>{item.body ?? ''}</EuiMarkdownFormat>;
+    } else {
+      // a full issue description is a *lot* to shove into a cell
+      content = (item.body ?? '').slice(0, 300);
+    }
+  }
+
+  return content;
+};
+
+export default () => {
+  // ** Pagination config
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 });
+
+  // ** Sorting config
+  const [sortingColumns, setSortingColumns] = useState([]);
+  const onSort = useCallback(
+    (sortingColumns) => {
+      setSortingColumns(sortingColumns);
+    },
+    [setSortingColumns]
+  );
+
+  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 rowHeightsOptions = useMemo(
+    () => ({
+      defaultHeight: 'auto' as const,
+    }),
+    []
+  );
+
+  const dataContext = useMemo<DataContextShape>(
+    () => ({
+      data: raw_data,
+    }),
+    []
+  );
+
+  return (
+    <DataContext.Provider value={dataContext}>
+      <EuiDataGrid
+        aria-label="Row height options with auto demo"
+        columns={columns}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        rowCount={raw_data.length}
+        height={400}
+        renderCellValue={RenderCellValue}
+        inMemory={{ level: 'sorting' }}
+        sorting={{ columns: sortingColumns, onSort }}
+        rowHeightsOptions={rowHeightsOptions}
+        pagination={{
+          ...pagination,
+          pageSizeOptions: [50, 250, 1000],
+          onChangeItemsPerPage: onChangeItemsPerPage,
+          onChangePage: onChangePage,
+        }}
+      />
+    </DataContext.Provider>
+  );
+};