Cell Renderers

Customize how cells display content by setting the cellRenderer property on a column. This is the primary way to control cell appearance in LyteNyte Grid.

The cellRenderer property accepts either a React component or a string. When you provide a string, LyteNyte Grid treats it as a key that references a registered cell renderer.

Direct Function Cell Renderer

Provide a React function component directly to the cellRenderer property to control how LyteNyte Grid displays the contents for each cell in that column.

TODO;

Registering Cell Renderers

For better reusability, register cell renderers and reference them by key. Pass a string to the cellRenderer property that corresponds to a key in your registered renderer components. Register these components through the cellRenderers property on grid state.

TODO;

This approach makes your renderers more reusable and keeps your column definitions serializable.

Cell State

All rendered cells in LyteNyte Grid are React components that can use any React hook. However, keep in mind that cells frequently mount and unmount as users scroll through the grid. This means local component state won't persist across scrolling.

Try scrolling through the rows in the grid below. Notice how the timer resets as rows scroll in and out of view.

TODO;

To maintain persistent cell state across scrolling, move the state management to the grid level and share it with individual cells.

TODO;