From eeb62d82f7e6bf8eb1cf142f5a00200f24e3c969 Mon Sep 17 00:00:00 2001
From: Alessandro Tilli <alessandro.tilli@gmail.com>
Date: Mon, 21 Nov 2022 11:02:49 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20[Table]=20fix=20sticky=20?=
 =?UTF-8?q?header=20when=20tableLayout=20is=20auto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: 278
---
 src/components/Table/index.tsx | 42 +++++++++++++++++++++++++++-------
 src/components/Table/utils.ts  |  2 ++
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 992bf809..adda0a9f 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -9,6 +9,7 @@ import {
   useTheme,
 } from "@material-ui/core";
 
+import { useMosaicContext } from "../../hooks/useMosaicContext";
 import { ITable, ITableAction, ITableOnSortCallback } from "../../types/Table";
 import { getComposedDataCy } from "../../utils";
 import localized, { ILocalizableProperty } from "../../utils/hocs/localized";
@@ -22,7 +23,13 @@ import TableLoader from "./components/Loader";
 import TablePagination from "./components/Pagination";
 import TableSelectionCell from "./components/SelectionCell";
 import TableToolbar from "./components/Toolbar";
-import { COLUMN_CHECKBOX_PATH, COLUMN_ROW_ACTIONS_PATH } from "./utils";
+import {
+  COLUMN_CHECKBOX_PATH,
+  COLUMN_ROW_ACTIONS_PATH,
+  PAGINATION_TOOLBAR_HEIGHT,
+  TOOLBAR_HEIGHT,
+  TOOLBAR_HEIGHT_MOBILE,
+} from "./utils";
 
 const CHECKBOX_SELECTION_WIDTH = 36;
 const ROW_ACTION_DIMENSION = 48;
@@ -272,19 +279,38 @@ const Table: FC<ITable> = ({
   const wrapperStyle = useMemo(
     (): CSSProperties => ({
       height,
-      overflowY: loading && sticky ? "hidden" : "inherit",
+      overflowY: sticky ? "hidden" : "inherit",
       position: "relative",
       ...externalStyle,
     }),
-    [externalStyle, height, loading, sticky]
+    [externalStyle, height, sticky]
   );
 
+  const {
+    view: { mobile },
+  } = useMosaicContext();
+
   const scrollContainerStyle = useMemo((): CSSProperties | undefined => {
-    if (tableLayout === "fixed") {
-      return undefined;
+    const toolbarHeight = mobile ? TOOLBAR_HEIGHT_MOBILE : TOOLBAR_HEIGHT;
+    const extraOffset = mobile ? 9 : 2;
+
+    let style: CSSProperties | undefined = undefined;
+
+    if (sticky) {
+      const offset = toolbarHeight + PAGINATION_TOOLBAR_HEIGHT + extraOffset;
+
+      style = {
+        height: `calc(100% - ${offset}px)`,
+        overflowY: "auto",
+      };
+    }
+
+    if (tableLayout === "auto") {
+      return { ...style, overflowX: "auto" };
     }
-    return { overflowX: "auto" };
-  }, [tableLayout]);
+
+    return style;
+  }, [mobile, sticky, tableLayout]);
 
   return (
     <MUITableContainer component={MUIPaper} data-cy={dataCy} style={wrapperStyle}>
@@ -312,7 +338,7 @@ const Table: FC<ITable> = ({
                   onSort={onSortWrapper}
                   sortable={!!onSortChange}
                   sorting={sorting}
-                  stickyHeader={!hideHeader && sticky}
+                  stickyHeader={false}
                 />
               ))}
             </MUITableRow>
diff --git a/src/components/Table/utils.ts b/src/components/Table/utils.ts
index a110b30b..90b75722 100644
--- a/src/components/Table/utils.ts
+++ b/src/components/Table/utils.ts
@@ -3,3 +3,5 @@ export const COLUMN_ROW_ACTIONS_PATH = "row-actions";
 
 export const TOOLBAR_HEIGHT = 64;
 export const TOOLBAR_HEIGHT_MOBILE = 56;
+
+export const PAGINATION_TOOLBAR_HEIGHT = 64;