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	Nichole Auer	Asia	Internet Explorer	19
2	Alda Little	Asia	Firefox	44
3	Marian Balistreri	Antarctica	Safari	74
4	Delbert Cole	Australia	Firefox	25
5	Shayna Lakin	South America	Safari	30
6	Concepcion Tillman	North America	Opera	74
7	Libbie Runolfsdottir	Australia	Safari	52
8	Dwight Dietrich	Africa	Firefox	25
9	Kelley Reichert	North America	Firefox	97
10	Mallory Bogisich	Australia	Safari	92
11	Millie Dickinson	Africa	Internet Explorer	16
12	Shanelle Larson	Europe	Firefox	30
13	Juliet Kuhic	Antarctica	Firefox	66
14	Ardith Paucek	Australia	Opera	35
15	Iliana Bergstrom	Asia	Edge	7
16	Carmella Wuckert	South America	Opera	6
17	Urban Crooks	North America	Opera	35
18	Roberto Walker	Antarctica	Internet Explorer	94
19	Mckayla Schamberger	South America	Safari	34
20	Clair Stark	Asia	Safari	77
21	Mylene Hickle	North America	Safari	33
22	Giles Orn	North America	Chrome	2
23	Ciara Krajcik	South America	Firefox	15
24	Katherine Turcotte	North America	Safari	67
25	Easton Monahan	Europe	Chrome	95
26	Rylan Shields	Africa	Opera	63
27	Hattie Leannon	Antarctica	Internet Explorer	65
28	Asia Nolan	Australia	Opera	72
29	Clay Stamm	Africa	Internet Explorer	5
30	Dakota Rau	Europe	Internet Explorer	61
31	Janick Kuhic	North America	Internet Explorer	21
32	Rae Hoeger	South America	Firefox	16
33	Nathen Halvorson	Australia	Safari	49
34	Rebeca Powlowski	Antarctica	Safari	33
35	Cale Heathcote	North America	Internet Explorer	11
36	Freda Gerhold	Asia	Edge	82
37	Leann Keeling	Africa	Edge	12
38	Kelsie Gerhold	Australia	Opera	85
39	Samara Rosenbaum	Africa	Internet Explorer	86
40	Nora Keebler	South America	Opera	8
41	Adelle Kris	South America	Internet Explorer	30
42	Aubree Turcotte	Europe	Opera	4
43	Michele Fahey	Australia	Chrome	34
44	Hobart Macejkovic	North America	Internet Explorer	88
45	Delpha Mann	North America	Opera	7
46	Mafalda Rutherford	North America	Firefox	2
47	Jaycee Von	South America	Internet Explorer	85
48	Travon Rogahn	Australia	Internet Explorer	59
49	Eldred Collier	North America	Safari	23
50	Audreanne Koelpin	Africa	Internet Explorer	44
51	Osborne Price	North America	Edge	82
52	Kendall McGlynn	Africa	Safari	44
53	Kristoffer Orn	South America	Edge	54
54	Evans Schneider	Asia	Safari	22
55	Josefa Runolfsdottir	Africa	Chrome	30
56	Eliane Parisian	Europe	Firefox	17
57	Stacy Miller	North America	Internet Explorer	76
58	Adrianna Mohr	Asia	Internet Explorer	17
59	Erling Schulist	North America	Chrome	70
60	Rhoda Bode	South America	Firefox	24

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