# 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

```typescript
// 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` | <code><a href="/grid/api/plugin-development/types/renderphase/">RenderPhase</a></code> | 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` | <code>boolean</code> | `true` only for the very first render after the grid was connected. |
| `rowCount` | <code>number</code> | Number of rows in the effective row model after plugin `processRows` hooks ran. |
| `visibleRange` | <code>object &#124; unknown</code> | The visible virtual window — `start` inclusive, `end` exclusive — or `null` when virtualization is disabled (small datasets below the bypass threshold). |