+ expect(infoIcons).toHaveLength(1)
+
+ const headerKey1 = headers[0].getAttribute('data-item-key')
+ if (headerKey1 === 'colname1') {
+ expect(headers[0]).toContainElement(infoIcons[0])
+ } else {
+ expect(headers[0]).not.toContainElement(infoIcons[0])
+ }
+ const headerKey2 = headers[1].getAttribute('data-item-key')
+ if (headerKey2 === 'colname1') {
+ expect(headers[1]).toContainElement(infoIcons[0])
+ } else {
+ expect(headers[1]).not.toContainElement(infoIcons[0])
+ }
+ })
+ })
+})
diff --git a/ui/src/table.tsx b/ui/src/table.tsx
index 04d343f820..c43f0d5ffd 100644
--- a/ui/src/table.tsx
+++ b/ui/src/table.tsx
@@ -76,6 +76,8 @@ interface TableColumn {
filters?: S[]
/** Defines how to align values in a column. */
align?: 'left' | 'center' | 'right'
+ /** Tooltip text. */
+ tooltip?: S
}
/** Create a table row. */
@@ -167,6 +169,7 @@ type WaveColumn = Fluent.IColumn & {
cellOverflow?: 'tooltip' | 'wrap'
filters?: S[]
align?: 'left' | 'center' | 'right'
+ tooltip?: S
}
type DataTable = {
@@ -434,18 +437,55 @@ const
isResizable: true,
isMultiline: c.cell_overflow === 'wrap',
filters: c.filterable ? c.filters : undefined,
+ tooltip: c.tooltip ? c.tooltip : undefined,
}
}, [onColumnClick, onColumnContextMenu, selectedFilters, sortCols]),
[columns, setColumns] = React.useState(m.columns.map(tableToWaveColumn)),
primaryColumnKey = m.columns.find(c => c.link)?.name || (m.columns[0].link === false ? undefined : m.columns[0].name),
onRenderDetailsHeader = React.useCallback((props?: Fluent.IDetailsHeaderProps) => {
if (!props) return
-
+ const renderColumnHeaderTooltip = (tooltipHostProps?: Fluent.IDetailsColumnRenderTooltipProps) => {
+ const column = props.columns.find(col => col.key === tooltipHostProps?.column?.key) as WaveColumn
+ if (!tooltipHostProps?.children) return null
+ return (
+
+ {tooltipHostProps.children}
+ {
+ column?.tooltip && (
+
+
+
+ )
+ }
+
+ )
+ }
return (
group.isCollapsed)}
+ onRenderColumnHeaderTooltip={renderColumnHeaderTooltip}
styles={{
...props.styles,
root: {
@@ -454,14 +494,19 @@ const
lineHeight: '48px',
background: cssVar('$neutralLight'),
borderBottom: 'none',
+ selectors: {
+ '.ms-DetailsHeader-cellTitle': {
+ paddingLeft: '0px',
+ },
+ }
},
cellSizerEnd: {
marginLeft: -8,
},
cellIsGroupExpander: {
// HACK: fixed size of expand/collapse button in column header
- height: 48
- }
+ height: 48,
+ },
}}
/>