[EuiDataGrid] Add global custom cell height

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

@@ -0,0 +1,90 @@
+import React, { useState, useCallback } from 'react';
+import { fake } from 'faker';
+
+import { EuiDataGrid, EuiAvatar, EuiMark } from '../../../../src/components/';
+
+const columns = [
+  {
+    id: 'avatar',
+    initialWidth: 80,
+    isResizable: false,
+    isExpandable: false,
+  },
+  {
+    id: 'team',
+    initialWidth: 100,
+  },
+  {
+    id: 'members',
+    isExpandable: false,
+    isTruncating: false,
+  },
+];
+
+const data = [];
+
+for (let i = 1; i < 100; i++) {
+  const subdata = [];
+  for (let x = 1; x < 50; x++) {
+    subdata.push(
+      <>
+        {fake('{{name.firstName}}')}{' '}
+        <EuiMark>{fake('{{name.lastName}}')}</EuiMark>,{' '}
+      </>
+    );
+  }
+
+  data.push({
+    avatar: (
+      <EuiAvatar
+        size="xl"
+        name={fake('{{name.lastName}}, {{name.firstName}}')}
+      />
+    ),
+    team: fake('{{company.companyName}}'),
+    members: (
+      <div>
+        {subdata.map((sub, idx) => (
+          <span key={idx}>{sub}</span>
+        ))}
+      </div>
+    ),
+  });
+}
+
+export default () => {
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
+
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  );
+
+  const setPageIndex = useCallback(
+    (pageIndex) => setPagination({ ...pagination, pageIndex }),
+    [pagination, setPagination]
+  );
+  const setPageSize = useCallback(
+    (pageSize) => setPagination({ ...pagination, pageSize, pageIndex: 0 }),
+    [pagination, setPagination]
+  );
+
+  return (
+    <EuiDataGrid
+      aria-label="DataGrid demonstrating column sizing constraints"
+      defaultColumnHeight={126}
+      columns={columns}
+      columnVisibility={{
+        visibleColumns: visibleColumns,
+        setVisibleColumns: setVisibleColumns,
+      }}
+      rowCount={data.length}
+      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+      pagination={{
+        ...pagination,
+        pageSizeOptions: [5, 10, 25],
+        onChangeItemsPerPage: setPageSize,
+        onChangePage: setPageIndex,
+      }}
+    />
+  );
+};

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

@@ -23,6 +23,7 @@ const dataGridControlsSource = require('!!raw-loader!./additional_controls');
 const dataGridControlsHtml = renderToHtml(DataGridControls);
 
 import DataGridColumnWidths from './column_widths';
+import DataGridCellHeight from './cell_height';
 import DataGridColumnActions from './column_actions';
 import DataGridColumnCellActions from './column_cell_actions';
 const dataGridColumnWidthsSource = require('!!raw-loader!./column_widths');
@@ -274,6 +275,31 @@ export const DataGridStylingExample = {
       },
       demo: <DataGridColumnWidths />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dataGridColumnWidthsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dataGridColumnWidthsHtml,
+        },
+      ],
+      title: 'Default cell height',
+      text: (
+        <Fragment>
+          <p>Lets try out assigning a custom cell height</p>
+        </Fragment>
+      ),
+      components: { DataGridCellHeight },
+      snippet: widthsSnippet,
+      props: {
+        EuiDataGrid,
+        EuiDataGridColumn,
+      },
+      demo: <DataGridCellHeight />,
+    },
     {
       source: [
         {

src/components/datagrid/_data_grid_data_row.scss

@@ -139,7 +139,7 @@
 
 .euiDataGridRowCell__expandFlex {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .euiDataGridRowCell__expandContent {

src/components/datagrid/_mixins.scss

@@ -61,6 +61,8 @@ $euiDataGridStyles: (
 @mixin euiDataGridRowCell {
   .euiDataGridRowCell {
     @content;
+    align-items: flex-start;
+    overflow-y: hidden;
   }
 }
 

src/components/datagrid/data_grid.tsx

@@ -163,6 +163,8 @@ type CommonGridProps = CommonProps &
      * Sets the grid's width, forcing it to overflow in a scrollable container with cell virtualization
      */
     width?: CSSProperties['width'];
+
+    defaultColumnHeight?: number;
   };
 
 // Force either aria-label or aria-labelledby to be defined
@@ -692,6 +694,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
     minSizeForControls = MINIMUM_WIDTH_FOR_GRID_CONTROLS,
     height,
     width,
+    defaultColumnHeight,
     ...rest
   } = props;
 
@@ -1110,6 +1113,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                         columns={orderedVisibleColumns}
                         columnWidths={columnWidths}
                         defaultColumnWidth={defaultColumnWidth}
+                        defaultColumnHeight={defaultColumnHeight}
                         toolbarHeight={toolbarDemensions.height}
                         leadingControlColumns={leadingControlColumns}
                         schema={mergedSchema}

src/components/datagrid/data_grid_body.tsx

@@ -70,6 +70,7 @@ export interface EuiDataGridBodyProps {
   isFullScreen: boolean;
   columnWidths: EuiDataGridColumnWidths;
   defaultColumnWidth?: number | null;
+  defaultColumnHeight?: number | null;
   leadingControlColumns?: EuiDataGridControlColumn[];
   trailingControlColumns?: EuiDataGridControlColumn[];
   columns: EuiDataGridColumn[];
@@ -313,6 +314,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     isFullScreen,
     columnWidths,
     defaultColumnWidth,
+    defaultColumnHeight,
     leadingControlColumns = [],
     trailingControlColumns = [],
     columns,
@@ -519,7 +521,9 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     ]
   );
 
-  const [rowHeight, setRowHeight] = useState(INITIAL_ROW_HEIGHT);
+  const [rowHeight, setRowHeight] = useState(
+    defaultColumnHeight || INITIAL_ROW_HEIGHT
+  );
   const getRowHeight = useCallback(() => rowHeight, [rowHeight]);
   useEffect(() => {
     if (gridRef.current) gridRef.current.resetAfterRowIndex(0);

src/components/datagrid/data_grid_cell.tsx

@@ -462,11 +462,20 @@ export class EuiDataGridCell extends Component<
         }}
         clickOutsideDisables={true}>
         <div className="euiDataGridRowCell__expandFlex">
-          <div className="euiDataGridRowCell__expandContent">
+          <div
+            className={
+              column?.isTruncating !== false
+                ? 'euiDataGridRowCell__expandContent'
+                : ''
+            }>
             {screenReaderPosition}
             <div
               ref={this.setCellContentsRef}
-              className="euiDataGridRowCell__truncate">
+              className={
+                column?.isTruncating !== false
+                  ? 'euiDataGridRowCell__truncate'
+                  : ''
+              }>
               <EuiDataGridCellContent {...cellContentProps} />
             </div>
           </div>

src/components/datagrid/data_grid_types.ts

@@ -62,6 +62,7 @@ export interface EuiDataGridColumn {
    * Whether this column's width can be changed by the user, defaults to true
    */
   isResizable?: boolean;
+  isTruncating?: boolean;
   /**
    * Initial width (in pixels) of the column
    */