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
Althea Ferry	Asia	Safari	Android	34
Mathias Olson	Asia	Safari	Ubuntu	55
Leann Zieme	Asia	Safari	Android	4
Herta Toy	Africa	Firefox	Mac OS	78
Greyson Stiedemann	Africa	Internet Explorer	iOS	72
Woodrow Jacobson	Asia	Internet Explorer	Ubuntu	89
Viva Hettinger	South America	Safari	Android	15
Hilbert Cummings	Australia	Internet Explorer	Ubuntu	68
Kiera Gleason	North America	Internet Explorer	Ubuntu	81
Bret Stoltenberg	Asia	Firefox	Mac OS	58
Alexie Konopelski	Asia	Edge	Windows	17
Toney Herzog	North America	Internet Explorer	Mac OS	28
Wendell Grady	Antarctica	Edge	iOS	51
Deontae Crooks	Europe	Firefox	iOS	91
Lucile McLaughlin	South America	Safari	Android	65
Garth Cassin	Africa	Firefox	Ubuntu	18
Lauriane Runolfsdottir	Africa	Opera	Windows	31
Ally Corwin	Asia	Chrome	Ubuntu	15
Fern Nolan	South America	Firefox	iOS	54
Camila Reichel	Africa	Chrome	Ubuntu	41
Meghan Nikolaus	Australia	Chrome	Mac OS	68
London Jewess	Antarctica	Opera	Android	97
Victoria Monahan	Antarctica	Opera	Mac OS	22
Oda Bailey	South America	Internet Explorer	Ubuntu	79
Rory Casper	North America	Opera	Windows	40
Mohammad Ritchie	Africa	Safari	Windows	38
Marlin Pollich	Australia	Safari	iOS	3
Santiago Kovacek	Africa	Safari	Ubuntu	12
Everette Wuckert	South America	Safari	Windows	60
Autumn Kunze	Australia	Safari	Mac OS	77
Shanna Stamm	Africa	Opera	Mac OS	82
Keagan Hahn	Asia	Firefox	iOS	9
Charity Prosacco	Europe	Edge	iOS	27
Maxine Beier	Europe	Safari	Ubuntu	19
Rodrick Upton	North America	Opera	Ubuntu	55
Magali Morissette	North America	Firefox	Android	9
Brigitte Ullrich	Asia	Safari	Windows	48
Kristin Huel	South America	Opera	iOS	74
Rick Goodwin	South America	Safari	Mac OS	24
Clarabelle Gislason	Africa	Internet Explorer	Mac OS	76
Tiana White	Australia	Safari	Mac OS	9
Jamar Rath	Europe	Chrome	Mac OS	17
Berta Douglas	South America	Edge	Windows	77
Abner Donnelly	South America	Firefox	iOS	60
Domingo Padberg	North America	Firefox	Windows	43
Giovani Larkin	North America	Internet Explorer	Mac OS	84
Evans Kerluke	Europe	Opera	Mac OS	85
Hans Lehner	Europe	Firefox	Ubuntu	47
Brody Wiza	Australia	Internet Explorer	Windows	2
Emanuel Jenkins	North America	Internet Explorer	Android	57
America Herman	South America	Opera	Android	64
Aidan Hudson	North America	Chrome	Ubuntu	25
Elisabeth Upton	Asia	Opera	Mac OS	81
Fatima Effertz	Africa	Opera	iOS	43
Jovan Jacobson	South America	Firefox	iOS	22
Shanon Orn	Antarctica	Internet Explorer	Android	56
Marisa Gottlieb	Africa	Chrome	Ubuntu	45
Jannie Streich	Australia	Safari	Android	68
Velma Mayer	South America	Firefox	Ubuntu	51
Lucinda Kunze	Australia	Firefox	Ubuntu	72

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