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
Domingo Gerhold	North America	Opera	iOS	69
Forrest Hansen	Australia	Edge	Android	91
Renee Gaylord	Asia	Edge	Mac OS	40
Aileen Schroeder	South America	Safari	Ubuntu	92
Sarai Dibbert	North America	Firefox	Mac OS	54
Madge Dach	Australia	Internet Explorer	Windows	28
Ona Tremblay	Africa	Chrome	Windows	18
Chloe Koss	Europe	Firefox	iOS	7
Gilberto Oberbrunner	North America	Opera	Android	90
Bailee Stokes	Asia	Opera	iOS	10
Hattie Oberbrunner	Australia	Edge	iOS	33
Pierce Lebsack	Antarctica	Opera	Windows	57
Rocio Predovic	North America	Internet Explorer	Android	12
Carlos Orn	North America	Edge	Mac OS	27
Izaiah Mitchell	North America	Chrome	Windows	60
Wilbert Murazik	South America	Internet Explorer	iOS	63
Tessie Nolan	North America	Internet Explorer	Ubuntu	53
Wyman Donnelly	Antarctica	Chrome	Ubuntu	2
Yasmin Kihn	Africa	Opera	Android	4
Ezra Wisoky	Australia	Firefox	Android	39
Jensen Kulas	South America	Safari	Android	12
Ellen Runte	Antarctica	Firefox	Windows	24
Wade Waelchi	Europe	Internet Explorer	Mac OS	90
Anastasia Schmitt	Australia	Firefox	Ubuntu	27
Al Kutch	Asia	Internet Explorer	Ubuntu	11
Katelyn Walker	North America	Chrome	Ubuntu	25
Judy McKenzie	Australia	Edge	Mac OS	55
Josue Hirthe	Asia	Internet Explorer	iOS	5
Dexter Kreiger	Africa	Safari	Android	44
Jennifer Collins	Europe	Firefox	Mac OS	87
Mark Kling	Australia	Edge	Mac OS	2
Reba Tillman	Australia	Opera	Android	69
Winfield Rodriguez	Asia	Firefox	Android	70
Alisa Bosco	Asia	Safari	Mac OS	34
Jameson Turcotte	Africa	Safari	Android	51
Gust Baumbach	Australia	Internet Explorer	Mac OS	5
Jerrell Williamson	South America	Opera	Mac OS	82
Tom Hilpert	Australia	Safari	Ubuntu	23
Fritz Koepp	Antarctica	Internet Explorer	Windows	48
Zelma Kuvalis	Africa	Edge	Mac OS	89
Josefina Cronin	Asia	Internet Explorer	Mac OS	73
Breanna Bahringer	Africa	Opera	Android	11
Derick Pouros	North America	Safari	Ubuntu	68
Abner Borer	North America	Internet Explorer	Mac OS	100
Steve Bahringer	Africa	Internet Explorer	Android	93
Yasmine Lowe	Africa	Safari	Windows	47
Harvey Wiegand	Antarctica	Firefox	Android	60
Lloyd Buckridge	North America	Firefox	Ubuntu	68
Bridie Ratke	Africa	Internet Explorer	Ubuntu	7
Macy Flatley	Asia	Safari	Windows	24
Cicero Cummerata	Asia	Firefox	Android	90
Dillan Harvey	Europe	Internet Explorer	Android	24
Mary Thompson	Europe	Firefox	iOS	99
Ambrose Runte	Antarctica	Opera	Ubuntu	28
Fredy Thiel	Asia	Firefox	Mac OS	40
Ashlynn Rogahn	Africa	Opera	Windows	5
Westley Gottlieb	Europe	Safari	Ubuntu	66
Florence Trantow	Asia	Chrome	Mac OS	89
Dawn Aufderhar	South America	Firefox	Android	19
Toney Stracke	Asia	Firefox	Android	31

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