[Lens] Table headers are aligned the same as cells (#101875)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jun 15, 2021 · 37728f5 · 37728f5
1 parent 65fec6b
commit 37728f5
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 39 deletions.
diff --git a/...ns/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap b/...ns/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap
diff --git 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<string, 'left' | 'right' | 'center'>
 ) => {
   const columnsReverseLookup = table.columns.reduce<
     Record<string, { name: string; index: number; meta?: DatatableColumnMeta }>
@@ -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: <div className={alignmentClassName}>{name}</div>,
       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
@@ -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<string, boolean> = useMemo(() => {
     const numericMap: Record<string, boolean> = {};
     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 [];