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
Lonny Cruickshank	Australia	Safari	Android	100
Brandon Gulgowski	Asia	Firefox	iOS	100
Rosalind Collins	North America	Edge	iOS	43
Prince Ondricka	Africa	Safari	Android	72
Cindy Schimmel	Africa	Firefox	Android	10
Raquel Stamm	Africa	Safari	Android	74
Antone Lakin	Australia	Opera	Mac OS	82
Shemar Pacocha	Africa	Edge	Windows	66
Neil Stamm	Antarctica	Internet Explorer	Android	13
Rossie Lindgren	Europe	Safari	Android	72
Nathen Medhurst	Asia	Opera	iOS	61
Jose Hickle	North America	Opera	Android	42
Bryana Shanahan	North America	Safari	Ubuntu	97
Virgil Jerde	Australia	Internet Explorer	Android	55
Emelie Koch	South America	Chrome	Android	73
Lonny Hahn	Africa	Chrome	Ubuntu	29
Freddie Hodkiewicz	North America	Internet Explorer	Mac OS	9
Arthur Lubowitz	Australia	Edge	Ubuntu	5
Bertram Dare	Australia	Chrome	Ubuntu	52
Luna Schoen	Africa	Internet Explorer	Mac OS	46
Kory Breitenberg	Australia	Internet Explorer	Android	6
Ashley Ferry	Africa	Internet Explorer	Android	28
Lon Mills	Australia	Safari	Ubuntu	47
Oral Krajcik	Europe	Internet Explorer	Ubuntu	60
Jaida Sporer	Australia	Opera	Ubuntu	88
Etha Dietrich	Asia	Firefox	Ubuntu	78
Ramiro Barrows	Africa	Internet Explorer	Android	73
Kellen Vandervort	North America	Internet Explorer	Windows	83
Hubert Cruickshank	South America	Safari	Android	66
Mavis Kling	South America	Edge	Ubuntu	8
Claire Klocko	Europe	Internet Explorer	Ubuntu	62
Rylee Price	Australia	Opera	Ubuntu	95
Keven Runte	South America	Opera	Ubuntu	62
Madelynn Gleason	North America	Internet Explorer	iOS	80
Cale Collier	Asia	Internet Explorer	Mac OS	52
Nikolas Monahan	Europe	Internet Explorer	Android	23
Lowell Funk	South America	Firefox	Mac OS	44
Lavern Marvin	Africa	Edge	Android	76
Eliane Nicolas	Asia	Internet Explorer	Windows	52
Dylan Bechtelar	Australia	Chrome	Android	35
Orrin Veum	Asia	Internet Explorer	iOS	58
Wilbert Gutkowski	Asia	Safari	Android	37
Haskell Macejkovic	Africa	Chrome	Android	38
Lilla Donnelly	South America	Internet Explorer	iOS	49
Savion Ankunding	Australia	Internet Explorer	Ubuntu	6
Rusty Kiehn	South America	Chrome	Android	56
Johan Carter	Australia	Firefox	Windows	67
Columbus Hudson	South America	Safari	Android	76
Maynard Cruickshank	North America	Firefox	Windows	31
Eladio Ebert	Antarctica	Safari	Ubuntu	13
Kristin Zieme	North America	Edge	Mac OS	49
Hermann Watsica	North America	Safari	Mac OS	50
Christopher Tremblay	Australia	Opera	Windows	55
Wilhelmine Ebert	Africa	Edge	Windows	92
Leda Wolff	Africa	Firefox	Mac OS	16
Stan Wunsch	Australia	Safari	Ubuntu	56
Angie Schoen	Australia	Chrome	Android	73
Jarred Thiel	Antarctica	Firefox	Ubuntu	99
Tressie Kreiger	Antarctica	Opera	iOS	52
Helga Schmitt	Africa	Firefox	Android	47

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