Tooltip in StandardTable can be rendered to portal (#589)

StenaIT · Sep 7, 2023 · 1db585b · 1db585b
1 parent 36e0436
commit 1db585b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/packages/grid/src/features/standard-table/components/StandardTable.tsx b/packages/grid/src/features/standard-table/components/StandardTable.tsx
@@ -39,6 +39,7 @@ import { ColGroups } from "./ColGroups";
 import styles from "./StandardTable.module.css";
 import { StandardTableContent } from "./StandardTableContent";
 import { StandardTableHeadRow } from "./StandardTableHeadRow";
+import { TableHeadProps } from "../../table-ui/components/table/TableHeadItem";
 
 export interface StandardTableProps<
   TItem,
@@ -75,6 +76,12 @@ export interface StandardTableProps<
    */
   config: StandardTableConfig<TItem, TColumnKey, TColumnGroupKey>;
 
+  /**
+   * Append tooltip to HTML element. This prop is passed to Tippy.
+   * This is useful to solve z-index problems.
+   */
+  appendTooltipTo?: TableHeadProps["appendTooltipTo"];
+
   /**
    * Items to list in the table.
    */
@@ -160,6 +167,7 @@ export const StandardTable = function StandardTable<
   variant = "standard",
   onKeyDown,
   onSortOrderChange,
+  appendTooltipTo,
   ...props
 }: StandardTableProps<TItem, TColumnKey, TColumnGroupKey>) {
   const generatedTableId = useId();
@@ -297,6 +305,7 @@ export const StandardTable = function StandardTable<
                                   <StandardTableHeadRow
                                     items={props.items}
                                     height={"var(--current-row-height)"}
+                                    appendTooltipTo={appendTooltipTo}
                                   />
                                 </thead>
                                 <StandardTableContent

diff --git a/packages/grid/src/features/standard-table/components/StandardTableHeadItem.tsx b/packages/grid/src/features/standard-table/components/StandardTableHeadItem.tsx
@@ -1,6 +1,9 @@
 import * as React from "react";
 import { CSSProperties } from "react";
-import { TableHeadItem } from "../../table-ui/components/table/TableHeadItem";
+import {
+  TableHeadItem,
+  TableHeadProps,
+} from "../../table-ui/components/table/TableHeadItem";
 import { useStickyPropsPerColumnContext } from "../context/StickyPropsPerColumnContext";
 import { useTableSortHeader } from "../features/sorting/UseTableSortHeader";
 import { useColumnConfigById } from "../hooks/UseColumnConfigById";
@@ -14,6 +17,7 @@ export interface StandardTableHeaderItemProps {
   borderFromGroup?: boolean | string;
   stickyHeader?: boolean;
   top?: string | number;
+  appendTooltipTo?: TableHeadProps["appendTooltipTo"];
 }
 
 export const StandardTableHeadItem = React.memo(
@@ -23,6 +27,7 @@ export const StandardTableHeadItem = React.memo(
     disableBorderLeft,
     stickyHeader,
     top,
+    appendTooltipTo,
   }: StandardTableHeaderItemProps) {
     const {
       justifyContentHeader,
@@ -102,6 +107,7 @@ export const StandardTableHeadItem = React.memo(
           sortOrderIconVariant={
             sortOrderIconVariant ?? defaultSortOrderIconVariant
           }
+          appendTooltipTo={appendTooltipTo}
           selected={selected}
           height={"100%"}
         />

diff --git a/packages/grid/src/features/standard-table/components/StandardTableHeadRow.tsx b/packages/grid/src/features/standard-table/components/StandardTableHeadRow.tsx
@@ -17,10 +17,12 @@ import { useStandardTableConfig } from "../hooks/UseStandardTableConfig";
 import { getCellBorderFromGroup } from "../util/CellBorderCalculator";
 import { StandardTableHeadItem } from "./StandardTableHeadItem";
 import { TrWithHoverBackground } from "./TrWithHoverBackground";
+import { TableHeadProps } from "../../table-ui/components/table/TableHeadItem";
 
 interface StandardTableHeaderProps<TItem> {
   items?: Array<TItem>;
   height?: string;
+  appendTooltipTo?: TableHeadProps["appendTooltipTo"];
 }
 
 const getTopPosition = (
@@ -43,7 +45,11 @@ const getTopPosition = (
 
 export const StandardTableHeadRow = React.memo(function StandardTableHeadRow<
   TItem
->({ items, height = defaultTableRowHeight }: StandardTableHeaderProps<TItem>) {
+>({
+  items,
+  appendTooltipTo,
+  height = defaultTableRowHeight,
+}: StandardTableHeaderProps<TItem>) {
   const groupConfigsAndIds = useGroupConfigsAndIdsForRows();
 
   const {
@@ -171,6 +177,7 @@ export const StandardTableHeadRow = React.memo(function StandardTableHeadRow<
                   disableBorderLeft={groupIndex === 0 && index === 0}
                   stickyHeader={stickyHeader}
                   top={stickyHeaderStyle.top}
+                  appendTooltipTo={appendTooltipTo}
                 />
               );
             })}

diff --git a/packages/grid/src/features/table-ui/components/table/TableHeadItem.tsx b/packages/grid/src/features/table-ui/components/table/TableHeadItem.tsx
@@ -11,6 +11,7 @@ import {
   ButtonWithPopoverProps,
   Popover,
   Tooltip,
+  TooltipProps,
 } from "@stenajs-webui/tooltip";
 import * as React from "react";
 import { CSSProperties, useRef } from "react";
@@ -30,6 +31,7 @@ export interface TableHeadProps extends BoxProps {
   selected?: boolean;
   alignRight?: boolean;
   sortOrderIconVariant?: SortOrderIconVariant;
+  appendTooltipTo?: TooltipProps["appendTo"];
 }
 
 export const TableHeadItem: React.FC<TableHeadProps> = React.memo(
@@ -45,6 +47,7 @@ export const TableHeadItem: React.FC<TableHeadProps> = React.memo(
     overflow = "hidden",
     alignRight,
     sortOrderIconVariant,
+    appendTooltipTo,
     ...boxProps
   }) => {
     const containerRef = useRef(null);
@@ -120,6 +123,7 @@ export const TableHeadItem: React.FC<TableHeadProps> = React.memo(
                 <Tooltip
                   label={infoIconTooltipText}
                   zIndex={"var(--swui-sticky-popover-z-index)" as any}
+                  appendTo={appendTooltipTo}
                 >
                   <Icon
                     icon={stenaInfoCircle}