diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte
index 625f7b0c8..faf745436 100644
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/packages/web/src/datagrid/DataGridCore.svelte
@@ -164,7 +164,7 @@
   import axios from '../utility/axios';
   import { copyTextToClipboard } from '../utility/clipboard';
 
-  export let loadNextData = undefined;
+  export let onLoadNextData = undefined;
   export let grider = undefined;
   export let display: GridDisplay = undefined;
   export let conid = undefined;
@@ -286,6 +286,12 @@
     copyTextToClipboard(text);
   }
 
+  export function loadNextDataIfNeeded() {
+    if (onLoadNextData && firstVisibleRowScrollIndex + visibleRowCountUpperBound >= grider.rowCount) {
+      onLoadNextData();
+    }
+  }
+
   $: autofillMarkerCell =
     selectedCells && selectedCells.length > 0 && _.uniq(selectedCells.map(x => x[0])).length == 1
       ? [_.max(selectedCells.map(x => x[0])), _.max(selectedCells.map(x => x[1]))]
@@ -326,8 +332,8 @@
   $: maxScrollColumn = columnSizes.scrollInView(0, columns.length - 1 - columnSizes.frozenCount, gridScrollAreaWidth);
 
   $: {
-    if (loadNextData && firstVisibleRowScrollIndex + visibleRowCountUpperBound >= grider.rowCount) {
-      loadNextData();
+    if (onLoadNextData && firstVisibleRowScrollIndex + visibleRowCountUpperBound >= grider.rowCount && rowHeight > 0) {
+      onLoadNextData();
     }
   }
 
diff --git a/packages/web/src/datagrid/JslDataGridCore.svelte b/packages/web/src/datagrid/JslDataGridCore.svelte
index 4c606eb12..a55baa6d2 100644
--- a/packages/web/src/datagrid/JslDataGridCore.svelte
+++ b/packages/web/src/datagrid/JslDataGridCore.svelte
@@ -48,7 +48,7 @@
   let changeIndex = 0;
   let rowCountLoaded = null;
 
-  const throttleLoadNext = _.throttle(() => domGrid.loadNextData(), 500);
+  const throttleLoadNext = _.throttle(() => domGrid.resetLoadedAll(), 500);
 
   const handleJslDataStats = stats => {
     if (stats.changeIndex < changeIndex) return;
diff --git a/packages/web/src/datagrid/LoadingDataGridCore.svelte b/packages/web/src/datagrid/LoadingDataGridCore.svelte
index 77d75b9f0..41d829fcb 100644
--- a/packages/web/src/datagrid/LoadingDataGridCore.svelte
+++ b/packages/web/src/datagrid/LoadingDataGridCore.svelte
@@ -15,15 +15,22 @@
   let loadedTime = new Date().getTime();
   let allRowCount = null;
   let errorMessage = null;
+  let domGrid;
+
   const loadNextDataRef = { current: false };
   const loadedTimeRef = { current: null };
 
+  export function resetLoadedAll() {
+    isLoadedAll = false;
+    domGrid.loadNextDataIfNeeded();
+  }
+
   const handleLoadRowCount = async () => {
     const rowCount = await loadRowCount($$props);
     allRowCount = rowCount;
   };
 
-  export async function loadNextData() {
+  async function loadNextData() {
     if (isLoading) return;
     loadNextDataRef.current = false;
     isLoading = true;
@@ -102,8 +109,9 @@
 </script>
 
 <DataGridCore
+  bind:this={domGrid}
   {...$$props}
-  loadNextData={handleLoadNextData}
+  onLoadNextData={handleLoadNextData}
   {grider}
   {isLoading}
   {allRowCount}