diff --git a/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx index 4d3a02921e..f00f70808e 100644 --- a/packages/clay-core/src/table/Cell.tsx +++ b/packages/clay-core/src/table/Cell.tsx @@ -8,6 +8,7 @@ import Icon from '@clayui/icon'; import Layout from '@clayui/layout'; import LoadingIndicator from '@clayui/loading-indicator'; import {Keys} from '@clayui/shared'; +import {ClayTooltipProvider} from '@clayui/tooltip'; import classNames from 'classnames'; import React, {useCallback, useState} from 'react'; @@ -50,6 +51,14 @@ type Props = { */ keyValue?: React.Key; + /** + * Messages for tooltip. + */ + tooltipMessage?: { + expandRow?: string; + orderAscendant?: string; + }; + /** * Whether the column allows sortable. Only available in the header column. */ @@ -115,6 +124,7 @@ export const Cell = React.forwardRef( sortable, textAlign, textValue, + tooltipMessage, truncate, width = 'auto', wrap = true, @@ -122,6 +132,10 @@ export const Cell = React.forwardRef( }, ref ) { + tooltipMessage = { + ...(tooltipMessage ?? {}), + }; + const { columnsVisibility, expandedKeys, @@ -254,21 +268,25 @@ export const Cell = React.forwardRef( - + + + ) : truncate ? ( @@ -285,29 +303,32 @@ export const Cell = React.forwardRef( > {isExpandable && ( - + + + )} diff --git a/packages/clay-core/src/table/Head.tsx b/packages/clay-core/src/table/Head.tsx index c10b40d579..d6d6000794 100644 --- a/packages/clay-core/src/table/Head.tsx +++ b/packages/clay-core/src/table/Head.tsx @@ -7,6 +7,7 @@ import Button from '@clayui/button'; import {ClayToggle as Toggle} from '@clayui/form'; import Icon from '@clayui/icon'; import Layout from '@clayui/layout'; +import {ClayTooltipProvider} from '@clayui/tooltip'; import React, {useMemo} from 'react'; import {ChildrenFunction, Collection, useCollection} from '../collection'; @@ -46,12 +47,23 @@ type Props = { * Property to render content with dynamic data. */ items?: Array; + + /** + * Messages for tooltip. + */ + tooltipMessage?: { + tableActions?: string; + }; } & React.TableHTMLAttributes; function HeadInner>( - {children, items, ...otherProps}: Props, + {children, items, tooltipMessage, ...otherProps}: Props, ref: React.Ref ) { + tooltipMessage = { + ...(tooltipMessage ?? {}), + }; + const { alwaysVisibleColumns, columnsVisibility, @@ -110,16 +122,25 @@ function HeadInner>( minWidth: '210px', }} trigger={ - +
+ + + +
} > {(item) =>