[Lens][Datatable] Fix non-numeric default cell text alignment

x-pack/plugins/lens/public/visualizations/datatable/components/dimension_editor.tsx

@@ -26,6 +26,7 @@ import './dimension_editor.scss';
 import { CollapseSetting } from '../../../shared_components/collapse_setting';
 import { ColorMappingByValues } from '../../../shared_components/coloring/color_mapping_by_values';
 import { ColorMappingByTerms } from '../../../shared_components/coloring/color_mapping_by_terms';
+import { getColumnAlignment } from '../utils';
 
 const idPrefix = htmlIdGenerator()();
 
@@ -76,7 +77,7 @@ export function TableDimensionEditor(
   const datasource = frame.datasourceLayers?.[localState.layerId];
   const { dataType, isBucketed } = datasource?.getOperationForColumnId(accessor) ?? {};
   const showColorByTerms = shouldColorByTerms(dataType, isBucketed);
-  const currentAlignment = column?.alignment || (dataType === 'number' ? 'right' : 'left');
+  const currentAlignment = getColumnAlignment(column?.alignment, dataType === 'number');
   const currentColorMode = column?.colorMode || 'none';
   const hasDynamicColoring = currentColorMode !== 'none';
   const showDynamicColoringFeature = dataType !== 'date';

x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx

@@ -60,6 +60,7 @@ import { getFinalSummaryConfiguration } from '../../../../common/expressions/dat
 import { DEFAULT_HEADER_ROW_HEIGHT, DEFAULT_HEADER_ROW_HEIGHT_LINES } from './constants';
 import { getFieldTypeFromDatatable } from '../../../../common/expressions/datatable/utils';
 import { CellColorFn, getCellColorFn } from '../../../shared_components/coloring/get_cell_color_fn';
+import { getColumnAlignment } from '../utils';
 
 export const DataContext = React.createContext<DataContextType>({});
 
@@ -271,7 +272,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
       firstLocalTable.columns.reduce<Record<string, boolean>>(
         (map, column) => ({
           ...map,
-          [column.id]: column.meta.type === 'number',
+          [column.id]: column.meta.type === 'number' && column.meta.params?.id !== 'range',
         }),
         {}
       ),
@@ -281,14 +282,13 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
   const alignments: Record<string, 'left' | 'right' | 'center'> = useMemo(() => {
     const alignmentMap: Record<string, 'left' | 'right' | 'center'> = {};
     columnConfig.columns.forEach((column) => {
-      if (column.alignment) {
-        alignmentMap[column.columnId] = column.alignment;
-      } else {
-        alignmentMap[column.columnId] = isNumericMap[column.columnId] ? 'right' : 'left';
-      }
+      alignmentMap[column.columnId] = getColumnAlignment(
+        column.alignment,
+        isNumericMap[column.columnId]
+      );
     });
     return alignmentMap;
-  }, [columnConfig, isNumericMap]);
+  }, [columnConfig.columns, isNumericMap]);
 
   const minMaxByColumnId: Record<string, { min: number; max: number }> = useMemo(() => {
     return findMinMaxByColumnId(

x-pack/plugins/lens/public/visualizations/datatable/utils.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 { ColumnState } from '../../../common/expressions';
+
+export function getColumnAlignment(
+  alignment: ColumnState['alignment'],
+  isNumeric = false
+): 'left' | 'right' | 'center' {
+  if (alignment) return alignment;
+  return (isNumeric ? 'right' : 'left') ?? 'right';
+}