Column Header Renderer

Add a custom React component to a column's header by using the headerRenderer property. Custom header renderers provide a natural way to display specialized content in your LyteNyte Grid headers.

LyteNyte Grid renders your custom header within a managed container. The grid controls and maintains the container structure, while your custom renderer controls the content displayed inside it.

Creating a Header Renderer

A header renderer is a React component that receives the LyteNyte Grid API and the associated column as props. Your header renderer must return a ReactNode.

TODO;

Header Renderer Registration System

Besides directly providing a function, the headerRenderer property also accepts a string value. When you provide a string, LyteNyte Grid treats it as a key for a registered header renderer.

You can register header renderer components and refer to them by name. This approach is useful when:

• You need to reuse the same header renderer across multiple columns
• Your columns need to be serializable
• Your columns are defined on the server side while renderers are defined client-side

To register a header renderer, set the columnHeaderRenderers property in the initial value you provide to useLyteNyte. You can then refer to any registered header renderer by its name.

TODO;

Registering A Header Renderer VS Direct Component

Each approach has different advantages:

Directly providing a React component:

• More convenient for simple implementations
• Less flexible because the column is no longer serializable
• Logging the column won't output a readable value for the property

Using a registered header renderer:

• Keeps the column serializable, facilitating data transfer
• Produces readable field values when logging the column
• Allows for separation of column definitions and rendering logic