Adding Bootstrap badge to grid column

[sapster77]

I am trying to add some custom css to a specific column in a grid.
I am using serenity (hence Bootstrap 3) and want to add the bootstrap "badge" to a grid cell based on a condition.

To test lets say i want the badge to appear in the "Vhf" column when the value in the cell is 11.

I tried this in XYZGrid.ts:

`protected getColumns(): Column[] {
    let columns = super.getColumns() as any;
    // Find the column to customize
    let vhfColumn = columns.find(c => c.field === TblScheduleRow.Fields.Vhf);
    if (vhfColumn) {
        // Customize the formatter of the column
        vhfColumn.formatter = (row, cell, value, columnDef, item) => {
            // Check condition
            if (item.Vhf == 11) {
                // Return the cell content with a Bootstrap badge
                return `<span class="badge badge-info">1</span>`;
            }
            // Return the original value if the condition is not met
            return value;
        };
    }

    return columns;
}`

When debugging and looking at the columns returned the class="badge...." appears on the Vhf column, but nothing is shown in the actual grid.

Any insights on how this can be achieved are warmly welcomed:-)
Thank you. //Peter