@trackunit/react-table-pagination - npm Package Compare versions

Comparing version 0.0.30 to 0.0.32

index.cjs.js

@@ -5,4 +5,70 @@ 'use strict';
 
+var reactVirtual = require('@tanstack/react-virtual');
 var react = require('react');
 
+const noPagination = {
+    isLoading: false,
+    nextPage: () => { },
+    previousPage: () => { },
+    pageInfo: {
+        count: null,
+        hasNextPage: false,
+        hasPreviousPage: false,
+        endCursor: null,
+        startCursor: null,
+    },
+};
+
+const OVERSCAN = 10;
+/**
+ * Custom hook for implementing infinite scrolling in a table.
+ *
+ * @param {InfiniteScrollProps} props - The configuration object for the infinite scroll behavior.
+ * @returns {InfiniteScroll} An object containing properties and functions for infinite scrolling.
+ * @description
+ * This hook is used to implement infinite scrolling in a table. It calculates the necessary padding
+ * for virtual rows, provides a callback for fetching more data when the user scrolls to the bottom,
+ * and manages virtualized rows for efficient rendering.
+ * @example
+ * const { paddingTop, paddingBottom, fetchMoreOnBottomReached, rowVirtualizer, virtualRows } = useInfiniteScroll({
+ *   pagination: relayPaginationObject,
+ *   containerRef: tableContainerRef,
+ *   rowSize: 50,
+ * });
+ */
+const useInfiniteScroll = (props) => {
+    //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
+    const fetchMoreOnBottomReached = react.useCallback((containerRefElement) => {
+        var _a;
+        if (containerRefElement) {
+            const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+            //once the user has scrolled within OVERSCAN*rowheight (aka 10 items if overscan is 10) of the bottom of the table, fetch more data if there is any
+            if (scrollHeight - scrollTop - clientHeight < OVERSCAN * props.rowHeight &&
+                !props.pagination.isLoading &&
+                ((_a = props.pagination.pageInfo) === null || _a === void 0 ? void 0 : _a.hasNextPage)) {
+                props.pagination.nextPage();
+            }
+        }
+    }, [props.pagination, props.rowHeight]);
+    const rowVirtualizer = reactVirtual.useVirtualizer({
+        count: props.rowSize,
+        getScrollElement: () => props.containerRef.current,
+        estimateSize: react.useCallback(() => props.rowHeight, [props.rowHeight]),
+        overscan: OVERSCAN,
+    });
+    react.useEffect(() => {
+        // this ensures the cache is cleared if the rowHeight changes
+        if (props.rowHeight) {
+            rowVirtualizer.measure();
+        }
+    }, [props.rowHeight, rowVirtualizer]);
+    const { getVirtualItems, getTotalSize, measureElement } = rowVirtualizer;
+    return {
+        fetchMoreOnBottomReached,
+        getTotalSize,
+        getVirtualItems,
+        measureElement,
+    };
+};
+
 const defaultPageSize = 50;
@@ -60,5 +126,7 @@ /**
         };
-    }, [props.pageSize, variables, nextPage, previousPage, isLoading, reset, pageInfo]);
+    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
 };
 
+exports.noPagination = noPagination;
+exports.useInfiniteScroll = useInfiniteScroll;
 exports.useRelayPagination = useRelayPagination;

index.esm.js

@@ -1,3 +0,69 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useCallback, useEffect, useState, useMemo } from 'react';
 
+const noPagination = {
+    isLoading: false,
+    nextPage: () => { },
+    previousPage: () => { },
+    pageInfo: {
+        count: null,
+        hasNextPage: false,
+        hasPreviousPage: false,
+        endCursor: null,
+        startCursor: null,
+    },
+};
+
+const OVERSCAN = 10;
+/**
+ * Custom hook for implementing infinite scrolling in a table.
+ *
+ * @param {InfiniteScrollProps} props - The configuration object for the infinite scroll behavior.
+ * @returns {InfiniteScroll} An object containing properties and functions for infinite scrolling.
+ * @description
+ * This hook is used to implement infinite scrolling in a table. It calculates the necessary padding
+ * for virtual rows, provides a callback for fetching more data when the user scrolls to the bottom,
+ * and manages virtualized rows for efficient rendering.
+ * @example
+ * const { paddingTop, paddingBottom, fetchMoreOnBottomReached, rowVirtualizer, virtualRows } = useInfiniteScroll({
+ *   pagination: relayPaginationObject,
+ *   containerRef: tableContainerRef,
+ *   rowSize: 50,
+ * });
+ */
+const useInfiniteScroll = (props) => {
+    //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
+    const fetchMoreOnBottomReached = useCallback((containerRefElement) => {
+        var _a;
+        if (containerRefElement) {
+            const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+            //once the user has scrolled within OVERSCAN*rowheight (aka 10 items if overscan is 10) of the bottom of the table, fetch more data if there is any
+            if (scrollHeight - scrollTop - clientHeight < OVERSCAN * props.rowHeight &&
+                !props.pagination.isLoading &&
+                ((_a = props.pagination.pageInfo) === null || _a === void 0 ? void 0 : _a.hasNextPage)) {
+                props.pagination.nextPage();
+            }
+        }
+    }, [props.pagination, props.rowHeight]);
+    const rowVirtualizer = useVirtualizer({
+        count: props.rowSize,
+        getScrollElement: () => props.containerRef.current,
+        estimateSize: useCallback(() => props.rowHeight, [props.rowHeight]),
+        overscan: OVERSCAN,
+    });
+    useEffect(() => {
+        // this ensures the cache is cleared if the rowHeight changes
+        if (props.rowHeight) {
+            rowVirtualizer.measure();
+        }
+    }, [props.rowHeight, rowVirtualizer]);
+    const { getVirtualItems, getTotalSize, measureElement } = rowVirtualizer;
+    return {
+        fetchMoreOnBottomReached,
+        getTotalSize,
+        getVirtualItems,
+        measureElement,
+    };
+};
+
 const defaultPageSize = 50;
@@ -55,5 +121,5 @@ /**
         };
-    }, [props.pageSize, variables, nextPage, previousPage, isLoading, reset, pageInfo]);
+    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
 };
 
-export { useRelayPagination };
+export { noPagination, useInfiniteScroll, useRelayPagination };

package.json

 {
   "name": "@trackunit/react-table-pagination",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "repository": "https://github.com/Trackunit/manager",
@@ -10,3 +10,4 @@ "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "@tanstack/react-virtual": "3.2.0"
   },
@@ -13,0 +14,0 @@ "module": "./index.esm.js",

src/index.d.ts

@@ -0,1 +1,3 @@
+export * from "./lib/noPagination";
+export * from "./lib/useInfiniteScroll";
 export * from "./lib/useRelayPagination";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14963

increased by90.03%

Number of package files

9

increased by28.57%

Lines of code

324

increased by106.37%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@tanstack/react-virtual@3.2.0

• + Added@tanstack/react-virtual@3.2.0(transitive)

• + Added@tanstack/virtual-core@3.2.0(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)