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	Ruben Gottlieb	North America	Opera	32
2	David Hamill	Europe	Internet Explorer	86
3	Antwan Jewess	South America	Opera	35
4	Roger Kulas	Africa	Safari	39
5	Albertha Koepp	Asia	Opera	15
6	Hyman Nolan	Australia	Internet Explorer	83
7	Jermaine Moore	North America	Internet Explorer	12
8	Dorian Hyatt	Australia	Firefox	52
9	Rosalyn Hilll	Australia	Safari	6
10	Austyn Kreiger	North America	Opera	35
11	Miles Hudson	South America	Chrome	71
12	Garry Schiller	North America	Safari	15
13	Abigayle Beahan	Asia	Safari	32
14	Delpha Tillman	Asia	Safari	8
15	Imogene Crist	Africa	Firefox	84
16	Russell Gutkowski	South America	Opera	28
17	Dalton Monahan	Asia	Edge	40
18	Nola Robel	Europe	Safari	85
19	Johnnie Morissette	Africa	Opera	69
20	Myrtle Kshlerin	Asia	Internet Explorer	70
21	Skylar Kihn	Africa	Firefox	29
22	Tiara Gulgowski	Antarctica	Safari	72
23	Monique Balistreri	South America	Safari	38
24	Albina Cummings	South America	Internet Explorer	21
25	Cydney Shanahan	South America	Chrome	68
26	Zora Carter	Australia	Opera	28
27	Jasper Kihn	South America	Firefox	96
28	Sandra Haag	North America	Chrome	39
29	Beulah Buckridge	Africa	Chrome	12
30	Earlene King	Africa	Internet Explorer	65
31	Emerson Mosciski	Asia	Firefox	95
32	Leslie Keebler	Asia	Safari	6
33	Llewellyn Fay	Asia	Edge	42
34	Caleb Oberbrunner	North America	Opera	90
35	Ian Emard	Antarctica	Chrome	13
36	Vivian Weimann	Australia	Firefox	64
37	Gregorio Keeling	Africa	Internet Explorer	36
38	Lorenzo Quitzon	Asia	Firefox	74
39	Delpha Osinski	Australia	Internet Explorer	77
40	Assunta Lemke	Antarctica	Firefox	14
41	Nelson Beer	Asia	Opera	10
42	Lorine Larkin	Australia	Internet Explorer	68
43	Violet Schroeder	South America	Edge	49
44	Jeramie Jacobs	Africa	Edge	44
45	Allen Schulist	Antarctica	Internet Explorer	12
46	Cecil Wiza	Africa	Internet Explorer	48
47	Eulalia Wyman	Africa	Firefox	16
48	Nathen DuBuque	North America	Internet Explorer	33
49	Margaretta Morar	Africa	Opera	11
50	Roberta Schowalter	Europe	Internet Explorer	44
51	Wyatt Reichel	Australia	Chrome	30
52	Alessia Hauck	Africa	Safari	80
53	Letitia Mertz	Africa	Safari	89
54	Koby Hayes	Australia	Chrome	34
55	Jayce Balistreri	Europe	Firefox	40
56	Adelbert Okuneva	Europe	Firefox	16
57	Breana Lueilwitz	Asia	Safari	48
58	Dorcas Balistreri	Asia	Internet Explorer	7
59	Alexis Jacobs	Antarctica	Edge	61
60	Lizzie Daugherty	North America	Safari	84

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