Merge pull request #827 from buildo/fixes_to_table

Search lastStickyColumnIndex by column id if set; search headers only inside tableContainer

packages/bento-design-system/src/Table/Table.tsx

@@ -231,7 +231,7 @@ export function Table<
 
   // Determine the id of the last left sticky column (used to draw a visual separator in the UI)
   const lastStickyColumnIndex = flatColumns
-    .map((c) => c.accessor)
+    .map((c) => c.id ?? c.accessor)
     .indexOf(stickyLeftColumnsIds[stickyLeftColumnsIds.length - 1]);
 
   // Keep a style object for each sticky column, which will be updated by the useLayoutEffect below
@@ -242,23 +242,24 @@ export function Table<
   // Keep a state for the height of the first row of headers, which will be updated by the useLayoutEffect below
   const [stickyHeaderHeight, setStickyHeaderHeight] = useState(0);
 
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const getHeaderById = (id: string) =>
+    // Search header only inside the table container, to avoid selecting headers from other tables
+    tableContainerRef.current!.querySelector(`[id='header-cell-${id}']`);
+
   /** Get the width of each sticky column (using the header width as reference) and use it to set the `left` of each sticky column.
    *  Each sticky column must have as `left` the total width of the previous sticky columns.
    */
   useLayoutEffect(() => {
     // Make this computation only if we have any data, because headers are not rendered when there are no rows
     // and we need them to get the column width.
     if (data.length > 0) {
-      const columnWidths = stickyLeftColumnsIds.map(
-        (id) => document.getElementById(`header-cell-${id}`)!.clientWidth
-      );
+      const columnWidths = stickyLeftColumnsIds.map((id) => getHeaderById(id)!.clientWidth);
       const columnGroupWidths = stickyLeftColumnGroupsIds.map(
-        (id) => document.getElementById(`header-cell-${id}`)!.clientWidth
+        (id) => getHeaderById(id)!.clientWidth
       );
       const columnGroupHeight = Math.max(
-        ...headerGroups[0].headers.map((h) =>
-          h.columns ? document.getElementById(`header-cell-${h.id}`)!.clientHeight : 0
-        )
+        ...headerGroups[0].headers.map((h) => (h.columns ? getHeaderById(h.id)!.clientHeight : 0))
       );
 
       const styleReducer =
@@ -304,8 +305,6 @@ export function Table<
 
   const flatRows = rows.flatMap((row) => (row.isGrouped ? [row, ...row.leafRows] : [row]));
 
-  const tableContainerRef = useRef<HTMLDivElement>(null);
-
   const virtualizeRows =
     typeof virtualizeRowsConfig === "boolean" ? virtualizeRowsConfig : virtualizeRowsConfig != null;
   const estimateSize =