Grid Buffering

The Grid widget supports buffered rendering which dramatically improves performance with many rows. Set grid to buffered mode and tweak bufferSize and bufferStep parameters for the best scrolling experience.

Name	Continent	Browser	OS	Visits
Robyn Gerlach	South America	Opera	Mac OS	97
Laurianne Paucek	South America	Opera	Mac OS	10
Vanessa Zboncak	Africa	Safari	Android	7
Ashleigh Morar	Africa	Chrome	iOS	44
Oceane Steuber	Asia	Edge	Windows	3
Zita Lockman	Asia	Chrome	Android	39
Rowena Jenkins	Australia	Safari	Ubuntu	27
Wyman Daniel	Asia	Safari	Ubuntu	41
Amani Nader	Australia	Chrome	Android	92
Reggie Dickens	North America	Safari	Windows	90
Ayden Nader	North America	Firefox	Mac OS	48
Sim Nitzsche	Antarctica	Internet Explorer	iOS	93
Aryanna Sporer	South America	Edge	Ubuntu	84
Buck Schmeler	Asia	Safari	iOS	92
Joelle Corwin	North America	Edge	Mac OS	68
Zola Kuhlman	Africa	Opera	Ubuntu	66
Berta Senger	North America	Opera	Windows	3
Sandrine Kovacek	South America	Chrome	Mac OS	12
Roxane Vandervort	North America	Internet Explorer	Windows	70
Tod Hilll	Australia	Firefox	Android	97
Tyreek Buckridge	Asia	Opera	Mac OS	39
Cordelia Stehr	South America	Internet Explorer	Ubuntu	50
Dahlia Padberg	Antarctica	Opera	iOS	3
Taylor Marks	Australia	Opera	Windows	95
Estell Dicki	Australia	Safari	Ubuntu	38
Clifford Raynor	Europe	Opera	Mac OS	76
Raymundo Bernier	Asia	Internet Explorer	iOS	33
Bailey Bergnaum	North America	Opera	Ubuntu	96
Ricardo Hoeger	North America	Firefox	Mac OS	26
Emanuel Feeney	Africa	Internet Explorer	Android	88
Valentina Grimes	South America	Internet Explorer	Windows	45
Cory Hermann	Australia	Internet Explorer	iOS	50
Jordy Schultz	Asia	Opera	Mac OS	88
Ima Gutmann	North America	Firefox	iOS	16
William Breitenberg	North America	Firefox	Windows	84
Katelyn Franecki	Antarctica	Firefox	Ubuntu	47
Arvilla Wehner	Australia	Firefox	Windows	29
Hipolito Corwin	North America	Opera	Windows	9
Eleanore Pouros	Australia	Safari	Windows	6
Keely Sawayn	Australia	Firefox	Ubuntu	12
Sofia Kub	Africa	Internet Explorer	Ubuntu	93
Emelia Wintheiser	Asia	Internet Explorer	Ubuntu	59
Arthur Kilback	North America	Safari	iOS	91
Trudie Lindgren	North America	Edge	iOS	35
Angela Cremin	Africa	Edge	Windows	54
Glennie Wintheiser	South America	Firefox	Mac OS	21
Evelyn Hackett	Africa	Firefox	iOS	1
Reggie Tremblay	North America	Opera	Android	8
Jessyca Hickle	Australia	Internet Explorer	Mac OS	4
Kimberly Welch	North America	Opera	Android	11
Oda Kirlin	South America	Safari	Android	46
Brandy Murray	Africa	Safari	Ubuntu	70
Estrella Bogan	Africa	Firefox	Android	80
Jacynthe Doyle	Europe	Safari	Android	50
Ellen Deckow	South America	Firefox	Ubuntu	75
Quinten Mraz	South America	Internet Explorer	Ubuntu	33
Burdette Corwin	South America	Internet Explorer	Android	98
Daphne Moen	North America	Opera	Windows	90
Jevon Hyatt	Africa	Internet Explorer	Mac OS	24
Ines Gutkowski	Africa	Opera	Mac OS	17

Controller Index

<Grid
    records-bind="$page.records"
    keyField="id"
    buffered
    style="height: 650px"
    mod="fixed-layout"
    cached
    columns={[
        { header: '#', defaultWidth: 50, items: <cx><div class="cxe-grid-row-number" /></cx> },
        { header: { text: "Name", style: 'width: 100%' }, field: "fullName", sortable: true, resizable: true },
        { header: "Continent", field: "continent", sortable: true, resizable: true, defaultWidth: 150 },
        { header: "Browser", field: "browser", sortable: true, resizable: true, defaultWidth: 170 },
        { header: "OS", field: "os", sortable: true, resizable: true, defaultWidth: 80 },
        { header: "Visits", field: "visits", sortable: true, align: "right", resizable: true, defaultWidth: 70 }
    ]}
    selection={{ type: KeySelection, bind: "$page.selection" }}
/>

Copied!Cx Fiddle

Documentation

Grid Buffering