From a7475b6787931ea34362f17f12c9613f8e388a6c Mon Sep 17 00:00:00 2001 From: Paul Sterpu Date: Wed, 22 Oct 2025 17:24:58 +0300 Subject: [PATCH 1/2] feat: optional tooltip helper for table column headers Signed-off-by: Paul Sterpu --- .../src/components/table/components/table.tsx | 3 +- .../table/stories/table.stories.tsx | 3 ++ .../src/components/table/types/index.ts | 5 ++ .../src/components/table/utils/helpers.tsx | 51 +++++++++++++++++++ 4 files changed, 61 insertions(+), 1 deletion(-) diff --git a/packages/open-ui-kit/src/components/table/components/table.tsx b/packages/open-ui-kit/src/components/table/components/table.tsx index 70e262e..def9106 100644 --- a/packages/open-ui-kit/src/components/table/components/table.tsx +++ b/packages/open-ui-kit/src/components/table/components/table.tsx @@ -32,6 +32,7 @@ import { TableProps } from "../types"; import { tableComfortStyles, tableCompactStyles } from "../styles"; import { Box, PaginationItem, SvgIconProps, useTheme } from "@mui/material"; import { EmptyState, Link, OverflowTooltip, TooltipSize } from "@/components"; +import { withHeaderHelpTooltips } from "../utils/helpers"; /** * `Table` Component @@ -109,7 +110,7 @@ export const CreateTableInstance = ({ enableFilters: !!data.length, enableFullScreenToggle: !!data.length, enableHiding: !!data.length, - columns, + columns: withHeaderHelpTooltips(columns), data, enableColumnActions: false, enableTopToolbar, diff --git a/packages/open-ui-kit/src/components/table/stories/table.stories.tsx b/packages/open-ui-kit/src/components/table/stories/table.stories.tsx index 76c9ad9..f333979 100644 --- a/packages/open-ui-kit/src/components/table/stories/table.stories.tsx +++ b/packages/open-ui-kit/src/components/table/stories/table.stories.tsx @@ -118,18 +118,21 @@ const data = { accessorKey: "id", header: "ID", size: 350, + meta: { headerTooltip: "The unique identifier of the record" }, }, { header: "Name", accessorKey: "name", enableColumnOrdering: false, size: 200, + meta: { headerTooltip: "Full name of the person" }, }, { header: "Phone", accessorKey: "phone", enableSorting: false, enableColumnOrdering: false, + meta: { headerTooltip: "Primary phone number" }, }, { header: "firstName", diff --git a/packages/open-ui-kit/src/components/table/types/index.ts b/packages/open-ui-kit/src/components/table/types/index.ts index dd7a649..145ada8 100644 --- a/packages/open-ui-kit/src/components/table/types/index.ts +++ b/packages/open-ui-kit/src/components/table/types/index.ts @@ -68,6 +68,10 @@ interface TableRow { subRows?: ReactNode; } +interface HeaderTooltipMeta { + headerTooltip?: ReactNode; +} + export { AtomicTypes, ExportProps, @@ -75,4 +79,5 @@ export { TableRow, TopToolbarProps, TableTitle, + HeaderTooltipMeta, }; diff --git a/packages/open-ui-kit/src/components/table/utils/helpers.tsx b/packages/open-ui-kit/src/components/table/utils/helpers.tsx index ddc13bf..4e1f9dd 100644 --- a/packages/open-ui-kit/src/components/table/utils/helpers.tsx +++ b/packages/open-ui-kit/src/components/table/utils/helpers.tsx @@ -6,9 +6,14 @@ import { MRT_Column, + MRT_ColumnDef, MRT_RowData, MRT_TableInstance, } from "material-react-table"; +import { Box, IconButton, Stack } from "@mui/material"; +import { Tooltip, TooltipSize } from "@/components"; +import { InfoCircleOutline } from "@/custom-icons"; +import { HeaderTooltipMeta } from "../types"; // Check rightmost left-pinned column / leftmost right-pinned column export const isOuterPinnedColumn = ( @@ -38,3 +43,49 @@ export const parseFromValuesOrFunc = ( fn: ((arg: U) => T) | T | undefined, arg: U, ): T | undefined => (fn instanceof Function ? fn(arg) : fn); + +// Enhance column headers to optionally show an info tooltip icon. +// Usage: column.meta?.headerTooltip?: string | React.ReactNode +export const withHeaderHelpTooltips = < + TData extends MRT_RowData, + TValue = unknown, +>( + columns: MRT_ColumnDef[], +): MRT_ColumnDef[] => { + return columns.map((col) => { + const meta = col.meta as HeaderTooltipMeta; + const hasHeaderTooltip = + meta?.headerTooltip !== undefined && meta?.headerTooltip !== null; + + const updated: MRT_ColumnDef = { + ...col, + }; + + if (hasHeaderTooltip) { + updated.Header = ( + + {col.header} + + theme.palette.vars.controlIconDefault, + "&:hover": { + color: (theme) => theme.palette.vars.controlIconHover, + }, + }} + aria-label="Column info" + > + + + + + ); + } + + return updated; + }); +}; From ecac1a2a6b3181a41e25800029c70d6f9c3698d8 Mon Sep 17 00:00:00 2001 From: Paul Sterpu Date: Wed, 22 Oct 2025 17:30:28 +0300 Subject: [PATCH 2/2] fix: comment Signed-off-by: Paul Sterpu --- packages/open-ui-kit/src/components/table/utils/helpers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/open-ui-kit/src/components/table/utils/helpers.tsx b/packages/open-ui-kit/src/components/table/utils/helpers.tsx index 4e1f9dd..eefd345 100644 --- a/packages/open-ui-kit/src/components/table/utils/helpers.tsx +++ b/packages/open-ui-kit/src/components/table/utils/helpers.tsx @@ -45,7 +45,7 @@ export const parseFromValuesOrFunc = ( ): T | undefined => (fn instanceof Function ? fn(arg) : fn); // Enhance column headers to optionally show an info tooltip icon. -// Usage: column.meta?.headerTooltip?: string | React.ReactNode +// Usage: column.meta?.headerTooltip?: React.ReactNode export const withHeaderHelpTooltips = < TData extends MRT_RowData, TValue = unknown,