How to add attributes with dynamic values on Grid.js?

Question

I need to add dynamics(conditionals) values to an attribute on GridJs table, but i haven't found a way to do it on render time.

I have a column named "Type" and, for a distinct "Type" i have to fill the background color. Suppose I have 3 types: INFO(blue), WARNING(yellow), ERROR(red).

I've been trying to do it with formatter: property, but it only paints the nested html element.

The goal is to paint the whole cell, not only the background div.

My JS code:

var eventGrid = new gridjs.Grid({
        columns: [
            { name: "ID", width: '2%' },
            { name: "DateTimeString", width: '11%' },
            { name: "Username", width: '8%' },
            { name: "Professional ID", width: '2%' },
            { name: "Bio ID", width: '2%' },
            { name: "Type", width: '8%', attributes: {'data-field' : 'HERE THE DYNAMIC ATTRIBUTE VALUE'} formatter: (cell, row, attributes) => setCellColor(cell, row, attributes) },
            { name: "Navigation Type", width: '8%' },
            { name: "Message", width: '8%' },
            { name: "Exception Message" }],
        server: {
            url: '/EventsLogs/Details',
            then: data => data.map(event => [
                event.eventLogId,
                event.eventLogDateTimeString,
                event.username,
                event.professionalId,
                event.bioId,
                event.eventLogTypeName,
                event.navigationTypeName,
                event.message,
                event.exceptionMessage])
        }
    }).render(document.getElementById("eventsLogs-table"));

And the formatter function does the following:

function setCellColor(cell, row, att){
        switch(cell) {
            case 'INFO':
                    cell = `<div style='background-color: #3393FF; width:100%; color:white;'>${cell}</div>`;
            break;
            case 'WARNING':
                    cell = `<div style='background-color: #FFCE33; color:white;'>${cell}</div>`;
            break;        
            case 'ERROR':
                    cell = `<div style='background-color: #FC1235; color:white;'>${cell}</div>`;
            break;
        }
        return gridjs.html(cell);
    }

Result:

As you can see everything is working fine but not as expected. The expected result is to paint the whole cell.

Inspecting the HTML there is a span element as parent and then the td element. That's why I'm trying as a workaround a do it by an attribute.

Thanks!