Improve table layouts

package.json

@@ -119,7 +119,7 @@
     "react-select": "4.3.1",
     "react-table": "^7.7.0",
     "react-virtualized": "9.22.3",
-    "react-virtualized-auto-sizer": "^1.0.5",
+    "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.6",
     "styled-components": "^5.2.1",
     "styled-system": "^5.1.5",

src/lib/components/tablev2/SingleSelectableContent.tsx

@@ -127,6 +127,12 @@ export function SingleSelectableContent<
   const { hasScrollbar, scrollBarWidth, handleScrollbarWidth } =
     useTableScrollbar();
 
+  console.log('hasScrollbar', {
+    hasScrollbar,
+    scrollBarWidth,
+    handleScrollbarWidth,
+  });
+
   return (
     <>
       <div className="thead" role="rowgroup">

src/lib/components/tablev2/TableCommon.tsx

@@ -44,14 +44,14 @@ export const VirtualizedRows = <
   listRef,
   itemKey,
 }: VirtualizedRowsType<DATA_ROW>) => (
-  <AutoSizer>
-    {({ height, width }) => {
+  <AutoSizer disableWidth>
+    {({ height }) => {
       return (
         <List
-          height={height}
+          height={height - 1}
           itemCount={rows.length} // how many items we are going to render
           itemSize={convertRemToPixels(tableRowHeight[rowHeight])} // height of each row in pixel
-          width={width}
+          width={'100%'}
           itemKey={itemKey}
           itemData={rows}
           ref={listRef}
@@ -81,7 +81,7 @@ export const VirtualizedRows = <
 );
 
 export const useTableScrollbar = () => {
-  const [hasScrollbar, setHasScrollbar] = useState(false);
+  const { hasScrollbar, setHasScrollbar } = useTableContext();
   const [scrollBarWidth, setScrollBarWidth] = useState(0);
 
   const handleScrollbarWidth = useCallback((node) => {

src/lib/components/tablev2/Tablestyle.tsx

@@ -42,7 +42,7 @@ export const TableHeader = styled.div<{
 `;
 
 type HeadRowType = {
-  hasScrollBar: boolean;
+  hasScrollBar?: boolean;
   scrollBarWidth: number;
   rowHeight: TableHeightKeyType;
   separationLineVariant: TableVariantType;

src/lib/components/tablev2/Tablev2.component.tsx

@@ -105,6 +105,10 @@ type TableContextType<
     en: { singular: string; plural: string };
     fr?: { singular: string; plural: string };
   };
+  syncScrollListener: ((event: Event) => void) | null;
+  setSyncScrollListener: (listener: (event: Event) => void) => void;
+  setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
+  hasScrollbar?: boolean;
 };
 const TableContext = React.createContext<TableContextType | null>(null);
 
@@ -215,6 +219,12 @@ function Table<
 
   const [rowHeight, setRowHeight] = React.useState<TableHeightKeyType>('h40');
 
+  const [syncScrollListener, setSyncScrollListener] = React.useState<
+    ((event: Event) => void) | null
+  >(null);
+
+  const [hasScrollbar, setHasScrollbar] = React.useState<boolean>(false);
+
   const {
     headerGroups,
     rows,
@@ -310,6 +320,10 @@ function Table<
     toggleAllRowsSelected,
     status,
     entityName,
+    syncScrollListener,
+    setSyncScrollListener,
+    setHasScrollbar,
+    hasScrollbar,
   };
   return (
     <TableContext.Provider

src/lib/components/tablev2/useSyncedScroll.ts

@@ -1,64 +1,66 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import { Row } from 'react-table';
 import { FixedSizeList } from 'react-window';
+import { useTableContext } from './Tablev2.component';
 
 export default function useSyncedScroll<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
 >(): {
   headerRef: (element: HTMLDivElement) => void;
-  bodyRef: (tableBody: FixedSizeList<Row<DATA_ROW>[]>) => void;
+  bodyRef: React.RefObject<FixedSizeList<Row<DATA_ROW>[]>>;
 } {
-  const [listener, setListener] =
-    useState<((event: Event) => void) | null>(null);
-  const [tableBody, setTableBody] =
-    useState<FixedSizeList<Row<DATA_ROW>[]> | null>(null);
+  const { syncScrollListener, setSyncScrollListener } = useTableContext();
 
   const headerRef = useCallback(
     (element: HTMLDivElement) => {
+      console.log('elementaire', element);
       if (element) {
         const callback = (event: Event) => {
           if (element && event) {
+            console.log('element', element);
             element.scrollTo({
               left: (event.target as HTMLDivElement).scrollLeft,
               top: 0,
             });
           }
         };
-        if (!listener) {
-          setListener(() => {
+        if (!syncScrollListener) {
+          console.log('setSyncScrollListener', setSyncScrollListener);
+          setSyncScrollListener(() => {
+            console.log('callback', callback);
             return callback;
           });
         }
       }
     },
-    [listener],
+    [syncScrollListener],
   );
 
-  const bodyRef = useCallback((tableBody: FixedSizeList<Row<DATA_ROW>[]>) => {
-    setTableBody(tableBody);
-  }, []);
+  const bodyRef = useRef<FixedSizeList<Row<DATA_ROW>[]> | null>(null);
 
   useEffect(() => {
-    if (tableBody && listener) {
+    if (bodyRef.current && syncScrollListener) {
       /*
       We intentionally use _outerRef prop here despite the fact that it is 
       internal use only and not typed, as it is the only way for us to access to the scrollable element
       */
       //@ts-expect-error
-      (tableBody._outerRef as HTMLDivElement).addEventListener(
+      (bodyRef.current._outerRef as HTMLDivElement).addEventListener(
         'scroll',
-        listener,
+        syncScrollListener,
       );
-
-      return () => {
-        //@ts-expect-error
-        if (tableBody && tableBody._outerRef) {
-          //@ts-expect-error
-          tableBody._outerRef.removeEventListener('scroll', listener);
-        }
-      };
     }
-  }, [tableBody, listener]);
+    return () => {
+      //@ts-expect-error
+      if (bodyRef.current && bodyRef.current._outerRef) {
+        //@ts-expect-error
+        bodyRef.current._outerRef.removeEventListener(
+          'scroll',
+          syncScrollListener,
+        );
+      }
+    };
+  }, [bodyRef.current, syncScrollListener]);
 
   return { headerRef, bodyRef };
 }