diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap b/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap
index 158c7fa4aeec37..992301af13ad04 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap
@@ -8,6 +8,11 @@ exports[`DatatableComponent it renders actions column when there are row actions
   <ContextProvider
     value={
       Object {
+        "alignments": Object {
+          "a": "left",
+          "b": "left",
+          "c": "right",
+        },
         "rowHasRowClickTriggerActions": Array [
           true,
           true,
@@ -234,6 +239,11 @@ exports[`DatatableComponent it renders the title and value 1`] = `
   <ContextProvider
     value={
       Object {
+        "alignments": Object {
+          "a": "left",
+          "b": "left",
+          "c": "right",
+        },
         "rowHasRowClickTriggerActions": undefined,
         "table": Object {
           "columns": Array [
@@ -447,6 +457,11 @@ exports[`DatatableComponent it should not render actions on header when it is in
   <ContextProvider
     value={
       Object {
+        "alignments": Object {
+          "a": "left",
+          "b": "left",
+          "c": "right",
+        },
         "rowHasRowClickTriggerActions": Array [
           false,
           false,
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.test.tsx
new file mode 100644
index 00000000000000..9bc982ebd9944b
--- /dev/null
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/cell_value.test.tsx
@@ -0,0 +1,81 @@
+/*
+ * 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 { mountWithIntl } from '@kbn/test/jest';
+import React from 'react';
+import { DataContext } from './table_basic';
+import { createGridCell } from './cell_value';
+import { FieldFormat } from 'src/plugins/data/public';
+import { Datatable } from 'src/plugins/expressions/public';
+
+describe('datatable cell renderer', () => {
+  const table: Datatable = {
+    type: 'datatable',
+    columns: [
+      {
+        id: 'a',
+        name: 'a',
+        meta: {
+          type: 'number',
+        },
+      },
+    ],
+    rows: [{ a: 123 }],
+  };
+  const CellRenderer = createGridCell(
+    {
+      a: { convert: (x) => `formatted ${x}` } as FieldFormat,
+    },
+    DataContext
+  );
+
+  it('renders formatted value', () => {
+    const instance = mountWithIntl(
+      <DataContext.Provider
+        value={{
+          table,
+          alignments: {
+            a: 'right',
+          },
+        }}
+      >
+        <CellRenderer
+          rowIndex={0}
+          columnId="a"
+          setCellProps={() => {}}
+          isExpandable={false}
+          isDetails={false}
+          isExpanded={false}
+        />
+      </DataContext.Provider>
+    );
+    expect(instance.text()).toEqual('formatted 123');
+  });
+
+  it('set class with text alignment', () => {
+    const cell = mountWithIntl(
+      <DataContext.Provider
+        value={{
+          table,
+          alignments: {
+            a: 'right',
+          },
+        }}
+      >
+        <CellRenderer
+          rowIndex={0}
+          columnId="a"
+          setCellProps={() => {}}
+          isExpandable={false}
+          isDetails={false}
+          isExpanded={false}
+        />
+      </DataContext.Provider>
+    );
+    expect(cell.find('.lnsTableCell').prop('className')).toContain('--right');
+  });
+});
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 a6e1e3386bcf35..2261dd06b532ba 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
@@ -14,19 +14,21 @@ export const createGridCell = (
   formatters: Record<string, ReturnType<FormatFactory>>,
   DataContext: React.Context<DataContextType>
 ) => ({ rowIndex, columnId }: EuiDataGridCellValueElementProps) => {
-  const { table } = useContext(DataContext);
+  const { table, alignments } = useContext(DataContext);
   const rowValue = table?.rows[rowIndex][columnId];
   const content = formatters[columnId]?.convert(rowValue, 'html');
+  const currentAlignment = alignments && alignments[columnId];
+  const alignmentClassName = `lnsTableCell--${currentAlignment}`;
 
   return (
-    <span
+    <div
       /*
        * dangerouslySetInnerHTML is necessary because the field formatter might produce HTML markup
        * which is produced in a safe way.
        */
       dangerouslySetInnerHTML={{ __html: content }} // eslint-disable-line react/no-danger
       data-test-subj="lnsTableCellContent"
-      className="lnsDataTableCellContent"
+      className={`lnsTableCell ${alignmentClassName}`}
     />
   );
 };
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx
new file mode 100644
index 00000000000000..e0d31a3ed02012
--- /dev/null
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx
@@ -0,0 +1,112 @@
+/*
+ * 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 { EuiButtonGroup } from '@elastic/eui';
+import { FramePublicAPI, VisualizationDimensionEditorProps } from '../../types';
+import { DatatableVisualizationState } from '../visualization';
+import { createMockDatasource, createMockFramePublicAPI } from '../../editor_frame_service/mocks';
+import { mountWithIntl } from '@kbn/test/jest';
+import { TableDimensionEditor } from './dimension_editor';
+
+describe('data table dimension editor', () => {
+  let frame: FramePublicAPI;
+  let state: DatatableVisualizationState;
+  let setState: (newState: DatatableVisualizationState) => void;
+  let props: VisualizationDimensionEditorProps<DatatableVisualizationState>;
+
+  function testState(): DatatableVisualizationState {
+    return {
+      layerId: 'first',
+      columns: [
+        {
+          columnId: 'foo',
+        },
+      ],
+    };
+  }
+
+  beforeEach(() => {
+    state = testState();
+    frame = createMockFramePublicAPI();
+    frame.datasourceLayers = {
+      first: createMockDatasource('test').publicAPIMock,
+    };
+    frame.activeData = {
+      first: {
+        type: 'datatable',
+        columns: [
+          {
+            id: 'foo',
+            name: 'foo',
+            meta: {
+              type: 'string',
+            },
+          },
+        ],
+        rows: [],
+      },
+    };
+    setState = jest.fn();
+    props = {
+      accessor: 'foo',
+      frame,
+      groupId: 'columns',
+      layerId: 'first',
+      state,
+      setState,
+    };
+  });
+
+  it('should render default alignment', () => {
+    const instance = mountWithIntl(<TableDimensionEditor {...props} />);
+    expect(instance.find(EuiButtonGroup).prop('idSelected')).toEqual(
+      expect.stringContaining('left')
+    );
+  });
+
+  it('should render default alignment for number', () => {
+    frame.activeData!.first.columns[0].meta.type = 'number';
+    const instance = mountWithIntl(<TableDimensionEditor {...props} />);
+    expect(instance.find(EuiButtonGroup).prop('idSelected')).toEqual(
+      expect.stringContaining('right')
+    );
+  });
+
+  it('should render specific alignment', () => {
+    state.columns[0].alignment = 'center';
+    const instance = mountWithIntl(<TableDimensionEditor {...props} />);
+    expect(instance.find(EuiButtonGroup).prop('idSelected')).toEqual(
+      expect.stringContaining('center')
+    );
+  });
+
+  it('should set state for the right column', () => {
+    state.columns = [
+      {
+        columnId: 'foo',
+      },
+      {
+        columnId: 'bar',
+      },
+    ];
+    const instance = mountWithIntl(<TableDimensionEditor {...props} />);
+    instance.find(EuiButtonGroup).prop('onChange')('center');
+    expect(setState).toHaveBeenCalledWith({
+      ...state,
+      columns: [
+        {
+          columnId: 'foo',
+          alignment: 'center',
+        },
+        {
+          columnId: 'bar',
+        },
+      ],
+    });
+  });
+});
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx
index 008b805bc8fed3..9c60cd47af3e34 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx
@@ -7,55 +7,121 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiSwitch, EuiFormRow } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiButtonGroup, htmlIdGenerator } from '@elastic/eui';
 import { VisualizationDimensionEditorProps } from '../../types';
 import { DatatableVisualizationState } from '../visualization';
 
+const idPrefix = htmlIdGenerator()();
+
 export function TableDimensionEditor(
   props: VisualizationDimensionEditorProps<DatatableVisualizationState>
 ) {
-  const { state, setState, accessor } = props;
-  const column = state.columns.find((c) => c.columnId === accessor);
+  const { state, setState, frame, accessor } = props;
+  const column = state.columns.find(({ columnId }) => accessor === columnId);
 
-  const visibleColumnsCount = state.columns.filter((c) => !c.hidden).length;
+  if (!column) return null;
 
-  if (!column) {
-    return null;
-  }
+  // either read config state or use same logic as chart itself
+  const currentAlignment =
+    column?.alignment ||
+    (frame.activeData &&
+    frame.activeData[state.layerId].columns.find((col) => col.id === accessor)?.meta.type ===
+      'number'
+      ? 'right'
+      : 'left');
+
+  const visibleColumnsCount = state.columns.filter((c) => !c.hidden).length;
 
   return (
-    <EuiFormRow
-      label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
-        defaultMessage: 'Column hidden in table',
-      })}
-      display="columnCompressedSwitch"
-    >
-      <EuiSwitch
-        compressed
-        label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
-          defaultMessage: 'Column hidden in table',
+    <>
+      <EuiFormRow
+        display="columnCompressed"
+        fullWidth
+        label={i18n.translate('xpack.lens.table.alignment.label', {
+          defaultMessage: 'Text alignment',
         })}
-        showLabel={false}
-        data-test-subj="lns-table-column-hidden"
-        checked={Boolean(column?.hidden)}
-        disabled={!column.hidden && visibleColumnsCount <= 1}
-        onChange={() => {
-          const newState = {
-            ...state,
-            columns: state.columns.map((currentColumn) => {
+      >
+        <EuiButtonGroup
+          isFullWidth
+          legend={i18n.translate('xpack.lens.table.alignment.label', {
+            defaultMessage: 'Text alignment',
+          })}
+          data-test-subj="lnsDatatable_alignment_groups"
+          name="alignment"
+          buttonSize="compressed"
+          options={[
+            {
+              id: `${idPrefix}left`,
+              label: i18n.translate('xpack.lens.xyChart.axisSide.left', {
+                defaultMessage: 'Left',
+              }),
+              'data-test-subj': 'lnsDatatable_alignment_groups_left',
+            },
+            {
+              id: `${idPrefix}center`,
+              label: i18n.translate('xpack.lens.table.alignment.center', {
+                defaultMessage: 'Center',
+              }),
+              'data-test-subj': 'lnsDatatable_alignment_groups_center',
+            },
+            {
+              id: `${idPrefix}right`,
+              label: i18n.translate('xpack.lens.table.alignment.right', {
+                defaultMessage: 'Right',
+              }),
+              'data-test-subj': 'lnsDatatable_alignment_groups_right',
+            },
+          ]}
+          idSelected={`${idPrefix}${currentAlignment}`}
+          onChange={(id) => {
+            const newMode = id.replace(idPrefix, '') as 'left' | 'right' | 'center';
+            const newColumns = state.columns.map((currentColumn) => {
               if (currentColumn.columnId === accessor) {
                 return {
                   ...currentColumn,
-                  hidden: !column.hidden,
+                  alignment: newMode,
                 };
               } else {
                 return currentColumn;
               }
-            }),
-          };
-          setState(newState);
-        }}
-      />
-    </EuiFormRow>
+            });
+            setState({ ...state, columns: newColumns });
+          }}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
+          defaultMessage: 'Column hidden in table',
+        })}
+        display="columnCompressedSwitch"
+      >
+        <EuiSwitch
+          compressed
+          label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
+            defaultMessage: 'Column hidden in table',
+          })}
+          showLabel={false}
+          data-test-subj="lns-table-column-hidden"
+          checked={Boolean(column?.hidden)}
+          disabled={!column.hidden && visibleColumnsCount <= 1}
+          onChange={() => {
+            const newState = {
+              ...state,
+              columns: state.columns.map((currentColumn) => {
+                if (currentColumn.columnId === accessor) {
+                  return {
+                    ...currentColumn,
+                    hidden: !column.hidden,
+                  };
+                } else {
+                  return currentColumn;
+                }
+              }),
+            };
+            setState(newState);
+          }}
+        />
+      </EuiFormRow>
+    </>
   );
 }
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.scss b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.scss
index 5e5db2c6458095..b99ffb6dce8101 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.scss
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.scss
@@ -1,3 +1,19 @@
 .lnsDataTableContainer {
   height: 100%;
 }
+
+.lnsTableCell {
+  @include euiTextTruncate;
+}
+
+.lnsTableCell--left {
+  text-align: left;
+}
+
+.lnsTableCell--right {
+  text-align: right;
+}
+
+.lnsTableCell--center {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx
index 588340fbe97fa9..22577e8ef5fd31 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx
@@ -12,7 +12,7 @@ import { EuiDataGrid } from '@elastic/eui';
 import { IAggType, IFieldFormat } from 'src/plugins/data/public';
 import { EmptyPlaceholder } from '../../shared_components';
 import { LensIconChartDatatable } from '../../assets/chart_datatable';
-import { DatatableComponent } from './table_basic';
+import { DataContext, DatatableComponent } from './table_basic';
 import { LensMultiTable } from '../../types';
 import { DatatableProps } from '../expression';
 
@@ -427,6 +427,39 @@ describe('DatatableComponent', () => {
     expect(wrapper.find(EuiDataGrid).prop('columns')!.length).toEqual(2);
   });
 
+  test('it adds alignment data to context', () => {
+    const { data, args } = sampleArgs();
+
+    const wrapper = shallow(
+      <DatatableComponent
+        data={data}
+        args={{
+          ...args,
+          columns: [
+            { columnId: 'a', alignment: 'center', type: 'lens_datatable_column' },
+            { columnId: 'b', type: 'lens_datatable_column' },
+            { columnId: 'c', type: 'lens_datatable_column' },
+          ],
+          sortingColumnId: 'b',
+          sortingDirection: 'desc',
+        }}
+        formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
+        dispatchEvent={onDispatchEvent}
+        getType={jest.fn()}
+        renderMode="display"
+      />
+    );
+
+    expect(wrapper.find(DataContext.Provider).prop('value').alignments).toEqual({
+      // set via args
+      a: 'center',
+      // default for date
+      b: 'left',
+      // default for number
+      c: 'right',
+    });
+  });
+
   test('it should refresh the table header when the datatable data changes', () => {
     const { data, args } = sampleArgs();
 
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 f685990f12dd26..e1687ba28f07bb 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
@@ -40,7 +40,7 @@ import {
   createGridSortingConfig,
 } from './table_actions';
 
-const DataContext = React.createContext<DataContextType>({});
+export const DataContext = React.createContext<DataContextType>({});
 
 const gridStyle: EuiDataGridStyle = {
   border: 'horizontal',
@@ -192,6 +192,21 @@ 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 {
+        const isNumeric =
+          firstLocalTable.columns.find((dataColumn) => dataColumn.id === column.columnId)?.meta
+            .type === 'number';
+        alignmentMap[column.columnId] = isNumeric ? 'right' : 'left';
+      }
+    });
+    return alignmentMap;
+  }, [firstLocalTable, columnConfig]);
+
   const trailingControlColumns: EuiDataGridControlColumn[] = useMemo(() => {
     if (!hasAtLeastOneRowClickAction || !onRowContextMenuClick) {
       return [];
@@ -259,6 +274,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
         value={{
           table: firstLocalTable,
           rowHasRowClickTriggerActions: props.rowHasRowClickTriggerActions,
+          alignments,
         }}
       >
         <EuiDataGrid
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/types.ts b/x-pack/plugins/lens/public/datatable_visualization/components/types.ts
index 8a280b3d15bca5..112a7775ae6b15 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/types.ts
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/types.ts
@@ -54,4 +54,5 @@ export interface DatatableRender {
 export interface DataContextType {
   table?: Datatable;
   rowHasRowClickTriggerActions?: boolean[];
+  alignments?: Record<string, 'left' | 'right' | 'center'>;
 }
diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
index 7ead7be67947c9..f6a38541cda271 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
@@ -138,6 +138,7 @@ export const datatableColumn: ExpressionFunctionDefinition<
   inputTypes: ['null'],
   args: {
     columnId: { types: ['string'], help: '' },
+    alignment: { types: ['string'], help: '' },
     hidden: { types: ['boolean'], help: '' },
     width: { types: ['number'], help: '' },
   },
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx
index ad5e1e552ccd2b..92136c557ad38d 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx
@@ -419,11 +419,13 @@ describe('Datatable Visualization', () => {
         columnId: ['c'],
         hidden: [],
         width: [],
+        alignment: [],
       });
       expect(columnArgs[1].arguments).toEqual({
         columnId: ['b'],
         hidden: [],
         width: [],
+        alignment: [],
       });
     });
 
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
index 47f8ce09aea68c..fc69c914deb680 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -23,6 +23,7 @@ export interface ColumnState {
   columnId: string;
   width?: number;
   hidden?: boolean;
+  alignment?: 'left' | 'right' | 'center';
 }
 
 export interface SortingState {
@@ -264,6 +265,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
                     columnId: [column.columnId],
                     hidden: typeof column.hidden === 'undefined' ? [] : [column.hidden],
                     width: typeof column.width === 'undefined' ? [] : [column.width],
+                    alignment: typeof column.alignment === 'undefined' ? [] : [column.alignment],
                   },
                 },
               ],