Cell renderer Interface: CellTemplate Interface: CellTemplateProp

This article explains how to use a custom cell function to display HTML content in a cell.
Alternatively, you can use predefined column types.

WARNING

Remember to escape any HTML code that could be used for XSS attacks.

TIP

Revogrid's API is consistent across all major frameworks. Transfer your experience and knowledge from one framework to another.

• Angular – Cell render in Angular environments.
• React – Usage Cell render within React applications.
• Vue 2 – Cell render adaptations for Vue 2.
• Vue 3 – Detailed guide for integrating native Cell render with Vue 3.

TIP

Use JSX to simplify your code and render HTML content.

const columns: ColumnRegular[] = [
    {
        name: 'Person name',
        prop: 'name',
        cellTemplate: (
            createElement: HyperFunc<VNode>,
            props: CellTemplateProp,
            additionalData?: any
        ) => {
            return createElement(
                'span',
                {
                    style: {
                        color: 'red',
                    },
                },
                props.model[props.prop]
            )
        },
    },
]