fix: make loadMoreOffset dynamic

Author: rsbh

packages/raystack/components/data-table/components/virtualized-content.tsx

@@ -163,6 +163,7 @@ export function VirtualizedContent({
   rowHeight = 40,
   groupHeaderHeight,
   overscan = 5,
+  loadMoreOffset = 100,
   emptyState,
   zeroState,
   classNames = {}
@@ -191,10 +192,10 @@ export function VirtualizedContent({
     if (!scrollContainerRef.current || isLoading) return;
     const { scrollTop, scrollHeight, clientHeight } =
       scrollContainerRef.current;
-    if (scrollHeight - scrollTop - clientHeight < 100) {
+    if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {
       loadMoreData();
     }
-  }, [isLoading, loadMoreData]);
+  }, [isLoading, loadMoreData, loadMoreOffset]);
 
   const hasData = rows?.length > 0 || isLoading;
 

packages/raystack/components/data-table/data-table.types.tsx

@@ -128,10 +128,16 @@ export type DataTableContentBaseProps = {
 export type DataTableContentProps = DataTableContentBaseProps;
 
 export type VirtualizedContentProps = DataTableContentBaseProps & {
+  /** Height of the scroll container. */
   height?: number | string;
+  /** Height of each row in pixels. */
   rowHeight?: number;
+  /** Height of group header rows in pixels. Falls back to rowHeight if not set. */
   groupHeaderHeight?: number;
+  /** Number of rows to render outside visible area. */
   overscan?: number;
+  /** Distance in pixels from bottom to trigger load more. */
+  loadMoreOffset?: number;
 };
 
 export type TableQueryUpdateFn = (query: InternalQuery) => InternalQuery;