[REACT] How to add hyperlinks in a new column for users to click and jump to a new page

[bin_yu]

Hi All,

I want to add a new column in which we can add hyperlinks in a new column for users to click and jump to a new page as shown in the photo below. How should I do some configs?

hyperlinks.png (157.84 KiB) Viewed 262 times

[marcio]

Hey,

Thanks for reaching out.

To add hyperlinks in a new column in Bryntum Grid, you can use the renderer function of the column configuration. This function allows you to customize the content of the cells. Here's a simple example:

const gridProps = {
    columns: [
        {
            field: 'link',
            text: 'Link',
            renderer: ({ record }) => {
                const url = record.url; // Assuming your data has a 'url' field
                return `<a href="${url}" target="_blank">Visit Page</a>`;
            }
        }
    ],
    data: [
        { url: 'https://example.com' },
        { url: 'https://anotherexample.com' }
    ]
};

return <BryntumGrid {...gridProps} />;

This code snippet creates a column with hyperlinks that open in a new tab when clicked. Make sure your data includes the URLs you want to link to.

[bin_yu]

hi @marcio, I tried to set config by your way, but it show completed string, not hyperlink. see the following screenshot. How do I adjuse it?

my config:

2025-5-7config.png (58.15 KiB) Viewed 252 times

UI show:

2025-5-7hyperlinks.png (228.52 KiB) Viewed 252 times

[mats]

You'll have to disable the HTML encoding using this config on your column using a renderer:

htmlEncode : false

https://bryntum.com/products/grid/docs/#Grid/column/Column#config-htmlEncode

[bin_yu]

Thank you, I updated my config as the following and it works. thanks you very much

{
                field: 'link',
                text: 'Link',
                htmlEncode : false,
                tooltipRenderer: ({ value }:any) => value, // shoud empty floating text value.
                renderer: ({ record }:any) => {
                    //const url = record.url; // Assuming your data has a 'url' field
                    console.info('url:', record)
                    return `<a href="https://www.baidu.com/" target="_blank">baidu</a>`;
                }
            }