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	Alaina Corwin	North America	Firefox	63
2	Savannah Nienow	Africa	Firefox	75
3	Nathanial Treutel	Asia	Edge	76
4	Gracie White	Australia	Safari	36
5	Maia Franecki	Asia	Opera	35
6	Keshawn Heaney	South America	Chrome	59
7	Kailee Grant	Europe	Opera	82
8	Joel Corkery	South America	Edge	93
9	Caterina Gleason	North America	Edge	65
10	Darrion Luettgen	South America	Opera	80
11	Jaycee Braun	Antarctica	Firefox	27
12	Margarett West	South America	Safari	22
13	Milton Kutch	Australia	Firefox	83
14	Harmony Koch	Australia	Safari	77
15	Peggie Conroy	Australia	Safari	33
16	Trace Lockman	North America	Firefox	21
17	Petra Jenkins	Australia	Edge	37
18	Josue Wintheiser	South America	Chrome	44
19	Rosalyn Hegmann	North America	Firefox	83
20	Joelle Hegmann	Africa	Safari	65
21	Neha Ullrich	Australia	Chrome	62
22	Taylor Abernathy	North America	Internet Explorer	13
23	Amanda Smith	Asia	Opera	4
24	Karlee Lynch	South America	Opera	31
25	Itzel Nienow	South America	Opera	95
26	Pansy Douglas	South America	Safari	37
27	Emiliano Quigley	Antarctica	Safari	39
28	Mattie Wilkinson	North America	Internet Explorer	42
29	Stephon Waelchi	North America	Safari	90
30	Gene Johns	North America	Safari	62
31	Annetta Batz	Antarctica	Firefox	20
32	Verlie Schamberger	Africa	Internet Explorer	36
33	Maryam Keeling	North America	Safari	67
34	Elinor Bergstrom	Australia	Safari	85
35	Hector Homenick	Europe	Internet Explorer	21
36	Greg Russel	Antarctica	Safari	50
37	Reese Kemmer	Asia	Firefox	66
38	Marcel Johns	Australia	Firefox	43
39	Winona Mertz	South America	Firefox	66
40	Xavier Bahringer	Australia	Firefox	22
41	Isac Bergstrom	South America	Safari	2
42	Yadira Brakus	Africa	Safari	50
43	Luz Crona	Africa	Internet Explorer	60
44	Rosario Bode	Asia	Opera	42
45	Alexanne Stokes	Europe	Safari	44
46	Blaise Howe	North America	Edge	73
47	Quentin Macejkovic	Africa	Firefox	93
48	Jaden Douglas	Asia	Internet Explorer	25
49	Gilberto Cartwright	Africa	Safari	71
50	Bette Wintheiser	Asia	Safari	85
51	Alanna Legros	Australia	Opera	10
52	Zackary Smith	Asia	Chrome	81
53	Phyllis Orn	South America	Internet Explorer	1
54	Dan Simonis	South America	Internet Explorer	44
55	Millie Huels	Africa	Firefox	84
56	Jennifer Vandervort	North America	Internet Explorer	97
57	Matilde Wilderman	South America	Firefox	40
58	Alisha Batz	Africa	Safari	82
59	Abdiel Padberg	Asia	Edge	59
60	Antonia Gutmann	Australia	Safari	37

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