From 3c61627ab744703220eb926eaffba02bee700e75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Tue, 7 Apr 2020 14:02:18 +0200
Subject: [PATCH] ReactTable: adds alignment options (#23389)

---
 packages/grafana-ui/src/components/Table/Table.tsx |  6 +-----
 public/app/plugins/panel/table2/module.tsx         | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index 9cfc18ce7c9..2f8fe133d16 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -96,11 +96,7 @@ export const Table: FC<Props> = memo(({ data, height, onCellClick, width, column
 
 function renderHeaderCell(column: any, className: string, field?: Field) {
   const headerProps = column.getHeaderProps(column.getSortByToggleProps());
-  const fieldTextAlign = getTextAlign(field);
-
-  if (fieldTextAlign) {
-    headerProps.style.textAlign = fieldTextAlign;
-  }
+  headerProps.style.textAlign = getTextAlign(field);
 
   return (
     <div className={className} {...headerProps}>
diff --git a/public/app/plugins/panel/table2/module.tsx b/public/app/plugins/panel/table2/module.tsx
index 1450105b530..db413959907 100644
--- a/public/app/plugins/panel/table2/module.tsx
+++ b/public/app/plugins/panel/table2/module.tsx
@@ -17,6 +17,20 @@ export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
             max: 300,
           },
         })
+        .addRadio({
+          path: 'align',
+          name: 'Column alignment',
+          description: 'column alignment (for table)',
+          settings: {
+            options: [
+              { label: 'auto', value: null },
+              { label: 'left', value: 'left' },
+              { label: 'center', value: 'center' },
+              { label: 'right', value: 'right' },
+            ],
+          },
+          defaultValue: null,
+        })
         .addSelect({
           path: 'displayMode',
           name: 'Cell display mode',