feat(table): add tooltip to table header (#37179)

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -810,6 +810,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         isMetric,
         isPercentMetric,
         config = {},
+        description,
       } = column;
       const label = config.customColumnName || originalLabel;
       let displayLabel = label;
@@ -1094,7 +1095,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         Header: ({ column: col, onClick, style, onDragStart, onDrop }) => (
           <th
             id={`header-${headerId}`}
-            title={t('Shift + Click to sort by multiple columns')}
+            title={
+              description || t('Shift + Click to sort by multiple columns')
+            }
             className={[className, col.isSorted ? 'is-sorted' : ''].join(' ')}
             style={{
               ...sharedStyle,

superset-frontend/plugins/plugin-chart-table/src/transformProps.ts

@@ -213,6 +213,7 @@ const processColumns = memoizeOne(function processColumns(
       percent_metrics: percentMetrics_,
       column_config: columnConfig = {},
     },
+    rawDatasource,
     queriesData,
   } = props;
   const granularity = extractTimegrain(props.rawFormData);
@@ -257,6 +258,12 @@ const processColumns = memoizeOne(function processColumns(
         ? config.currencyFormat
         : savedCurrency;
 
+      const description =
+        rawDatasource.columns?.find((item: any) => item.column_name === key)
+          ?.description ??
+        rawDatasource.metrics?.find((item: any) => item.metric_name === key)
+          ?.description;
+
       let formatter;
 
       if (isTime || config.d3TimeFormat) {
@@ -318,6 +325,7 @@ const processColumns = memoizeOne(function processColumns(
         isPercentMetric,
         formatter,
         config,
+        description,
         currencyCodeColumn,
       };
     });

superset-frontend/plugins/plugin-chart-table/src/types.ts

@@ -72,6 +72,7 @@ export interface DataColumnMeta {
   isNumeric?: boolean;
   config?: TableColumnConfig;
   isChildColumn?: boolean;
+  description?: string;
   currencyCodeColumn?: string;
 }