Lazy loading with pagination

In this tutorial, you will load grid data page by page as the user scrolls to the bottom of the grid. You will learn how to use the afterScrollVertically hook and hot.updateData() to append new rows without resetting the scroll position or grid state.

1
import { useRef, useState, useCallback, useEffect } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
registerAllModules();
6

7
/* start:skip-in-preview */
8
const INITIAL_DATA = [
9
  { id: 1, title: 'Set up CI pipeline', completed: false, userId: 3 },
10
  { id: 2, title: 'Write unit tests for auth module', completed: true, userId: 1 },
11
  { id: 3, title: 'Review pull request #42', completed: false, userId: 2 },
12
  { id: 4, title: 'Update API documentation', completed: true, userId: 1 },
13
  { id: 5, title: 'Fix login redirect bug', completed: true, userId: 4 },
14
  { id: 6, title: 'Deploy staging environment', completed: false, userId: 3 },
15
  { id: 7, title: 'Implement dark mode toggle', completed: false, userId: 2 },
16
  { id: 8, title: 'Optimize database queries', completed: true, userId: 5 },
17
  { id: 9, title: 'Add error boundary components', completed: false, userId: 1 },
18
  { id: 10, title: 'Migrate to TypeScript', completed: false, userId: 2 },
19
  { id: 11, title: 'Set up monitoring alerts', completed: true, userId: 3 },
20
  { id: 12, title: 'Refactor form validation logic', completed: false, userId: 4 },
21
  { id: 13, title: 'Add keyboard shortcuts guide', completed: true, userId: 1 },
22
  { id: 14, title: 'Review security audit findings', completed: false, userId: 5 },
23
  { id: 15, title: 'Create onboarding checklist', completed: true, userId: 2 },
24
  { id: 16, title: 'Update dependencies to latest', completed: false, userId: 3 },
25
  { id: 17, title: 'Write release notes for v2.0', completed: false, userId: 1 },
26
  { id: 18, title: 'Set up feature flags service', completed: true, userId: 4 },
27
  { id: 19, title: 'Implement CSV export feature', completed: false, userId: 2 },
28
  { id: 20, title: 'Add pagination to task list', completed: true, userId: 5 },
29
];
30
/* end:skip-in-preview */
31

32
const LOAD_THRESHOLD = 5;
33
const PAGE_SIZE = 20;
34
// JSONPlaceholder has 200 todos total (10 pages of 20)
35
const TOTAL_PAGES = 10;
36

37
const ExampleComponent = () => {
38
  const hotRef = useRef(null);
39
  const currentPage = useRef(1);
40
  const isLoading = useRef(false);
41
  const hasMore = useRef(true);
42
  const loadedData = useRef([...INITIAL_DATA]);
43
  // Always visible -- no blinking; text only changes at end-of-data or on error
44
  const [statusText, setStatusText] = useState('Scroll table to load more records');
45

46
  const fetchNextPage = useCallback(async () => {
47
    if (isLoading.current || !hasMore.current) {
48
      return;
49
    }
50

51
    isLoading.current = true;
52
    hotRef.current?.hotInstance?.getPlugin('loading').show();
53

54
    try {
55
      const nextPage = currentPage.current + 1;
56
      const response = await fetch(
57
        `https://jsonplaceholder.typicode.com/todos?_page=${nextPage}&_limit=${PAGE_SIZE}`
58
      );
59

60
      if (!response.ok) {
61
        throw new Error(`HTTP error: ${response.status}`);
62
      }
63

64
      const newRows = await response.json();
65

66
      if (newRows.length === 0 || nextPage >= TOTAL_PAGES) {
67
        hasMore.current = false;
68
        setStatusText('All tasks loaded.');
69
      } else {
70
        currentPage.current = nextPage;
71
        loadedData.current = [...loadedData.current, ...newRows];
72
        // `updateData()` appends rows without resetting scroll position
73
        hotRef.current?.hotInstance?.updateData(loadedData.current);
74
      }
75
    } catch {
76
      setStatusText('Failed to load more tasks. Scroll down to retry.');
77
      isLoading.current = false;
78
      hotRef.current?.hotInstance?.getPlugin('loading').hide();
79

80
      return;
81
    }
82

83
    isLoading.current = false;
84
    hotRef.current?.hotInstance?.getPlugin('loading').hide();
85
  }, []);
86

87
  useEffect(() => {
88
    fetchNextPage();
89
  }, [fetchNextPage]);
90

91
  return (
92
    <>
93
      <HotTable
94
        ref={hotRef}
95
        data={INITIAL_DATA}
96
        colHeaders={['Task Title', 'Status', 'Assignee']}
97
        columns={[
98
          { data: 'title', type: 'text', width: 400 },
99
          { data: 'completed', type: 'checkbox', width: 80, className: 'htCenter' },
100
          { data: 'userId', type: 'numeric', width: 100 },
101
        ]}
102
        rowHeaders={true}
103
        height={400}
104
        width="100%"
105
        stretchH="all"
106
        autoWrapRow={true}
107
        loading={true}
108
        afterScrollVertically={function () {
109
          const lastVisibleRow = this.view.getLastFullyVisibleRow();
110
          const totalRows = this.countRows();
111

112
          if (lastVisibleRow >= 0 && lastVisibleRow >= totalRows - LOAD_THRESHOLD) {
113
            fetchNextPage();
114
          }
115
        }}
116
        licenseKey="non-commercial-and-evaluation"
117
      />
118
      <div style={{ padding: '8px', textAlign: 'center', color: '#666', fontSize: '13px' }}>
119
        {statusText}
120
      </div>
121
    </>
122
  );
123
};
124

125
export default ExampleComponent;

1
import { useRef, useState, useCallback, useEffect } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
registerAllModules();
6

7
/* start:skip-in-preview */
8
type TaskRow = {
9
  id: number;
10
  title: string;
11
  completed: boolean;
12
  userId: number;
13
};
14

15
const INITIAL_DATA: TaskRow[] = [
16
  { id: 1, title: 'Set up CI pipeline', completed: false, userId: 3 },
17
  { id: 2, title: 'Write unit tests for auth module', completed: true, userId: 1 },
18
  { id: 3, title: 'Review pull request #42', completed: false, userId: 2 },
19
  { id: 4, title: 'Update API documentation', completed: true, userId: 1 },
20
  { id: 5, title: 'Fix login redirect bug', completed: true, userId: 4 },
21
  { id: 6, title: 'Deploy staging environment', completed: false, userId: 3 },
22
  { id: 7, title: 'Implement dark mode toggle', completed: false, userId: 2 },
23
  { id: 8, title: 'Optimize database queries', completed: true, userId: 5 },
24
  { id: 9, title: 'Add error boundary components', completed: false, userId: 1 },
25
  { id: 10, title: 'Migrate to TypeScript', completed: false, userId: 2 },
26
  { id: 11, title: 'Set up monitoring alerts', completed: true, userId: 3 },
27
  { id: 12, title: 'Refactor form validation logic', completed: false, userId: 4 },
28
  { id: 13, title: 'Add keyboard shortcuts guide', completed: true, userId: 1 },
29
  { id: 14, title: 'Review security audit findings', completed: false, userId: 5 },
30
  { id: 15, title: 'Create onboarding checklist', completed: true, userId: 2 },
31
  { id: 16, title: 'Update dependencies to latest', completed: false, userId: 3 },
32
  { id: 17, title: 'Write release notes for v2.0', completed: false, userId: 1 },
33
  { id: 18, title: 'Set up feature flags service', completed: true, userId: 4 },
34
  { id: 19, title: 'Implement CSV export feature', completed: false, userId: 2 },
35
  { id: 20, title: 'Add pagination to task list', completed: true, userId: 5 },
36
];
37
/* end:skip-in-preview */
38

39
const LOAD_THRESHOLD = 5;
40
const PAGE_SIZE = 20;
41
// JSONPlaceholder has 200 todos total (10 pages of 20)
42
const TOTAL_PAGES = 10;
43

44
const ExampleComponent = () => {
45
  const hotRef = useRef<HotTableRef>(null);
46
  const currentPage = useRef(1);
47
  const isLoading = useRef(false);
48
  const hasMore = useRef(true);
49
  const loadedData = useRef<TaskRow[]>([...INITIAL_DATA]);
50
  // Always visible -- no blinking; text only changes at end-of-data or on error
51
  const [statusText, setStatusText] = useState('Scroll table to load more records');
52

53
  const fetchNextPage = useCallback(async (): Promise<void> => {
54
    if (isLoading.current || !hasMore.current) {
55
      return;
56
    }
57

58
    isLoading.current = true;
59
    hotRef.current?.hotInstance?.getPlugin('loading').show();
60

61
    try {
62
      const nextPage = currentPage.current + 1;
63
      const response = await fetch(
64
        `https://jsonplaceholder.typicode.com/todos?_page=${nextPage}&_limit=${PAGE_SIZE}`
65
      );
66

67
      if (!response.ok) {
68
        throw new Error(`HTTP error: ${response.status}`);
69
      }
70

71
      const newRows: TaskRow[] = await response.json();
72

73
      if (newRows.length === 0 || nextPage >= TOTAL_PAGES) {
74
        hasMore.current = false;
75
        setStatusText('All tasks loaded.');
76
      } else {
77
        currentPage.current = nextPage;
78
        loadedData.current = [...loadedData.current, ...newRows];
79
        // `updateData()` appends rows without resetting scroll position
80
        hotRef.current?.hotInstance?.updateData(loadedData.current);
81
      }
82
    } catch {
83
      setStatusText('Failed to load more tasks. Scroll down to retry.');
84
      isLoading.current = false;
85
      hotRef.current?.hotInstance?.getPlugin('loading').hide();
86

87
      return;
88
    }
89

90
    isLoading.current = false;
91
    hotRef.current?.hotInstance?.getPlugin('loading').hide();
92
  }, []);
93

94
  useEffect(() => {
95
    fetchNextPage();
96
  }, [fetchNextPage]);
97

98
  return (
99
    <>
100
      <HotTable
101
        ref={hotRef}
102
        data={INITIAL_DATA}
103
        colHeaders={['Task Title', 'Status', 'Assignee']}
104
        columns={[
105
          { data: 'title', type: 'text', width: 400 },
106
          { data: 'completed', type: 'checkbox', width: 80, className: 'htCenter' },
107
          { data: 'userId', type: 'numeric', width: 100 },
108
        ]}
109
        rowHeaders={true}
110
        height={400}
111
        width="100%"
112
        stretchH="all"
113
        autoWrapRow={true}
114
        loading={true}
115
        afterScrollVertically={function (this: Handsontable) {
116
          const lastVisibleRow = this.view.getLastFullyVisibleRow();
117
          const totalRows = this.countRows();
118

119
          if (lastVisibleRow >= 0 && lastVisibleRow >= totalRows - LOAD_THRESHOLD) {
120
            fetchNextPage();
121
          }
122
        }}
123
        licenseKey="non-commercial-and-evaluation"
124
      />
125
      <div style={{ padding: '8px', textAlign: 'center', color: '#666', fontSize: '13px' }}>
126
        {statusText}
127
      </div>
128
    </>
129
  );
130
};
131

132
export default ExampleComponent;

Overview

Difficulty: Intermediate Time: ~25 minutes

This tutorial shows how to load data in pages as the user scrolls toward the bottom of a Handsontable grid. The grid starts with an initial data set and silently fetches the next page when the user approaches the last visible row — without resetting the scroll position, selection, or column configuration.

This pattern is useful when working with large remote data sets where loading everything upfront would be too slow or memory-intensive.

What You’ll Build

A task-list grid that:

Displays an initial page of project tasks on load
Detects when the user scrolls near the last row using afterScrollVertically
Fetches the next page from a paginated REST API
Appends the new rows with hot.updateData() — preserving scroll position
Shows a loading indicator while the fetch is in progress
Stops fetching once all pages have been loaded

Before you begin

You need a working Handsontable installation. See the Getting started guide.
This example fetches data from JSONPlaceholder, a free public API. An active internet connection is required to run the live demo. The grid falls back to the built-in INITIAL_DATA array when the network is unavailable.
Familiarity with async/await and the browser fetch API is helpful.

Step 1 — Set up state and constants

The example tracks three flags that control fetching behavior:

1
let currentPage = 1;
2
let isLoading = false;
3
let hasMore = true;

currentPage — the last page that was successfully loaded. Increments after each successful fetch.
isLoading — prevents duplicate requests. Set to true at the start of a fetch and back to false when it completes.
hasMore — set to false when the API returns an empty result or the last page is reached. Stops any further fetch attempts.

You also define two constants that control fetch timing:

1
const LOAD_THRESHOLD = 5;
2
const PAGE_SIZE = 20;

LOAD_THRESHOLD is the number of rows from the bottom of the loaded data that triggers the next fetch. A value of 5 means the fetch starts when the user is 5 rows away from the last row — giving the network request time to complete before the user reaches the end.

Step 2 — Create the loading indicator

The loading indicator is created in JavaScript and inserted below the grid container:

1
const loadingIndicator = document.createElement('div');
2

3
loadingIndicator.style.cssText =
4
  'display:none; padding:8px; text-align:center; color:#666; font-size:13px;';
5
loadingIndicator.textContent = 'Loading more tasks...';
6
container.insertAdjacentElement('afterend', loadingIndicator);

You show it at the start of a fetch and hide it when the fetch completes. When all data is loaded, you update its text to “All tasks loaded.” and leave it visible so the user knows there is nothing more to fetch.

Step 3 — Write the `fetchNextPage` function

This function is the core of the recipe. It guards against duplicate calls, fetches the next page, and appends the rows:

1
async function fetchNextPage() {
2
  if (isLoading || !hasMore) {
3
    return;
4
  }
5

6
  isLoading = true;
7
  loadingIndicator.style.display = 'block';
8

9
  try {
10
    const nextPage = currentPage + 1;
11
    const response = await fetch(
12
      `https://jsonplaceholder.typicode.com/todos?_page=${nextPage}&_limit=${PAGE_SIZE}`
13
    );
14

15
    if (!response.ok) {
16
      throw new Error(`HTTP error: ${response.status}`);
17
    }
18

19
    const newRows = await response.json();
20

21
    if (newRows.length === 0 || nextPage >= TOTAL_PAGES) {
22
      hasMore = false;
23
      loadingIndicator.textContent = 'All tasks loaded.';
24
      loadingIndicator.style.display = 'block';
25
    } else {
26
      currentPage = nextPage;
27
      loadedData = [...loadedData, ...newRows];
28
      hot.updateData(loadedData);
29
    }
30
  } catch {
31
    loadingIndicator.textContent = 'Failed to load more tasks. Scroll down to retry.';
32
    loadingIndicator.style.display = 'block';
33
    isLoading = false;
34

35
    return;
36
  }
37

38
  isLoading = false;
39

40
  if (hasMore) {
41
    loadingIndicator.style.display = 'none';
42
  }
43
}

What’s happening:

The if (isLoading || !hasMore) guard at the top ensures the function returns immediately if a request is already in flight or no more data exists. This prevents duplicate requests caused by fast scrolling.
fetch() requests the next page using _page and _limit query parameters — a standard pagination pattern supported by most REST APIs.
When the response arrives, loadedData is updated using the spread operator to create a new array: [...loadedData, ...newRows]. This is required because updateData() expects a new array reference to detect the change.
hot.updateData(loadedData) replaces the grid’s data source. Unlike loadData(), updateData() does not reset scroll position, selection state, or column configuration — the user sees the new rows appended at the bottom without any visual jump.
Errors are caught and shown in the indicator. isLoading is reset to false so the user can retry by scrolling again.

Why updateData() and not loadData()?

loadData() resets the entire grid state — it scrolls back to the top, clears the selection, and re-renders from scratch. That would break the scrolling experience. updateData() performs a diff and only updates what changed, leaving the viewport position intact.

Step 4 — Initialize the grid and attach the scroll hook

Create the grid with the initial data, then use afterScrollVertically to detect proximity to the last row:

1
const hot = new Handsontable(container, {
2
  data: loadedData,
3
  colHeaders: ['ID', 'Task Title', 'Status', 'Assignee'],
4
  columns: [
5
    { data: 'id', type: 'numeric', width: 60, readOnly: true },
6
    { data: 'title', type: 'text', width: 340 },
7
    { data: 'completed', type: 'checkbox', width: 80, className: 'htCenter' },
8
    { data: 'userId', type: 'numeric', width: 100 },
9
  ],
10
  rowHeaders: true,
11
  height: 400,
12
  afterScrollVertically() {
13
    const lastVisibleRow = this.view.getLastFullyVisibleRow();
14
    const totalRows = this.countRows();
15

16
    if (lastVisibleRow >= 0 && lastVisibleRow >= totalRows - LOAD_THRESHOLD) {
17
      fetchNextPage();
18
    }
19
  },
20
  licenseKey: 'non-commercial-and-evaluation',
21
});

What’s happening:

afterScrollVertically fires after every vertical scroll event. Inside the callback, this refers to the Handsontable instance.
this.view.getLastFullyVisibleRow() returns the visual index of the last row that is fully visible in the viewport. It returns -1 when no rows are visible, so the >= 0 check prevents triggering a fetch during the initial render.
this.countRows() returns the total number of rows currently loaded in the grid.
When lastVisibleRow >= totalRows - LOAD_THRESHOLD, the user is within LOAD_THRESHOLD rows of the bottom. This triggers fetchNextPage(), which will be a no-op if isLoading is already true.

Why use afterScrollVertically instead of a scroll event listener?

Attaching a native scroll event listener to the grid container requires knowing the internal scroll element, which is an implementation detail that can change. afterScrollVertically is a stable public API that fires at the right time, after Handsontable has updated the viewport.

Step 5 — Load the first remote page on init

After creating the grid, call fetchNextPage() once to replace the built-in INITIAL_DATA with live server data:

1
fetchNextPage();

This runs immediately after the grid initializes. The grid displays INITIAL_DATA for a moment while the first network request is in flight, then updateData() replaces it with the server response. If the network is unavailable, the grid keeps showing INITIAL_DATA.

How It Works - Complete Flow

Grid initializes with INITIAL_DATA (20 local rows) and fetchNextPage() runs immediately.
First remote fetch loads page 2 from the API. updateData() replaces INITIAL_DATA with 20 server rows. currentPage becomes 2.
User scrolls down. afterScrollVertically fires on every scroll event. When lastVisibleRow >= totalRows - 5, fetchNextPage() is called.
Guard check: if isLoading is true (a fetch is already in flight), the function returns immediately. This prevents duplicate requests no matter how fast the user scrolls.
Fetch runs: isLoading becomes true, the loading indicator appears, and the next page is fetched.
Response arrives: new rows are spread into loadedData, updateData() appends them to the grid, scroll position is unchanged, and isLoading resets to false.
End of data: when nextPage >= TOTAL_PAGES or the response is empty, hasMore becomes false. The loading indicator shows “All tasks loaded.” and all future fetchNextPage() calls return immediately.

What you learned

How to use afterScrollVertically to detect when the user is near the bottom of loaded data.
Why hot.updateData() is the correct method for appending rows — it preserves scroll position and column state, unlike hot.loadData().
How to use isLoading, hasMore, and currentPage flags to prevent duplicate requests and handle end-of-data gracefully.
How to show and update a loading indicator during an async fetch.

Next steps

Replace the JSONPlaceholder API with your own paginated endpoint. Most REST APIs support _page/_limit or offset/limit style pagination.
Add column sorting or filtering. When the user sorts a column, you may want to reset currentPage and loadedData and reload from page 1 with the sort parameters forwarded to the API.
Combine with the DataProvider plugin for a fully managed server-backed data grid with built-in loading states and error handling.