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	16
Bob Smith	Europe	Firefox	54
Carol White	Asia	Safari	54
David Brown	South America	Edge	96
Eva Green	Africa	Opera	48
Alice Johnson	North America	Chrome	40
Bob Smith	Europe	Firefox	22
Carol White	Asia	Safari	90
David Brown	South America	Edge	77
Eva Green	Africa	Opera	88
Alice Johnson	North America	Chrome	19
Bob Smith	Europe	Firefox	51
Carol White	Asia	Safari	39
David Brown	South America	Edge	85
Eva Green	Africa	Opera	40
Alice Johnson	North America	Chrome	29
Bob Smith	Europe	Firefox	12
Carol White	Asia	Safari	83
David Brown	South America	Edge	30
Eva Green	Africa	Opera	44
Alice Johnson	North America	Chrome	14
Bob Smith	Europe	Firefox	43
Carol White	Asia	Safari	67
David Brown	South America	Edge	40
Eva Green	Africa	Opera	52
Alice Johnson	North America	Chrome	70
Bob Smith	Europe	Firefox	21
Carol White	Asia	Safari	19
David Brown	South America	Edge	4
Eva Green	Africa	Opera	49
Alice Johnson	North America	Chrome	53
Bob Smith	Europe	Firefox	75
Carol White	Asia	Safari	9
David Brown	South America	Edge	76
Eva Green	Africa	Opera	38
Alice Johnson	North America	Chrome	69
Bob Smith	Europe	Firefox	74
Carol White	Asia	Safari	12
David Brown	South America	Edge	76
Eva Green	Africa	Opera	64
Alice Johnson	North America	Chrome	74
Bob Smith	Europe	Firefox	1
Carol White	Asia	Safari	45
David Brown	South America	Edge	66
Eva Green	Africa	Opera	69
Alice Johnson	North America	Chrome	59
Bob Smith	Europe	Firefox	27
Carol White	Asia	Safari	97
David Brown	South America	Edge	17
Eva Green	Africa	Opera	14
Alice Johnson	North America	Chrome	37
Bob Smith	Europe	Firefox	27
Carol White	Asia	Safari	51
David Brown	South America	Edge	63
Eva Green	Africa	Opera	89
Alice Johnson	North America	Chrome	64
Bob Smith	Europe	Firefox	28
Carol White	Asia	Safari	53
David Brown	South America	Edge	86
Eva Green	Africa	Opera	37

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.