Merge pull request #601 from zilliztech/ui

ui-component: support column header formatter

client/src/components/grid/TableHead.tsx

@@ -83,10 +83,15 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
         )}
 
         {colDefinitions.map(headCell => {
+          // get cell style
           const cellStyle = headCell.getStyle
             ? headCell.getStyle(headCell)
             : {};
 
+          // get header formatter
+          const headerFormatter =
+            headCell.headerFormatter || (v => <>{v.label}</>);
+
           return (
             <TableCell
               key={headCell.id + headCell.label}
@@ -108,7 +113,7 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
                   onClick={createSortHandler(headCell.sortBy || headCell.id)}
                 >
                   <Typography variant="body1" className={classes.tableHeader}>
-                    {headCell.label}
+                    {headerFormatter(headCell)}
                   </Typography>
 
                   {orderBy === (headCell.sortBy || headCell.id) ? (
@@ -121,7 +126,7 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
                 </TableSortLabel>
               ) : (
                 <Typography variant="body1" className={classes.tableHeader}>
-                  {headCell.label}
+                  {headerFormatter(headCell)}
                 </Typography>
               )}
             </TableCell>

client/src/components/grid/Types.ts

@@ -117,7 +117,7 @@ export type ColDefinitionsType = {
   ) => void;
   getStyle?: (data: any) => {};
   formatter?: (data: any, cellData?: any, cellIndex?: number) => any;
-
+  headerFormatter?: (def: ColDefinitionsType) => React.ReactNode;
   onConnect?: (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     data: any