Buffering

import { Grid } from 'cx/widgets';

Grid supports buffered rendering which dramatically improves performance with large datasets. Instead of rendering all rows, only visible rows plus a buffer are rendered, enabling smooth scrolling with thousands of records.

 <div controller={PageController}>
  <Grid
    records={m.records}
    keyField="id"
    buffered
    style="height: 400px"
    mod={["fixed-layout", "contain"]}
    cached
    selection={{ type: KeySelection, bind: m.selection }}
    columns={[
      {
        header: "#",
        align: "center",
        children: <div class="cxe-grid-row-number" />,
        defaultWidth: 70,
      },
      {
        header: { text: "Name", style: "width: 100%" },
        field: "fullName",
        sortable: true,
        resizable: true,
      },
      {
        header: "Continent",
        field: "continent",
        sortable: true,
        resizable: true,
        defaultWidth: 130,
      },
      {
        header: "Browser",
        field: "browser",
        sortable: true,
        resizable: true,
        defaultWidth: 100,
      },
      {
        header: "Visits",
        field: "visits",
        sortable: true,
        align: "right",
        resizable: true,
        defaultWidth: 70,
      },
    ]}
  />
</div> 
 class PageController extends Controller {
  onInit() {
    this.store.init(
      m.records,
      Array.from({ length: 5000 }, (_, i) => ({
        id: i + 1,
        fullName: names[i % 5],
        continent: continents[i % 5],
        browser: browsers[i % 5],
        visits: Math.floor(Math.random() * 100) + 1,
      })),
    );
  }
} 
 interface Record {
  id: number;
  fullName: string;
  continent: string;
  browser: string;
  visits: number;
}

interface PageModel {
  records: Record[];
  selection: number;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { Controller, KeySelection } from "cx/ui";
import { Grid } from "cx/widgets"; 

Name	Continent	Browser	Visits
Alice Johnson	North America	Chrome	13
Bob Smith	Europe	Firefox	66
Carol White	Asia	Safari	90
David Brown	South America	Edge	37
Eva Green	Africa	Opera	61
Alice Johnson	North America	Chrome	71
Bob Smith	Europe	Firefox	43
Carol White	Asia	Safari	68
David Brown	South America	Edge	19
Eva Green	Africa	Opera	84
Alice Johnson	North America	Chrome	99
Bob Smith	Europe	Firefox	75
Carol White	Asia	Safari	87
David Brown	South America	Edge	90
Eva Green	Africa	Opera	15
Alice Johnson	North America	Chrome	60
Bob Smith	Europe	Firefox	49
Carol White	Asia	Safari	49
David Brown	South America	Edge	60
Eva Green	Africa	Opera	40
Alice Johnson	North America	Chrome	89
Bob Smith	Europe	Firefox	8
Carol White	Asia	Safari	97
David Brown	South America	Edge	93
Eva Green	Africa	Opera	15
Alice Johnson	North America	Chrome	99
Bob Smith	Europe	Firefox	92
Carol White	Asia	Safari	21
David Brown	South America	Edge	62
Eva Green	Africa	Opera	82
Alice Johnson	North America	Chrome	98
Bob Smith	Europe	Firefox	88
Carol White	Asia	Safari	27
David Brown	South America	Edge	34
Eva Green	Africa	Opera	81
Alice Johnson	North America	Chrome	81
Bob Smith	Europe	Firefox	69
Carol White	Asia	Safari	78
David Brown	South America	Edge	33
Eva Green	Africa	Opera	12
Alice Johnson	North America	Chrome	31
Bob Smith	Europe	Firefox	82
Carol White	Asia	Safari	2
David Brown	South America	Edge	62
Eva Green	Africa	Opera	62
Alice Johnson	North America	Chrome	67
Bob Smith	Europe	Firefox	43
Carol White	Asia	Safari	81
David Brown	South America	Edge	64
Eva Green	Africa	Opera	36
Alice Johnson	North America	Chrome	26
Bob Smith	Europe	Firefox	91
Carol White	Asia	Safari	70
David Brown	South America	Edge	94
Eva Green	Africa	Opera	70
Alice Johnson	North America	Chrome	78
Bob Smith	Europe	Firefox	72
Carol White	Asia	Safari	91
David Brown	South America	Edge	62
Eva Green	Africa	Opera	82

This grid contains 5,000 rows but renders smoothly thanks to buffered mode. Try scrolling and sorting to see the performance.

How It Works

Enable buffered mode by setting the buffered property. The grid calculates which rows are visible and renders only those plus a configurable buffer for smooth scrolling.

<Grid
  records={m.records}
  buffered
  style="height: 400px"
  mod={["fixed-layout", "contain"]}
  cached
  columns={columns}
/>

For optimal performance, combine buffering with:

Fixed height - The grid needs a fixed height to calculate visible rows
mod="fixed-layout" - Uses CSS table-layout: fixed for faster rendering
mod="contain" - Adds CSS containment for better browser optimization
cached - Prevents row re-renders when unrelated store data changes

Row Numbers

Use the built-in cxe-grid-row-number class to display automatic row numbers:

{
  header: "#",
  defaultWidth: 50,
  children: <div class="cxe-grid-row-number" />
}

Configuration

Property	Type	Description
`buffered`	`boolean`	Enables buffered rendering mode.
`bufferSize`	`number`	Number of rows to render outside the visible area. Default is `60`.
`bufferStep`	`number`	Number of rows to add/remove when scrolling. Default is `15`.
`cached`	`boolean`	Prevents row re-renders when unrelated store data changes. Rows only update when their record data changes.
`lockColumnWidths`	`boolean`	Locks column widths to prevent layout shifts during scrolling.
`lockColumnWidthsRequiredRowCount`	`number`	Minimum number of rows required before column widths are locked.
`measureRowsOnScroll`	`boolean`	Re-measures row heights while scrolling. Useful for variable height rows.