From abd630d5dcfa5def1b48fb1fa90e76749f75e3ec Mon Sep 17 00:00:00 2001
From: tandrasi <72114492+tandrasi@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:48:04 +1000
Subject: [PATCH] onRenderHeader & ariaLabel on IColumn

---
 README.md                                |  1 +
 src/Examples/gridconsumer/gridconfig.tsx | 33 +++++++++++++++++++++++-
 src/libs/editablegrid/editablegrid.tsx   |  3 ++-
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6c82cb55..99a3e364 100644
--- a/README.md
+++ b/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
 
diff --git a/src/Examples/gridconsumer/gridconfig.tsx b/src/Examples/gridconsumer/gridconfig.tsx
index 0f6c6ce4..603ff760 100644
--- a/src/Examples/gridconsumer/gridconfig.tsx
+++ b/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',
diff --git a/src/libs/editablegrid/editablegrid.tsx b/src/libs/editablegrid/editablegrid.tsx
index af46ed1e..c7aa9366 100644
--- a/src/libs/editablegrid/editablegrid.tsx
+++ b/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,