RenderDetail

Since v2.15.0

Detail for the render event.

Fired once at the end of every render cycle (the single RAF flush in the render scheduler), after all plugin afterRender hooks have run and after grid.ready() has resolved.

Use this when you need to act on the rendered DOM (e.g. focus the first input of a freshly added row when editing.mode === 'grid') without resorting to setTimeout or double-requestAnimationFrame hacks.

Example

// Focus the first cell's input after adding a row in full-grid edit mode
function addEmployee() {
  grid.addRow({ id: crypto.randomUUID(), name: '', email: '' });
  grid.addEventListener(
    'render',
    () => {
      const input = grid.querySelector<HTMLInputElement>(
        '[data-row="0"][data-col="0"] input',
      );
      input?.focus();
    },
    { once: true },
  );
}

Properties

Property	Type	Description
phase	RenderPhase	The highest render phase that executed this cycle (see RenderPhase). Use this to skip cheap scroll-only renders (phase < RenderPhase.ROWS) if you only care about row/column model changes.
initial	boolean	true only for the very first render after the grid was connected.
rowCount	number	Number of rows in the effective row model after plugin processRows hooks ran.
visibleRange	object | unknown	The visible virtual window — start inclusive, end exclusive — or null when virtualization is disabled (small datasets below the bypass threshold).