Column Header Template

Interface: ColumnRegular Type: ColumnTemplateFunc

This article explaines how to use custom header function to display HTML content in a header. This is a powerful feature.

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

TIP

Check Type: ColumnTemplateFunc for more information.

const columns: ColumnRegular[] = [
    {
        name: 'Person name',
        prop: 'name',

        // use this to return custom html per column
        columnTemplate: (
            createElement: HyperFunc<VNode>,
            props: ColumnTemplateProp,
            additionalData?: any
        ) => {
            return createElement(
                'span',
                {
                    style: {
                        color: 'red',
                    },
                },
                column.name
            )
        },
    },
]

Using Keys in Header Templates

IMPORTANT

Keys are essential for VNode reconciliation. When rendering lists or dynamic content, always provide unique keys to help the virtual DOM accurately identify, track, and update nodes. Use keys thoughtfully, as incorrect usage can lead to inefficient updates or unexpected behavior.

When rendering multiple child elements in a header template, provide unique keys:

const columns: ColumnRegular[] = [
    {
        name: 'Actions',
        prop: 'actions',
        columnTemplate: (
            createElement: HyperFunc<VNode>,
            props: ColumnTemplateProp,
            additionalData?: any
        ) => {
            const actions = ['sort', 'filter', 'settings'];
            return createElement(
                'div',
                { key: `header-${props.column.name}` },
                actions.map((action, index) =>
                    createElement(
                        'button',
                        {
                            key: `action-${props.column.name}-${action}`,
                            class: `action-btn action-${action}`,
                        },
                        action
                    )
                )
            );
        },
    },
]