onRenderHeader & ariaLabel on IColumn

README.md

@@ -39,6 +39,7 @@ Updates include:
 >- "dropdownValues" prop on IColumnConfig can now be a function that returns IDropdownOption[]. It accepts an "item" parameter so tailor-made dropdown options for an item are possible based on any its other properties.
 >- "editableOnlyInPanel" prop on IColumnConfig allows the column to only be editable in the panel (i.e. when the "Edit Panel" is open) when the "editable" prop is "true". "editable", "editableOnlyInPanel", and not "editable" columns on the grid now have CSS classes of "editable", "editable-panel-only", and "non-editable" added to their TooltipHost class names, respectively. TooltipHost class name is "cell-value".
 >- "panelEditDisabledUntil" prop on IColumnConfig allows custom disabling of fields in the add/edit panels based on other values.
+>- "onRenderHeader" and "ariaLabel" now available for use from IColumns definitions.
 
 ### Bug Fixes
 

src/Examples/gridconsumer/gridconfig.tsx

@@ -8,6 +8,7 @@ import { EditControlType } from "../../libs/types/editcontroltype";
 import { CellHover } from "./hoverComponent";
 import { DataType } from "../../libs/types/datatype";
 import { IDetailsColumnStyles } from "office-ui-fabric-react";
+import { Icon, TooltipHost, mergeStyles } from '@fluentui/react';
 
 const headerStyle: Partial<IDetailsColumnStyles> = { cellTitle: { backgroundColor: "rgb(0, 120, 212)", color: "#fff" }, sortIcon: { color: '#fff' } };
 
@@ -69,7 +70,37 @@ export const GridColumnConfig: IColumnConfig[] =
             isResizable: true,
             includeColumnInExport: true,
             includeColumnInSearch: true,
-            applyColumnFilter: true
+            applyColumnFilter: true,
+            ariaLabel: 'Custom hover title',
+            headerClassName: mergeStyles({
+                '.ms-DetailsHeader-cellTitle,.ms-DetailsHeader-cellName': {
+                    width: '100%'
+                }
+            }),
+            onRenderHeader: () => {
+                return <div style={{ height: 42, lineHeight: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <div>
+                        <div style={{ marginRight: 5 }}>Name</div>
+                        <div style={{ marginTop: 2, fontSize: '.85em', fontWeight: 400 }}>test</div>
+                    </div>
+
+                    <TooltipHost content="This is custom tooltip content">
+                        <Icon iconName='Info' />
+                    </TooltipHost>
+                </div>
+            }
+            // onRenderHeader: () => {
+            //     return <div style={{ height: 42, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            //         <div>
+            //             <div style={{ marginRight: 5 }}>Name</div>
+            //             <div style={{ fontSize: '.85em', lineHeight: 1, fontWeight: 400, position: 'absolute', bottom: 2 }}>test</div>
+            //         </div>
+
+            //         <TooltipHost content="This is custom tooltip content">
+            //             <Icon iconName='Info' />
+            //         </TooltipHost>
+            //     </div>
+            // }
         },
         {
             key: 'age',

src/libs/editablegrid/editablegrid.tsx

@@ -1350,11 +1350,12 @@ const EditableGrid = (props: Props) => {
                 className: `${column.className ? column.className : ''}`,
                 headerClassName: `${colHeaderClassName} ${column.headerClassName}`,
                 styles: column.styles,
-                ariaLabel: column.text,
+                ariaLabel: column.ariaLabel ? column.ariaLabel : column.text,
                 fieldName: column.key,
                 isResizable: true,
                 minWidth: column.minWidth,
                 maxWidth: column.maxWidth,
+                onRenderHeader: column.onRenderHeader,
                 onColumnContextMenu: !column.disableSort && !(isGridInEdit || editMode) ? (col, ev) => onColumnContextMenu(col) : undefined,
                 onColumnClick: !(isGridInEdit || editMode) && (isDataTypeSupportedForFilter && column.applyColumnFilter && props.enableColumnFilters) ? (ev, col) => onColumnClick(ev, col, index) : undefined,
                 //data: item.dataType,