Table: Fixed header alignment (#22236)

packages/grafana-ui/src/components/Table/Table.tsx

 import React, { useMemo } from 'react';
-import { DataFrame } from '@grafana/data';
+import { DataFrame, Field } from '@grafana/data';
 import { useSortBy, useTable, useBlockLayout, Cell } from 'react-table';
 import { FixedSizeList } from 'react-window';
 import useMeasure from 'react-use/lib/useMeasure';
@@ -8,6 +8,8 @@ import { useTheme } from '../../themes';
 import { TableFilterActionCallback } from './types';
 import { getTableStyles } from './styles';
 import { TableCell } from './TableCell';
+import { Icon } from '../Icon/Icon';
+import { getTextAlign } from './utils';
 
 export interface Props {
   data: DataFrame;
@@ -56,7 +58,9 @@ export const Table = ({ data, height, onCellClick, width }: Props) => {
       <div>
         {headerGroups.map((headerGroup: any) => (
           <div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()} ref={ref}>
-            {headerGroup.headers.map((column: any) => renderHeaderCell(column, tableStyles.headerCell))}
+            {headerGroup.headers.map((column: any) =>
+              renderHeaderCell(column, tableStyles.headerCell, data.fields[column.index])
+            )}
           </div>
         ))}
       </div>
@@ -72,17 +76,18 @@ export const Table = ({ data, height, onCellClick, width }: Props) => {
   );
 };
 
-function renderHeaderCell(column: any, className: string) {
+function renderHeaderCell(column: any, className: string, field: Field) {
   const headerProps = column.getHeaderProps(column.getSortByToggleProps());
+  const fieldTextAlign = getTextAlign(field);
 
-  if (column.textAlign) {
-    headerProps.style.textAlign = column.textAlign;
+  if (fieldTextAlign) {
+    headerProps.style.textAlign = fieldTextAlign;
   }
 
   return (
     <div className={className} {...headerProps}>
       {column.render('Header')}
-      <span>{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}</span>
+      {column.isSorted && (column.isSortedDesc ? <Icon name="caret-down" /> : <Icon name="caret-up" />)}
     </div>
   );
 }

packages/grafana-ui/src/components/Table/TableCell.tsx

@@ -17,6 +17,7 @@ export const TableCell: FC<Props> = ({ cell, field, tableStyles, onCellClick })
   const cellProps = cell.getCellProps();
 
   let onClick: ((event: React.SyntheticEvent) => void) | undefined = undefined;
+
   if (filterable && onCellClick) {
     if (cellProps.style) {
       cellProps.style.cursor = 'pointer';
@@ -24,6 +25,7 @@ export const TableCell: FC<Props> = ({ cell, field, tableStyles, onCellClick })
 
     onClick = () => onCellClick(cell.column.Header as string, cell.value);
   }
+
   const fieldTextAlign = getTextAlign(field);
   if (fieldTextAlign && cellProps.style) {
     cellProps.style.textAlign = fieldTextAlign;