║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Cell Renderers description: Customize cell display in LyteNyte Grid using React components directly or through registered renderers to control appearance and behavior.

Control how cells display content by setting the cellRenderer property on a column. This is the main way to customize cell appearance in LyteNyte Grid.

The cellRenderer property accepts either:

• A React component (function or class).
• A string key that maps to a registered cell renderer.

Direct Function Cell Renderer

Pass a React function component directly to cellRenderer to define how each cell in that column is rendered.

!demo:Direct Cell Renderer="./demos/cell-renderers"

Registering Cell Renderers

For reusability and cleaner column definitions, register cell renderers and reference them by key. Pass a string to cellRenderer that matches a key in your registered renderers. Register renderers through the cellRenderers property in grid state.

!demo:Registered Cell Renderer="./demos/cell-renderers-registered"

This pattern keeps column definitions serializable and makes renderers easier to reuse.

Cell State

All rendered cells in LyteNyte Grid are React components and can use any React hook. However, cells mount and unmount frequently as users scroll. Local component state will not persist between mounts.

To maintain persistent cell state across scrolling, manage the state at the grid level and pass it down to individual cells.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║