diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx index 0a27cfefba..572bf228b9 100644 --- a/packages/canary-react/src/stories/ic-data-table.stories.mdx +++ b/packages/canary-react/src/stories/ic-data-table.stories.mdx @@ -1088,16 +1088,17 @@ const DataTable = () => { export default DataTable; ``` -### Links and elements in data +### Links and slotted elements in data Custom HTML elements can be slotted or passed via the `data` prop to display in certain cells. When using the slotted method, the slot name follows the format of `{COLUMN_TAG}-{ROW_INDEX}`. - + {DATA_REACT_ELEMENTS.map((_, index) => ( <> @@ -1105,26 +1106,27 @@ Custom HTML elements can be slotted or passed via the `data` prop to display in key={`actions-${index}`} variant="destructive" slot={`actions-${index}`} + title="Delete row (top level tooltip)" onClick={() => console.log("Delete")} > Delete +
console.log("Delete")} > +
))}
-#### Links and elements in data code example +#### Links and slotted elements in data code example ```tsx import * as React from "react"; @@ -1164,11 +1166,33 @@ const data = [ const DataTable = () => ( - {data.map((_, index) => console.log("Delete")}>Delete)} + {data.map((_, index) => ( + <> + console.log("Delete")} + > + Delete + +
+ console.log("Delete")} + > + + +
+ + ))}
); diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx index b87795b6aa..cff873172d 100644 --- a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx +++ b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx @@ -2099,14 +2099,26 @@ export class DataTable { } private fixCellTooltip = (element: HTMLElement) => { - const tooltipEl = ( - element.tagName === "IC-TOOLTIP" - ? element - : element.shadowRoot?.querySelector(this.IC_TOOLTIP_STRING) - ) as HTMLIcTooltipElement; + let tooltip: HTMLIcTooltipElement; + + if (element.tagName === "IC-TOOLTIP") { + tooltip = element as HTMLIcTooltipElement; + } else if (element.shadowRoot?.querySelector(this.IC_TOOLTIP_STRING)) { + tooltip = element.shadowRoot?.querySelector( + this.IC_TOOLTIP_STRING + ) as HTMLIcTooltipElement; + } else { + if (element.children?.length > 0) { + Array.from(element.children).forEach((el) => { + this.fixCellTooltip(el as HTMLElement); + }); + } else { + return; + } + } - if (tooltipEl) { - tooltipEl.setExternalPopperProps({ + if (tooltip) { + tooltip.setExternalPopperProps({ strategy: "fixed", }); }