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 a4be46f61990b6..9ad39e1561e97c 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
@@ -126,7 +126,11 @@ exports[`DatatableComponent it renders actions column when there are row actions
},
},
"cellActions": undefined,
- "display": "a",
+ "display":
+ a
+
,
"displayAsText": "a",
"id": "a",
},
@@ -163,7 +167,11 @@ exports[`DatatableComponent it renders actions column when there are row actions
},
},
"cellActions": undefined,
- "display": "b",
+ "display":
+ b
+
,
"displayAsText": "b",
"id": "b",
},
@@ -200,7 +208,11 @@ exports[`DatatableComponent it renders actions column when there are row actions
},
},
"cellActions": undefined,
- "display": "c",
+ "display":
+ c
+
,
"displayAsText": "c",
"id": "c",
},
@@ -360,7 +372,11 @@ exports[`DatatableComponent it renders the title and value 1`] = `
},
},
"cellActions": undefined,
- "display": "a",
+ "display":
+ a
+
,
"displayAsText": "a",
"id": "a",
},
@@ -397,7 +413,11 @@ exports[`DatatableComponent it renders the title and value 1`] = `
},
},
"cellActions": undefined,
- "display": "b",
+ "display":
+ b
+
,
"displayAsText": "b",
"id": "b",
},
@@ -434,7 +454,11 @@ exports[`DatatableComponent it renders the title and value 1`] = `
},
},
"cellActions": undefined,
- "display": "c",
+ "display":
+ c
+
,
"displayAsText": "c",
"id": "c",
},
@@ -566,7 +590,11 @@ exports[`DatatableComponent it should not render actions on header when it is in
"showSortDesc": false,
},
"cellActions": undefined,
- "display": "a",
+ "display":
+ a
+
,
"displayAsText": "a",
"id": "a",
},
@@ -580,7 +608,11 @@ exports[`DatatableComponent it should not render actions on header when it is in
"showSortDesc": false,
},
"cellActions": undefined,
- "display": "b",
+ "display":
+ b
+
,
"displayAsText": "b",
"id": "b",
},
@@ -594,7 +626,11 @@ exports[`DatatableComponent it should not render actions on header when it is in
"showSortDesc": false,
},
"cellActions": undefined,
- "display": "c",
+ "display":
+ c
+
,
"displayAsText": "c",
"id": "c",
},
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx
index 5c53d40f999b77..27c2db16dbd323 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx
@@ -35,7 +35,8 @@ export const createGridColumns = (
visibleColumns: string[],
formatFactory: FormatFactory,
onColumnResize: (eventData: { columnId: string; width: number | undefined }) => void,
- onColumnHide: (eventData: { columnId: string }) => void
+ onColumnHide: (eventData: { columnId: string }) => void,
+ alignments: Record
) => {
const columnsReverseLookup = table.columns.reduce<
Record
@@ -200,11 +201,13 @@ export const createGridColumns = (
});
}
}
+ const currentAlignment = alignments && alignments[field];
+ const alignmentClassName = `lnsTableCell--${currentAlignment}`;
const columnDefinition: EuiDataGridColumn = {
id: field,
cellActions,
- display: name,
+ display: {name}
,
displayAsText: name,
actions: {
showHide: false,
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 cd990149fdaf55..2a6b4879854d7a 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
@@ -180,34 +180,6 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
[onEditAction, setColumnConfig, columnConfig]
);
- const columns: EuiDataGridColumn[] = useMemo(
- () =>
- createGridColumns(
- bucketColumns,
- firstLocalTable,
- handleFilterClick,
- handleTransposedColumnClick,
- isReadOnlySorted,
- columnConfig,
- visibleColumns,
- formatFactory,
- onColumnResize,
- onColumnHide
- ),
- [
- bucketColumns,
- firstLocalTable,
- handleFilterClick,
- handleTransposedColumnClick,
- isReadOnlySorted,
- columnConfig,
- visibleColumns,
- formatFactory,
- onColumnResize,
- onColumnHide,
- ]
- );
-
const isNumericMap: Record = useMemo(() => {
const numericMap: Record = {};
for (const column of firstLocalTable.columns) {
@@ -237,6 +209,36 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
);
}, [firstTable, isNumericMap, columnConfig]);
+ const columns: EuiDataGridColumn[] = useMemo(
+ () =>
+ createGridColumns(
+ bucketColumns,
+ firstLocalTable,
+ handleFilterClick,
+ handleTransposedColumnClick,
+ isReadOnlySorted,
+ columnConfig,
+ visibleColumns,
+ formatFactory,
+ onColumnResize,
+ onColumnHide,
+ alignments
+ ),
+ [
+ bucketColumns,
+ firstLocalTable,
+ handleFilterClick,
+ handleTransposedColumnClick,
+ isReadOnlySorted,
+ columnConfig,
+ visibleColumns,
+ formatFactory,
+ onColumnResize,
+ onColumnHide,
+ alignments,
+ ]
+ );
+
const trailingControlColumns: EuiDataGridControlColumn[] = useMemo(() => {
if (!hasAtLeastOneRowClickAction || !onRowContextMenuClick) {
return [];