add ability to control more data

Author: mckervinc

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 1.5.1
+
+_2025-06-16_
+
+### Bugfix
+
+- added `hasMoreData` so users can have more control over when loading needs to occur
+
 ## 1.5.0
 
 _2025-06-11_

index.d.ts

@@ -341,6 +341,11 @@ export type TableProps<T> = {
    * we have exhausted all remaining data.
    */
   onLoadRows?: () => Promise<boolean>;
+  /**
+   * boolean to determine if there is more data to be loaded. If omitted, then the
+   * result of `onLoadRows` determines this.
+   */
+  hasMoreData?: boolean;
   /**
    * Number of rows from the bottom to trigger loading more rows. This is ignored if
    * onLoadRows is not specified (default: 1).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fluid-table",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "A React table inspired by @tanstack/react-virtual",
   "author": "Mckervin Ceme <mckervinc@live.com>",
   "license": "MIT",
@@ -62,44 +62,44 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@eslint/compat": "^1.2.9",
+    "@eslint/compat": "^1.3.0",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.28.0",
+    "@eslint/js": "^9.29.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-commonjs": "^28.0.5",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-url": "^8.0.2",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/react": "^19",
-    "@typescript-eslint/eslint-plugin": "^8.34.0",
-    "@typescript-eslint/parser": "^8.34.0",
+    "@typescript-eslint/eslint-plugin": "^8.34.01",
+    "@typescript-eslint/parser": "^8.34.01",
     "concurrently": "^9.1.2",
     "cross-env": "^7.0.3",
-    "eslint": "9.28.0",
+    "eslint": "9.29.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.4.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "gh-pages": "^6.3.0",
     "globals": "^16.2.0",
-    "postcss": "^8.5.4",
+    "postcss": "^8.5.6",
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.42.0",
+    "rollup": "^4.43.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^6.0.3",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.34.0"
+    "typescript-eslint": "^8.34.01"
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.13.10",
-    "react-resize-detector": "^12.0.2"
+    "react-resize-detector": "^12.1.0"
   },
   "volta": {
     "node": "20.12.1",

src/components/List.tsx

@@ -70,6 +70,7 @@ function BaseList<T>(
     maxTableHeight,
     estimatedRowHeight,
     style = {},
+    hasMoreData: controlledHasMoreData,
     asyncOverscan = 1,
     minColumnWidth = 80,
     endComponent: EndComponent,
@@ -85,7 +86,7 @@ function BaseList<T>(
   const footerRef = useRef<HTMLDivElement>(null);
   const [loadingMore, setLoadingMore] = useState(false);
   const prevRowHeight = useRef(rowHeight ?? estimatedRowHeight);
-  const [hasMoreData, setHasMoreData] = useState(true);
+  const [hasMoreData, setHasMoreData] = useState(controlledHasMoreData ?? true);
   const [widthConstants, setWidthConstants] = useState(findColumnWidthConstants(columns));
   const [pixelWidths, setPixelWidths] = useState<number[]>(() => {
     const { fixedWidth, remainingCols } = widthConstants;
@@ -105,6 +106,7 @@ function BaseList<T>(
 
   // constants
   const items = virtualizer.getVirtualItems();
+  const hasNextPage = controlledHasMoreData ?? hasMoreData;
   const { measure: recalculate, measurementsCache } = virtualizer;
   const { fixedWidth, remainingCols } = widthConstants;
 
@@ -176,17 +178,19 @@ function BaseList<T>(
       return;
     }
 
-    if (hasMoreData && lastItemIndex >= data.length - asyncOverscan && !loadingMore) {
+    if (hasNextPage && lastItemIndex >= data.length - asyncOverscan && !loadingMore) {
       setLoadingMore(true);
       try {
         const remainingData = await onLoadRows();
-        setHasMoreData(remainingData);
+        if (controlledHasMoreData == null) {
+          setHasMoreData(remainingData);
+        }
       } finally {
         setLoadingMore(false);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastItemIndex, data.length, loadingMore, asyncOverscan, hasMoreData]);
+  }, [lastItemIndex, data.length, loadingMore, asyncOverscan, hasNextPage, controlledHasMoreData]);
 
   // effects
   // update pixel widths every time the width changes
@@ -268,7 +272,7 @@ function BaseList<T>(
                 data-row-key={key}
                 style={{ transform: `translateY(${start}px)` }}
               >
-                <EndComponent isLoading={loadingMore} hasMoreData={hasMoreData} />
+                <EndComponent isLoading={loadingMore} hasMoreData={hasNextPage} />
               </div>
             );
           }