Fix #3368: Column add headerTooltip and headerTooltipOptions (#3369)

api-generator/components/column.js

@@ -149,6 +149,18 @@ const ColumnProps = [
         default: 'null',
         description: 'Style class of the header.'
     },
+    {
+        name: 'headerTooltip',
+        type: 'any',
+        default: 'null',
+        description: 'Content of the header tooltip.'
+    },
+    {
+        name: 'headerTooltipOptions',
+        type: 'object',
+        default: 'null',
+        description: 'Configuration of the header tooltip, refer to the tooltip documentation for more information.'
+    },
     {
         name: 'bodyStyle',
         type: 'object',

components/doc/datatable/index.js

@@ -1373,6 +1373,18 @@ export const DataTableDemo = () => {
                                     <td>null</td>
                                     <td>Style class of the header.</td>
                                 </tr>
+                                <tr>
+                                    <td>headerTooltip</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>Content of the header tooltip.</td>
+                                </tr>
+                                <tr>
+                                    <td>headerTooltipOptions</td>
+                                    <td>object</td>
+                                    <td>null</td>
+                                    <td>Configuration of the header tooltip, refer to the tooltip documentation for more information.</td>
+                                </tr>
                                 <tr>
                                     <td>bodyStyle</td>
                                     <td>object</td>

components/lib/column/Column.js

@@ -3,78 +3,80 @@ export const Column = () => {};
 Column.displayName = 'Column';
 Column.defaultProps = {
     __TYPE: 'Column',
-    columnKey: null,
-    field: null,
-    sortField: null,
-    filterField: null,
-    exportField: null,
-    header: null,
+    align: null,
+    alignFrozen: 'left',
+    alignHeader: null,
     body: null,
-    footer: null,
-    sortable: false,
-    sortableDisabled: false,
-    sortFunction: null,
+    bodyClassName: null,
+    bodyStyle: null,
+    cellEditValidator: null,
+    cellEditValidatorEvent: 'click',
+    className: null,
+    colSpan: null,
+    columnKey: null,
     dataType: 'text',
+    editor: null,
+    excludeGlobalFilter: false,
+    expander: false,
+    exportField: null,
+    exportable: true,
+    field: null,
     filter: false,
-    filterMatchMode: null,
-    filterPlaceholder: null,
-    filterType: 'text',
-    filterMaxLength: null,
+    filterApply: null,
+    filterClear: null,
     filterElement: null,
+    filterField: null,
+    filterFooter: null,
     filterFunction: null,
-    filterHeaderStyle: null,
+    filterHeader: null,
     filterHeaderClassName: null,
-    showFilterMenu: true,
-    showFilterOperator: true,
-    showClearButton: true,
-    showApplyButton: true,
-    showFilterMatchModes: true,
-    showFilterMenuOptions: true,
-    showAddButton: true,
+    filterHeaderStyle: null,
+    filterMatchMode: null,
     filterMatchModeOptions: null,
-    maxConstraints: 2,
+    filterMaxLength: null,
     filterMenuClassName: null,
     filterMenuStyle: null,
-    align: null,
-    alignHeader: null,
-    alignFrozen: 'left',
-    hidden: false,
-    onFilterClear: null,
-    onFilterApplyClick: null,
-    onFilterMatchModeChange: null,
-    onFilterOperatorChange: null,
-    onFilterConstraintAdd: null,
-    onFilterConstraintRemove: null,
-    filterClear: null,
-    filterApply: null,
-    filterHeader: null,
-    filterFooter: null,
-    style: null,
-    className: null,
-    headerStyle: null,
-    headerClassName: null,
-    bodyStyle: null,
-    bodyClassName: null,
-    footerStyle: null,
+    filterPlaceholder: null,
+    filterType: 'text',
+    footer: null,
     footerClassName: null,
-    expander: false,
+    footerStyle: null,
     frozen: false,
-    selectionMode: null,
-    colSpan: null,
-    rowSpan: null,
-    editor: null,
-    cellEditValidator: null,
-    cellEditValidatorEvent: 'click',
+    header: null,
+    headerClassName: null,
+    headerStyle: null,
+    headerTooltip: null,
+    headerTooltipOptions: null,
+    hidden: false,
+    maxConstraints: 2,
     onBeforeCellEditHide: null,
     onBeforeCellEditShow: null,
-    onCellEditInit: null,
-    onCellEditComplete: null,
     onCellEditCancel: null,
-    excludeGlobalFilter: false,
+    onCellEditComplete: null,
+    onCellEditInit: null,
+    onFilterApplyClick: null,
+    onFilterClear: null,
+    onFilterConstraintAdd: null,
+    onFilterConstraintRemove: null,
+    onFilterMatchModeChange: null,
+    onFilterOperatorChange: null,
+    reorderable: true,
+    resizeable: true,
+    rowEditor: false,
     rowReorder: false,
     rowReorderIcon: 'pi pi-bars',
-    rowEditor: false,
-    exportable: true,
-    reorderable: true,
-    resizeable: true
+    rowSpan: null,
+    selectionMode: null,
+    showAddButton: true,
+    showApplyButton: true,
+    showClearButton: true,
+    showFilterMatchModes: true,
+    showFilterMenu: true,
+    showFilterMenuOptions: true,
+    showFilterOperator: true,
+    sortField: null,
+    sortFunction: null,
+    sortable: false,
+    sortableDisabled: false,
+    style: null
 };

components/lib/column/column.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import TooltipOptions from '../tooltip/tooltipoptions';
 
 type ColumnHeaderType = React.ReactNode | ((options: ColumnHeaderOptions) => React.ReactNode);
 
@@ -179,80 +180,82 @@ interface ColumnFilterMatchModeOptions {
 }
 
 export interface ColumnProps {
-    columnKey?: string;
-    field?: string;
-    sortField?: string;
-    filterField?: string;
-    header?: ColumnHeaderType;
+    align?: ColumnAlignType;
+    alignFrozen?: ColumnAlignFrozenType;
+    alignHeader?: ColumnAlignType;
     body?: ColumnBodyType;
-    footer?: ColumnFooterType;
-    sortable?: boolean;
-    sortableDisabled?: boolean;
+    bodyClassName?: string;
+    bodyStyle?: object;
+    cellEditValidatorEvent?: string;
+    children?: React.ReactNode;
+    className?: string;
+    colSpan?: number;
+    columnKey?: string;
     dataType?: ColumnDataType;
+    editor?: ColumnEditorType;
+    excludeGlobalFilter?: boolean;
+    expander?: boolean;
+    exportable?: boolean;
+    field?: string;
     filter?: boolean;
-    filterMatchMode?: ColumnFilterMatchModeType;
-    filterPlaceholder?: string;
-    filterType?: string;
-    filterMaxLength?: number;
+    filterApply?: ColumnFilterApplyType;
+    filterClear?: ColumnFilterClearType;
     filterElement?: ColumnFilterElementType;
-    filterHeaderStyle?: object;
+    filterField?: string;
+    filterFooter?: ColumnFilterFooterType;
+    filterHeader?: ColumnFilterHeaderType;
     filterHeaderClassName?: string;
-    showFilterMenu?: boolean;
-    showFilterOperator?: boolean;
-    showClearButton?: boolean;
-    showApplyButton?: boolean;
-    showFilterMatchModes?: boolean;
-    showFilterMenuOptions?: boolean;
-    showAddButton?: boolean;
+    filterHeaderStyle?: object;
+    filterMatchMode?: ColumnFilterMatchModeType;
     filterMatchModeOptions?: ColumnFilterMatchModeOptions[];
-    maxConstraints?: number;
+    filterMaxLength?: number;
     filterMenuClassName?: string;
     filterMenuStyle?: object;
-    align?: ColumnAlignType;
-    alignHeader?: ColumnAlignType;
-    alignFrozen?: ColumnAlignFrozenType;
-    hidden?: boolean;
-    onFilterClear?(): void;
-    onFilterApplyClick?(e: ColumnFilterApplyClickParams): void;
-    onFilterMatchModeChange?(e: ColumnFilterMatchModeChangeParams): void;
-    onFilterOperatorChange?(e: ColumnFilterOperatorChangeParams): void;
-    onFilterConstraintAdd?(e: ColumnFilterConstraintAddParams): void;
-    onFilterConstraintRemove?(e: ColumnFilterConstraintRemoveParams): void;
-    filterClear?: ColumnFilterClearType;
-    filterApply?: ColumnFilterApplyType;
-    filterHeader?: ColumnFilterHeaderType;
-    filterFooter?: ColumnFilterFooterType;
-    style?: object;
-    className?: string;
-    headerStyle?: object;
-    headerClassName?: string;
-    bodyStyle?: object;
-    bodyClassName?: string;
-    footerStyle?: object;
+    filterPlaceholder?: string;
+    filterType?: string;
+    footer?: ColumnFooterType;
     footerClassName?: string;
-    expander?: boolean;
+    footerStyle?: object;
     frozen?: boolean;
-    selectionMode?: ColumnSelectionModeType;
-    colSpan?: number;
-    rowSpan?: number;
-    rowReorder?: boolean;
-    rowReorderIcon?: string;
-    cellEditValidatorEvent?: string;
-    rowEditor?: boolean;
-    exportable?: boolean;
+    header?: ColumnHeaderType;
+    headerClassName?: string;
+    headerStyle?: object;
+    headerTooltip?: string;
+    headerTooltipOptions?: TooltipOptions;
+    hidden?: boolean;
+    maxConstraints?: number;
     reorderable?: boolean;
     resizeable?: boolean;
-    excludeGlobalFilter?: boolean;
-    onCellEditInit?(e: ColumnEventParams): void;
-    onCellEditComplete?(e: ColumnEventParams): void;
-    onCellEditCancel?(e: ColumnEventParams): void;
-    sortFunction?(e: ColumnSortParams): void;
-    filterFunction?(value: any, filter: any, filterLocale: string, params: ColumnFilterParams): void;
-    editor?: ColumnEditorType;
+    rowEditor?: boolean;
+    rowReorder?: boolean;
+    rowReorderIcon?: string;
+    rowSpan?: number;
+    selectionMode?: ColumnSelectionModeType;
+    showAddButton?: boolean;
+    showApplyButton?: boolean;
+    showClearButton?: boolean;
+    showFilterMatchModes?: boolean;
+    showFilterMenu?: boolean;
+    showFilterMenuOptions?: boolean;
+    showFilterOperator?: boolean;
+    sortField?: string;
+    sortable?: boolean;
+    sortableDisabled?: boolean;
+    style?: object;
     cellEditValidator?(e: ColumnEventParams): boolean;
+    filterFunction?(value: any, filter: any, filterLocale: string, params: ColumnFilterParams): void;
     onBeforeCellEditHide?(e: ColumnEventParams): void;
     onBeforeCellEditShow?(e: ColumnEventParams): void;
-    children?: React.ReactNode;
+    onCellEditCancel?(e: ColumnEventParams): void;
+    onCellEditComplete?(e: ColumnEventParams): void;
+    onCellEditInit?(e: ColumnEventParams): void;
+    onFilterApplyClick?(e: ColumnFilterApplyClickParams): void;
+    onFilterClear?(): void;
+    onFilterConstraintAdd?(e: ColumnFilterConstraintAddParams): void;
+    onFilterConstraintRemove?(e: ColumnFilterConstraintRemoveParams): void;
+    onFilterMatchModeChange?(e: ColumnFilterMatchModeChangeParams): void;
+    onFilterOperatorChange?(e: ColumnFilterOperatorChangeParams): void;
+    sortFunction?(e: ColumnSortParams): void;
 }
 
 export declare class Column extends React.Component<ColumnProps, any> {}

components/lib/datatable/HeaderCell.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { usePrevious } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 import { ColumnFilter } from './ColumnFilter';
 import { HeaderCheckbox } from './HeaderCheckbox';
@@ -287,31 +288,37 @@ export const HeaderCell = React.memo((props) => {
         const colSpan = getColumnProp('colSpan');
         const rowSpan = getColumnProp('rowSpan');
         const ariaSort = getAriaSort(sortMeta);
+        const headerTooltip = getColumnProp('headerTooltip');
+        const hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
+        const headerTooltipOptions = getColumnProp('headerTooltipOptions');
 
         const resizer = createResizer();
         const header = createHeader(sortMeta);
 
         return (
-            <th
-                ref={elementRef}
-                style={style}
-                className={className}
-                tabIndex={tabIndex}
-                role="columnheader"
-                onClick={onClick}
-                onKeyDown={onKeyDown}
-                onMouseDown={onMouseDown}
-                onDragStart={onDragStart}
-                onDragOver={onDragOver}
-                onDragLeave={onDragLeave}
-                onDrop={onDrop}
-                colSpan={colSpan}
-                rowSpan={rowSpan}
-                aria-sort={ariaSort}
-            >
-                {resizer}
-                {header}
-            </th>
+            <>
+                <th
+                    ref={elementRef}
+                    style={style}
+                    className={className}
+                    tabIndex={tabIndex}
+                    role="columnheader"
+                    onClick={onClick}
+                    onKeyDown={onKeyDown}
+                    onMouseDown={onMouseDown}
+                    onDragStart={onDragStart}
+                    onDragOver={onDragOver}
+                    onDragLeave={onDragLeave}
+                    onDrop={onDrop}
+                    colSpan={colSpan}
+                    rowSpan={rowSpan}
+                    aria-sort={ariaSort}
+                >
+                    {resizer}
+                    {header}
+                </th>
+                {hasTooltip && <Tooltip target={elementRef} content={headerTooltip} {...headerTooltipOptions} />}
+            </>
         );
     };