diff --git a/api-generator/components/column.js b/api-generator/components/column.js
index a76a281459..9099a44fdd 100644
--- a/api-generator/components/column.js
+++ b/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',
diff --git a/components/doc/datatable/index.js b/components/doc/datatable/index.js
index 2d5588944f..5ae7c4cb38 100644
--- a/components/doc/datatable/index.js
+++ b/components/doc/datatable/index.js
@@ -1373,6 +1373,18 @@ export const DataTableDemo = () => {
null |
Style class of the header. |
+
+ headerTooltip |
+ any |
+ null |
+ Content of the header tooltip. |
+
+
+ headerTooltipOptions |
+ object |
+ null |
+ Configuration of the header tooltip, refer to the tooltip documentation for more information. |
+
bodyStyle |
object |
diff --git a/components/lib/column/Column.js b/components/lib/column/Column.js
index f15c38b12b..b26d59ff01 100644
--- a/components/lib/column/Column.js
+++ b/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
};
diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
index 9ee7da8934..e00e544498 100644
--- a/components/lib/column/column.d.ts
+++ b/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 {}
diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js
index 1460d8d8be..669912e4f9 100644
--- a/components/lib/datatable/HeaderCell.js
+++ b/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 (
-
- {resizer}
- {header}
- |
+ <>
+
+ {resizer}
+ {header}
+ |
+ {hasTooltip && }
+ >
);
};
diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js
index 480ad29ae9..26bf7448cd 100644
--- a/components/lib/treetable/TreeTableHeader.js
+++ b/components/lib/treetable/TreeTableHeader.js
@@ -1,6 +1,7 @@
import * as React from 'react';
import { InputText } from '../inputtext/InputText';
-import { classNames, DomHandler } from '../utils/Utils';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
export const TreeTableHeader = React.memo((props) => {
const filterTimeout = React.useRef(null);
@@ -202,6 +203,7 @@ export const TreeTableHeader = React.memo((props) => {
);
} else {
+ const headerCellRef = React.createRef(null);
const sortMetaDataIndex = getMultiSortMetaDataIndex(column);
const multiSortMetaData = sortMetaDataIndex !== -1 ? props.multiSortMeta[sortMetaDataIndex] : null;
const singleSorted = column.props.field === props.sortField;
@@ -222,31 +224,38 @@ export const TreeTableHeader = React.memo((props) => {
'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable')
});
+ const headerTooltip = column.props.headerTooltip;
+ const hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
+
const resizer = createResizer(column);
return (
- onHeaderClick(e, column)}
- onMouseDown={(e) => onHeaderMouseDown(e, column)}
- onKeyDown={(e) => onHeaderKeyDown(e, column)}
- rowSpan={column.props.rowSpan}
- colSpan={column.props.colSpan}
- aria-sort={ariaSortData}
- onDragStart={(e) => onDragStart(e, column)}
- onDragOver={(e) => onDragOver(e, column)}
- onDragLeave={(e) => onDragLeave(e, column)}
- onDrop={(e) => onDrop(e, column)}
- >
- {resizer}
- {column.props.header}
- {sortIconElement}
- {sortBadge}
- {filterElement}
- |
+ <>
+ onHeaderClick(e, column)}
+ onMouseDown={(e) => onHeaderMouseDown(e, column)}
+ onKeyDown={(e) => onHeaderKeyDown(e, column)}
+ rowSpan={column.props.rowSpan}
+ colSpan={column.props.colSpan}
+ aria-sort={ariaSortData}
+ onDragStart={(e) => onDragStart(e, column)}
+ onDragOver={(e) => onDragOver(e, column)}
+ onDragLeave={(e) => onDragLeave(e, column)}
+ onDrop={(e) => onDrop(e, column)}
+ >
+ {resizer}
+ {column.props.header}
+ {sortIconElement}
+ {sortBadge}
+ {filterElement}
+ |
+ {hasTooltip && }
+ >
);
}
};