ReactTable: adds alignment options (#23389)

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}>

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',