Infinite Grid Scrolling

Infinite scrolling is a technique of dynamically loading additional data based on the scroll position. Grids support infinite by setting the infinite flag and implementing the onFetchRecords callback which is responsible for fetching data based on current the visible page and active sorting and filtering parameters. Fetch result should be an object containing the records property containing an array of records; The lastPage flag should be set if there is no remaining data. Alternatively, totalRecordCount can be used to indicate total number of records. If necessary, the fetch result should include state to pass data such as pagination tokens or cursor positions between fetch results.

#	Name	Continent	Browser	Visits
1	Cameron Sauer	Australia	Chrome	58
2	Ramon Lockman	Asia	Opera	71
3	Rhea Rippin	Asia	Edge	9
4	Darien Rau	Africa	Safari	70
5	Hank Torphy	Antarctica	Safari	30
6	Karianne Towne	South America	Opera	22
7	Bryana Franecki	South America	Internet Explorer	37
8	Ward Schmitt	Asia	Opera	51
9	Coleman Schiller	Africa	Edge	74
10	Delta Johnson	Asia	Firefox	29
11	Johnnie Kertzmann	Australia	Firefox	16
12	Alejandrin Goodwin	Australia	Internet Explorer	25
13	Pedro Bruen	Africa	Chrome	33
14	Jonathan Hand	Asia	Opera	85
15	Jaquan Grant	Asia	Edge	28
16	Rosalee Schneider	Australia	Internet Explorer	45
17	Daphney Hudson	North America	Firefox	97
18	Maritza Goyette	North America	Internet Explorer	98
19	Deborah Emmerich	Europe	Chrome	3
20	Jamison Turcotte	North America	Edge	26
21	Yesenia Fadel	South America	Internet Explorer	61
22	Cristal Senger	Africa	Firefox	43
23	Sonny Osinski	North America	Internet Explorer	50
24	Herman Fadel	Australia	Edge	18
25	Bertrand Torp	Australia	Opera	8
26	Jaqueline Runolfsson	North America	Firefox	28
27	Sydney Kovacek	North America	Opera	87
28	Bennett Ferry	Antarctica	Opera	15
29	Ross Abshire	Antarctica	Internet Explorer	29
30	Parker Abernathy	North America	Edge	24
31	Alexandrea Dare	Australia	Opera	83
32	Johnny Lind	Australia	Firefox	31
33	Wilmer Gibson	North America	Edge	7
34	Antonietta Mante	South America	Firefox	42
35	Unique Gerlach	Europe	Firefox	6
36	Marty Moen	Antarctica	Firefox	78
37	Michale Davis	Africa	Edge	21
38	Brandi Hauck	Africa	Edge	94
39	Armando Thiel	Africa	Firefox	41
40	Breanne Jast	South America	Internet Explorer	61
41	Florencio Corwin	Asia	Chrome	92
42	Otto Donnelly	Africa	Opera	8
43	Ford Mueller	Europe	Firefox	78
44	Ayden Satterfield	Antarctica	Opera	27
45	Major Rosenbaum	Australia	Opera	59
46	Curtis Bauch	Asia	Opera	42
47	Ora Abshire	Asia	Internet Explorer	63
48	Heath Ullrich	Africa	Internet Explorer	41
49	Willa Yundt	Asia	Internet Explorer	83
50	Ronaldo Kub	Asia	Internet Explorer	54
51	Alexie Glover	South America	Chrome	91
52	Talon Cummings	Australia	Internet Explorer	31
53	Vita Murazik	Africa	Opera	77
54	Bryana Aufderhar	Australia	Firefox	87
55	Laurine Heathcote	Antarctica	Firefox	45
56	Lora Streich	Australia	Firefox	80
57	Dawson Lubowitz	Antarctica	Internet Explorer	30
58	Natalie Cormier	Europe	Safari	56
59	Providenci Flatley	Asia	Opera	9
60	Estrella Bechtelar	Africa	Edge	5

InfiniteScroll Grid

<Grid
    infinite
    style="height: 800px"
    lockColumnWidths
    cached
    keyField="question_id"
    columns={[
        {header: "#", field: "id", sortable: true},
        {header: "Name", field: "fullName", sortable: true},
        {header: "Continent", field: "continent", sortable: true},
        {header: "Browser", field: "browser", sortable: true},
        {header: "Visits", field: "visits", sortable: true, align: "right"}
    ]}
    selection={{type: KeySelection, bind: "$page.selection", keyField: "id"}}
    onFetchRecords={({page, pageSize}) => new Promise(resolve => {
        setTimeout(() => {
            let records = [];
            for (let i = 0; i < pageSize; i++)
                records.push({
                    id: (page - 1) * pageSize + i + 1,
                    fullName: casual.full_name,
                    continent: casual.continent,
                    browser: casual.browser,
                    title: casual.full_name,
                    visits: casual.integer(1, 100)
                });
            resolve({
                records,
                totalRecordCount: 100000
            });
        }, 100);
    })}
/>

Copied!Cx Fiddle

Documentation

Infinite Grid Scrolling