From c334f0c54a925f45049542ff7075524e35a07e56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= <marc@ondori.dev>
Date: Wed, 17 Jul 2024 09:51:29 +0200
Subject: [PATCH 1/3] feat: add footer prop

---
 .../InfiniteTable/InfiniteTable.tsx           | 81 ++++++++++++-------
 src/stories/InfiniteTable.stories.tsx         |  1 +
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/components/InfiniteTable/InfiniteTable.tsx b/src/components/InfiniteTable/InfiniteTable.tsx
index f786125..110f329 100644
--- a/src/components/InfiniteTable/InfiniteTable.tsx
+++ b/src/components/InfiniteTable/InfiniteTable.tsx
@@ -45,6 +45,8 @@ export type InfiniteTableProps = Omit<
   totalRows: number;
   allRowSelectedMode?: boolean;
   onAllRowSelectedModeChange?: (allRowSelectedMode: boolean) => void;
+  footer?: React.ReactNode;
+  footerHeight?: number;
 };
 
 export type InfiniteTableRef = {
@@ -59,7 +61,7 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
       columns: columnsProps,
       onRowDoubleClick,
       onRowSelectionChange,
-      height,
+      height: heightProps = 600,
       onRowStyle,
       onColumnChanged: onColumnsChangedProps,
       onGetColumnsState,
@@ -69,6 +71,8 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
       totalRows,
       onAllRowSelectedModeChange,
       allRowSelectedMode: allRowSelectedModeProps,
+      footer,
+      footerHeight = 50,
     } = props;
 
     const gridRef = useRef<AgGridReact>(null);
@@ -77,6 +81,8 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
     const columnsPersistedStateRef = useRef<any>();
     const containerRef = useRef<HTMLDivElement>(null);
     const columnChangeListenerReady = useRef(false);
+    const totalHeight = footer ? heightProps + footerHeight : heightProps;
+    const tableHeight = footer ? heightProps - footerHeight : heightProps;
 
     const { autoSizeColumnsIfNecessary } = useAutoFitColumns({
       gridRef,
@@ -271,37 +277,50 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
 
     return (
       <div
-        ref={containerRef}
-        className={`ag-grid-default-table ag-theme-quartz`}
-        style={{ height: height || 600, width: "100%" }}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: totalHeight,
+        }}
       >
-        <AgGridReact
-          ref={gridRef}
-          columnDefs={colDefs}
-          defaultColDef={defaultColDef}
-          onRowDoubleClicked={onRowDoubleClicked}
-          rowStyle={{
-            cursor: onRowDoubleClick ? "pointer" : "auto",
-          }}
-          getRowStyle={onRowStyle}
-          suppressCellFocus={true}
-          suppressRowClickSelection={true}
-          rowBuffer={0}
-          rowSelection={"multiple"}
-          onColumnMoved={onColumnChanged}
-          onColumnResized={onColumnChanged}
-          rowModelType={"infinite"}
-          cacheBlockSize={20}
-          onSelectionChanged={onSelectionChangedDebounced}
-          cacheOverflowSize={2}
-          maxConcurrentDatasourceRequests={1}
-          infiniteInitialRowCount={50}
-          maxBlocksInCache={10}
-          onGridReady={onGridReady}
-          onFirstDataRendered={onFirstDataRendered}
-          onBodyScroll={onBodyScroll}
-          blockLoadDebounceMillis={DEBOUNCE_TIME}
-        />
+        <div
+          ref={containerRef}
+          className={`ag-grid-default-table ag-theme-quartz`}
+          style={{ height: tableHeight, width: "100%" }}
+        >
+          <AgGridReact
+            ref={gridRef}
+            columnDefs={colDefs}
+            defaultColDef={defaultColDef}
+            onRowDoubleClicked={onRowDoubleClicked}
+            rowStyle={{
+              cursor: onRowDoubleClick ? "pointer" : "auto",
+            }}
+            getRowStyle={onRowStyle}
+            suppressCellFocus={true}
+            suppressRowClickSelection={true}
+            rowBuffer={0}
+            rowSelection={"multiple"}
+            onColumnMoved={onColumnChanged}
+            onColumnResized={onColumnChanged}
+            rowModelType={"infinite"}
+            cacheBlockSize={20}
+            onSelectionChanged={onSelectionChangedDebounced}
+            cacheOverflowSize={2}
+            maxConcurrentDatasourceRequests={1}
+            infiniteInitialRowCount={50}
+            maxBlocksInCache={10}
+            onGridReady={onGridReady}
+            onFirstDataRendered={onFirstDataRendered}
+            onBodyScroll={onBodyScroll}
+            blockLoadDebounceMillis={DEBOUNCE_TIME}
+          />
+        </div>
+        {footer && (
+          <div style={{ height: footerHeight, backgroundColor: "red" }}>
+            {footer}
+          </div>
+        )}
       </div>
     );
   },
diff --git a/src/stories/InfiniteTable.stories.tsx b/src/stories/InfiniteTable.stories.tsx
index d56fb5a..d84170a 100644
--- a/src/stories/InfiniteTable.stories.tsx
+++ b/src/stories/InfiniteTable.stories.tsx
@@ -87,6 +87,7 @@ export const HeavyTable = (): React.ReactElement => {
           const columnsState = localStorage.getItem("columnsState");
           return columnsState ? JSON.parse(columnsState) : undefined;
         }}
+        footer={<p>This is a footer</p>}
       />
     </>
   );

From b7480c90e003f7e4a5b0ac220047c74ff9603dee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= <marc@ondori.dev>
Date: Wed, 17 Jul 2024 12:30:33 +0200
Subject: [PATCH 2/3] fix: remove useless bg color

---
 src/components/InfiniteTable/InfiniteTable.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/InfiniteTable/InfiniteTable.tsx b/src/components/InfiniteTable/InfiniteTable.tsx
index 110f329..753099f 100644
--- a/src/components/InfiniteTable/InfiniteTable.tsx
+++ b/src/components/InfiniteTable/InfiniteTable.tsx
@@ -316,11 +316,7 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
             blockLoadDebounceMillis={DEBOUNCE_TIME}
           />
         </div>
-        {footer && (
-          <div style={{ height: footerHeight, backgroundColor: "red" }}>
-            {footer}
-          </div>
-        )}
+        {footer && <div style={{ height: footerHeight }}>{footer}</div>}
       </div>
     );
   },

From 416cfa1859710b18970e882e683bc834b178d61f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= <marc@ondori.dev>
Date: Wed, 17 Jul 2024 13:38:13 +0200
Subject: [PATCH 3/3] fix: selection issues

---
 src/components/InfiniteTable/useRowSelection.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/InfiniteTable/useRowSelection.ts b/src/components/InfiniteTable/useRowSelection.ts
index fef9718..6d402b5 100644
--- a/src/components/InfiniteTable/useRowSelection.ts
+++ b/src/components/InfiniteTable/useRowSelection.ts
@@ -78,12 +78,6 @@ export const useRowSelection = ({
     }, 1000);
   }, [allRowSelectedMode, internalSelectedRowKeys.length, totalRows, gridRef]);
 
-  useEffect(() => {
-    return () => {
-      timeoutRef.current && clearTimeout(timeoutRef.current);
-    };
-  }, [onHeaderCheckboxChange]);
-
   const onSelectionChanged = useCallback(
     (event: { api: { getSelectedNodes: () => any } }) => {
       if (allRowSelectedModeLock.current) {