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	Bryana Torphy	Africa	Internet Explorer	59
2	Mazie Klein	South America	Safari	75
3	Ahmad Wyman	North America	Chrome	75
4	Eryn Fay	Europe	Firefox	28
5	Rosina Pacocha	Antarctica	Firefox	63
6	Cortney Bernier	South America	Firefox	43
7	Shanny Romaguera	Asia	Internet Explorer	40
8	Modesta Murphy	Africa	Opera	28
9	Grace Wiza	Australia	Opera	23
10	Roxane Kautzer	Australia	Opera	55
11	Jeff Gerlach	North America	Edge	3
12	Veronica Rowe	Asia	Firefox	21
13	Karson Nicolas	Europe	Firefox	12
14	Jerrold Lind	South America	Internet Explorer	33
15	Arjun Schroeder	Asia	Safari	57
16	Cordia Schaden	Asia	Opera	69
17	Magdalen Heidenreich	North America	Internet Explorer	37
18	Niko Volkman	Australia	Opera	84
19	Flavie Bauch	Africa	Chrome	59
20	Sterling Buckridge	Europe	Internet Explorer	63
21	Andrew Gerlach	Asia	Opera	41
22	Stanford Marks	South America	Edge	31
23	Heidi Rempel	North America	Internet Explorer	31
24	Dasia Quitzon	Asia	Safari	46
25	Eusebio Brakus	Africa	Safari	45
26	Tressie Vandervort	South America	Edge	92
27	Raleigh Hahn	South America	Safari	10
28	Mohammad Hermiston	Asia	Safari	37
29	Reanna Heathcote	North America	Chrome	19
30	Zella Hodkiewicz	North America	Opera	3
31	Chester Kiehn	Europe	Safari	7
32	Rey Mayert	Australia	Safari	62
33	Rocio Gorczany	North America	Internet Explorer	33
34	Missouri Kunze	Australia	Safari	31
35	Rodrick Cronin	Antarctica	Chrome	91
36	Grayson Bailey	North America	Opera	28
37	Shawna Dickinson	Africa	Opera	20
38	Tyrese Jakubowski	Australia	Firefox	12
39	Dedrick Hoeger	Asia	Firefox	60
40	Ethel Graham	Africa	Edge	24
41	Ashton Robel	North America	Chrome	11
42	Gretchen Hettinger	Europe	Chrome	37
43	Shany Jones	Africa	Safari	14
44	Kieran Jerde	South America	Firefox	15
45	Watson Sipes	Africa	Internet Explorer	13
46	Jeffry Wilderman	Europe	Internet Explorer	76
47	Webster Kovacek	Africa	Edge	61
48	Camille Hilll	Australia	Chrome	72
49	Floy Ryan	Africa	Internet Explorer	67
50	Christine Stroman	South America	Firefox	37
51	Keely Williamson	North America	Firefox	15
52	Kelsi Turner	Antarctica	Opera	84
53	Chanelle Hickle	South America	Chrome	63
54	Cletus Haag	Africa	Firefox	91
55	Wendell Kuhic	Europe	Safari	48
56	Barbara Ziemann	South America	Opera	28
57	Modesto Baumbach	South America	Firefox	30
58	Vallie Maggio	Australia	Safari	46
59	Gilberto Jacobs	North America	Edge	5
60	Kathlyn Pagac	Antarctica	Opera	96

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