[Lens] Auto height setting for table

x-pack/plugins/lens/common/expressions/datatable/datatable.ts

@@ -22,6 +22,7 @@ export interface DatatableArgs {
   columns: ColumnConfigArg[];
   sortingColumnId: SortingState['columnId'];
   sortingDirection: SortingState['direction'];
+  fitRowToContent?: boolean;
 }
 
 export const getDatatable = (
@@ -57,6 +58,10 @@ export const getDatatable = (
       types: ['string'],
       help: '',
     },
+    fitRowToContent: {
+      types: ['boolean'],
+      help: '',
+    },
   },
   async fn(...args) {
     /** Build optimization: prevent adding extra code into initial bundle **/

x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx

@@ -18,7 +18,8 @@ export const createGridCell = (
   formatters: Record<string, ReturnType<FormatFactory>>,
   columnConfig: ColumnConfig,
   DataContext: React.Context<DataContextType>,
-  uiSettings: IUiSettingsClient
+  uiSettings: IUiSettingsClient,
+  fitRowToContent?: boolean
 ) => {
   // Changing theme requires a full reload of the page, so we can cache here
   const IS_DARK_THEME = uiSettings.get('theme:darkMode');
@@ -75,7 +76,7 @@ export const createGridCell = (
          */
         dangerouslySetInnerHTML={{ __html: content }} // eslint-disable-line react/no-danger
         data-test-subj="lnsTableCellContent"
-        className={`lnsTableCell ${alignmentClassName}`}
+        className={`${fitRowToContent ? '' : 'lnsTableCell'} ${alignmentClassName}`}
       />
     );
   };

x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx

@@ -264,8 +264,15 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
   }, [firstTableRef, onRowContextMenuClick, columnConfig, hasAtLeastOneRowClickAction]);
 
   const renderCellValue = useMemo(
-    () => createGridCell(formatters, columnConfig, DataContext, props.uiSettings),
-    [formatters, columnConfig, props.uiSettings]
+    () =>
+      createGridCell(
+        formatters,
+        columnConfig,
+        DataContext,
+        props.uiSettings,
+        props.args.fitRowToContent
+      ),
+    [formatters, columnConfig, props.uiSettings, props.args.fitRowToContent]
   );
 
   const columnVisibility = useMemo(
@@ -351,6 +358,13 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
         <EuiDataGrid
           aria-label={dataGridAriaLabel}
           data-test-subj="lnsDataTable"
+          rowHeightsOptions={
+            props.args.fitRowToContent
+              ? {
+                  defaultHeight: 'auto',
+                }
+              : undefined
+          }
           columns={columns}
           columnVisibility={columnVisibility}
           trailingControlColumns={trailingControlColumns}

x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFormRow, EuiSwitch } from '@elastic/eui';
+import { ToolbarPopover } from '../../shared_components';
+import { VisualizationToolbarProps } from '../../types';
+import { DatatableVisualizationState } from '../visualization';
+
+export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisualizationState>) {
+  const { state, setState } = props;
+
+  return (
+    <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" responsive={false}>
+      <ToolbarPopover
+        title={i18n.translate('xpack.lens.table.valuesVisualOptions', {
+          defaultMessage: 'Visual options',
+        })}
+        type="visualOptions"
+        groupPosition="none"
+        buttonDataTestSubj="lnsVisualOptionsButton"
+      >
+        <EuiFormRow
+          label={i18n.translate('xpack.lens.table.visualOptionsFitRowToContentLabel', {
+            defaultMessage: 'Fit row to content',
+          })}
+          display="columnCompressedSwitch"
+        >
+          <EuiSwitch
+            compressed
+            data-test-subj="lens-legend-auto-height-switch"
+            label=""
+            showLabel={false}
+            checked={!!state.fitRowToContent}
+            onChange={() => {
+              const current = state.fitRowToContent ?? false;
+              setState({
+                ...state,
+                fitRowToContent: !current,
+              });
+            }}
+          />
+        </EuiFormRow>
+      </ToolbarPopover>
+    </EuiFlexGroup>
+  );
+}

x-pack/plugins/lens/public/datatable_visualization/visualization.tsx

@@ -24,12 +24,13 @@ import { getStopsForFixedMode } from '../shared_components';
 import { LayerType, layerTypes } from '../../common';
 import { getDefaultSummaryLabel } from '../../common/expressions';
 import type { ColumnState, SortingState } from '../../common/expressions';
-
+import { DataTableToolbar } from './components/toolbar';
 export interface DatatableVisualizationState {
   columns: ColumnState[];
   layerId: string;
   layerType: LayerType;
   sorting?: SortingState;
+  fitRowToContent?: boolean;
 }
 
 const visualizationLabel = i18n.translate('xpack.lens.datatable.label', {
@@ -389,6 +390,7 @@ export const getDatatableVisualization = ({
             }),
             sortingColumnId: [state.sorting?.columnId || ''],
             sortingDirection: [state.sorting?.direction || 'none'],
+            fitRowToContent: [state.fitRowToContent ?? false],
           },
         },
       ],
@@ -399,6 +401,15 @@ export const getDatatableVisualization = ({
     return undefined;
   },
 
+  renderToolbar(domElement, props) {
+    render(
+      <I18nProvider>
+        <DataTableToolbar {...props} />
+      </I18nProvider>,
+      domElement
+    );
+  },
+
   onEditAction(state, event) {
     switch (event.data.action) {
       case 'sort':