From f4fe8412887070e84c8f3d6013bdecd0f3832da2 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Mon, 25 Oct 2021 18:15:24 +0300
Subject: [PATCH 1/8] Add setting which allow user to fit row to content

---
 .../common/expressions/datatable/datatable.ts |  5 ++
 .../components/cell_value.tsx                 |  5 +-
 .../components/table_basic.tsx                |  7 ++-
 .../components/toolbar.tsx                    | 56 +++++++++++++++++++
 .../datatable_visualization/visualization.tsx | 13 ++++-
 5 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx

diff --git a/x-pack/plugins/lens/common/expressions/datatable/datatable.ts b/x-pack/plugins/lens/common/expressions/datatable/datatable.ts
index d9f1f9c1196ffb..c1bde5023ed7c6 100644
--- a/x-pack/plugins/lens/common/expressions/datatable/datatable.ts
+++ b/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 **/
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
index 6d6b2e4b1013fa..8083c3f6c2e525 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
+++ b/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}`}
       />
     );
   };
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
index 6be69e5d4d2368..2218fdcadc6491 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
@@ -264,8 +264,8 @@ 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 +351,9 @@ 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}
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
new file mode 100644
index 00000000000000..fe86bb3d919617
--- /dev/null
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
@@ -0,0 +1,56 @@
+/*
+ * 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.valuesSettings', {
+          defaultMessage: 'Settings',
+        })}
+        type="legend"
+        groupPosition="none"
+        buttonDataTestSubj="lnsSettingsButton"
+      >
+        <EuiFormRow
+          label={i18n.translate('xpack.lens.table.settingFitRowToContentLabel', {
+            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 ?? true;
+              setState({
+                ...state,
+                fitRowToContent: !current,
+              });
+            }}
+          />
+        </EuiFormRow>
+      </ToolbarPopover>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
index 807d32a245834a..c0609936616892 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
+++ b/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':

From 88efd7dced99eeeeb1399b3381be7b5647183e41 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Mon, 25 Oct 2021 18:28:13 +0300
Subject: [PATCH 2/8] Fix lint

---
 .../common/expressions/datatable/datatable.ts |  2 +-
 .../components/cell_value.tsx                 |  2 +-
 .../components/table_basic.tsx                | 19 +++++++++++++++----
 .../components/toolbar.tsx                    |  6 +-----
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/lens/common/expressions/datatable/datatable.ts b/x-pack/plugins/lens/common/expressions/datatable/datatable.ts
index c1bde5023ed7c6..7a6d68eaa65664 100644
--- a/x-pack/plugins/lens/common/expressions/datatable/datatable.ts
+++ b/x-pack/plugins/lens/common/expressions/datatable/datatable.ts
@@ -61,7 +61,7 @@ export const getDatatable = (
     fitRowToContent: {
       types: ['boolean'],
       help: '',
-    }
+    },
   },
   async fn(...args) {
     /** Build optimization: prevent adding extra code into initial bundle **/
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
index 8083c3f6c2e525..b607fab8ddf447 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
@@ -19,7 +19,7 @@ export const createGridCell = (
   columnConfig: ColumnConfig,
   DataContext: React.Context<DataContextType>,
   uiSettings: IUiSettingsClient,
-  fitRowToContent?: boolean,
+  fitRowToContent?: boolean
 ) => {
   // Changing theme requires a full reload of the page, so we can cache here
   const IS_DARK_THEME = uiSettings.get('theme:darkMode');
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
index 2218fdcadc6491..9d9ae875a6ba34 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
@@ -264,7 +264,14 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
   }, [firstTableRef, onRowContextMenuClick, columnConfig, hasAtLeastOneRowClickAction]);
 
   const renderCellValue = useMemo(
-    () => createGridCell(formatters, columnConfig, DataContext, props.uiSettings, props.args.fitRowToContent),
+    () =>
+      createGridCell(
+        formatters,
+        columnConfig,
+        DataContext,
+        props.uiSettings,
+        props.args.fitRowToContent
+      ),
     [formatters, columnConfig, props.uiSettings, props.args.fitRowToContent]
   );
 
@@ -351,9 +358,13 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
         <EuiDataGrid
           aria-label={dataGridAriaLabel}
           data-test-subj="lnsDataTable"
-          rowHeightsOptions={props.args.fitRowToContent ? {
-            defaultHeight: 'auto'
-          } : undefined}
+          rowHeightsOptions={
+            props.args.fitRowToContent
+              ? {
+                  defaultHeight: 'auto',
+                }
+              : undefined
+          }
           columns={columns}
           columnVisibility={columnVisibility}
           trailingControlColumns={trailingControlColumns}
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
index fe86bb3d919617..f35618abf18348 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
@@ -7,11 +7,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import {
-  EuiFlexGroup,
-  EuiFormRow,
-  EuiSwitch,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFormRow, EuiSwitch } from '@elastic/eui';
 import { ToolbarPopover } from '../../shared_components';
 import { VisualizationToolbarProps } from '../../types';
 import { DatatableVisualizationState } from '../visualization';

From f8512ee5aeee263c3dc93b4c828645692f6938f1 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Mon, 1 Nov 2021 18:01:29 +0300
Subject: [PATCH 3/8] Change icon

---
 .../datatable_visualization/components/toolbar.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
index f35618abf18348..e360113e274ac6 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
@@ -18,15 +18,15 @@ export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisua
   return (
     <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" responsive={false}>
       <ToolbarPopover
-        title={i18n.translate('xpack.lens.table.valuesSettings', {
-          defaultMessage: 'Settings',
+        title={i18n.translate('xpack.lens.table.valuesVisualOptions', {
+          defaultMessage: 'Visual options',
         })}
-        type="legend"
+        type="visualOptions"
         groupPosition="none"
-        buttonDataTestSubj="lnsSettingsButton"
+        buttonDataTestSubj="lnsVisualOptionsButton"
       >
         <EuiFormRow
-          label={i18n.translate('xpack.lens.table.settingFitRowToContentLabel', {
+          label={i18n.translate('xpack.lens.table.visualOptionsFitRowToContentLabel', {
             defaultMessage: 'Fit row to content',
           })}
           display="columnCompressedSwitch"

From b246b8e7d1ff74e9429f46fe1a970209e3dfd0c8 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Tue, 2 Nov 2021 16:57:05 +0300
Subject: [PATCH 4/8] Fix switch behavior

---
 .../lens/public/datatable_visualization/components/toolbar.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
index e360113e274ac6..b6222369652c00 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
@@ -38,7 +38,7 @@ export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisua
             showLabel={false}
             checked={!!state.fitRowToContent}
             onChange={() => {
-              const current = state.fitRowToContent ?? true;
+              const current = state.fitRowToContent ?? false;
               setState({
                 ...state,
                 fitRowToContent: !current,

From c34e3d3182c04d5dda5098c170310ec463c8d195 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Thu, 11 Nov 2021 13:00:34 +0300
Subject: [PATCH 5/8] Fix some nits

---
 .../public/datatable_visualization/components/cell_value.tsx   | 3 ++-
 .../lens/public/datatable_visualization/components/toolbar.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
index b607fab8ddf447..dfd7576c8a482e 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
@@ -23,6 +23,7 @@ export const createGridCell = (
 ) => {
   // Changing theme requires a full reload of the page, so we can cache here
   const IS_DARK_THEME = uiSettings.get('theme:darkMode');
+  const tableCellClassName = fitRowToContent ? '' : 'lnsTableCell';
   return ({ rowIndex, columnId, setCellProps }: EuiDataGridCellValueElementProps) => {
     const { table, alignments, minMaxByColumnId, getColorForValue } = useContext(DataContext);
     const rowValue = table?.rows[rowIndex][columnId];
@@ -76,7 +77,7 @@ export const createGridCell = (
          */
         dangerouslySetInnerHTML={{ __html: content }} // eslint-disable-line react/no-danger
         data-test-subj="lnsTableCellContent"
-        className={`${fitRowToContent ? '' : 'lnsTableCell'} ${alignmentClassName}`}
+        className={`${tableCellClassName} ${alignmentClassName}`}
       />
     );
   };
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
index b6222369652c00..d1c25650deb1be 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
@@ -36,7 +36,7 @@ export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisua
             data-test-subj="lens-legend-auto-height-switch"
             label=""
             showLabel={false}
-            checked={!!state.fitRowToContent}
+            checked={Boolean(state.fitRowToContent)}
             onChange={() => {
               const current = state.fitRowToContent ?? false;
               setState({

From d40b139e60f49a147ff01d18858757d359d1c340 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Thu, 11 Nov 2021 14:55:16 +0300
Subject: [PATCH 6/8] Fix comments

---
 .../components/cell_value.tsx                 |  7 ++++--
 .../components/toolbar.tsx                    | 22 ++++++++++---------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
index dfd7576c8a482e..92148108a4a494 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
@@ -8,6 +8,7 @@
 import React, { useContext, useEffect } from 'react';
 import { EuiDataGridCellValueElementProps } from '@elastic/eui';
 import { IUiSettingsClient } from 'kibana/public';
+import classNames from 'classnames';
 import type { FormatFactory } from '../../../common';
 import { getOriginalId } from '../../../common/expressions';
 import type { ColumnConfig } from '../../../common/expressions';
@@ -23,13 +24,15 @@ export const createGridCell = (
 ) => {
   // Changing theme requires a full reload of the page, so we can cache here
   const IS_DARK_THEME = uiSettings.get('theme:darkMode');
-  const tableCellClassName = fitRowToContent ? '' : 'lnsTableCell';
   return ({ rowIndex, columnId, setCellProps }: EuiDataGridCellValueElementProps) => {
     const { table, alignments, minMaxByColumnId, getColorForValue } = useContext(DataContext);
     const rowValue = table?.rows[rowIndex][columnId];
     const content = formatters[columnId]?.convert(rowValue, 'html');
     const currentAlignment = alignments && alignments[columnId];
     const alignmentClassName = `lnsTableCell--${currentAlignment}`;
+    const className = classNames(alignmentClassName, {
+      'lnsTableCell': !fitRowToContent
+    })
 
     const { colorMode, palette } =
       columnConfig.columns.find(({ columnId: id }) => id === columnId) || {};
@@ -77,7 +80,7 @@ export const createGridCell = (
          */
         dangerouslySetInnerHTML={{ __html: content }} // eslint-disable-line react/no-danger
         data-test-subj="lnsTableCellContent"
-        className={`${tableCellClassName} ${alignmentClassName}`}
+        className={className}
       />
     );
   };
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
index d1c25650deb1be..b157b480166d97 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
@@ -5,16 +5,24 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useCallback } 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';
+import type { VisualizationToolbarProps } from '../../types';
+import type { DatatableVisualizationState } from '../visualization';
 
 export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisualizationState>) {
   const { state, setState } = props;
 
+  const onChange = useCallback(() => {
+    const current = state.fitRowToContent ?? false;
+    setState({
+      ...state,
+      fitRowToContent: !current,
+    });
+  }, [setState, state])
+
   return (
     <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" responsive={false}>
       <ToolbarPopover
@@ -37,13 +45,7 @@ export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisua
             label=""
             showLabel={false}
             checked={Boolean(state.fitRowToContent)}
-            onChange={() => {
-              const current = state.fitRowToContent ?? false;
-              setState({
-                ...state,
-                fitRowToContent: !current,
-              });
-            }}
+            onChange={onChange}
           />
         </EuiFormRow>
       </ToolbarPopover>

From d1fe075959990da50dede09d82e9b3cb145888d5 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Thu, 11 Nov 2021 14:57:34 +0300
Subject: [PATCH 7/8] Fix lint

---
 .../lens/public/datatable_visualization/components/toolbar.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
index b157b480166d97..8da980af644621 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/toolbar.tsx
@@ -21,7 +21,7 @@ export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisua
       ...state,
       fitRowToContent: !current,
     });
-  }, [setState, state])
+  }, [setState, state]);
 
   return (
     <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" responsive={false}>

From 75b7d00e23d979d051ea46e6a2acbd8008b91ffa Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Thu, 11 Nov 2021 15:42:23 +0300
Subject: [PATCH 8/8] Fix lint

---
 .../public/datatable_visualization/components/cell_value.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
index 92148108a4a494..a609b4b2a6e5fc 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.tsx
@@ -31,8 +31,8 @@ export const createGridCell = (
     const currentAlignment = alignments && alignments[columnId];
     const alignmentClassName = `lnsTableCell--${currentAlignment}`;
     const className = classNames(alignmentClassName, {
-      'lnsTableCell': !fitRowToContent
-    })
+      lnsTableCell: !fitRowToContent,
+    });
 
     const { colorMode, palette } =
       columnConfig.columns.find(({ columnId: id }) => id === columnId) || {};