How can I style individual cells in Bootstrap-Table, setting the style in the data received from a server?

Question

I'm using the 'Bootstrap Table' library to create tables from json data received via axios. My data looks like this (From PHP):

$columns = array();
$columns[] = [
    'field' => 'loc',
    'title' => 'Loc',
    'class' => ($highlightedColumn == 'loc' ? 'highlightedColumn' : ''),
];
$columns[] = [
    'field' => 'district',
    'title' => 'District',
    'class' => ($highlightedColumn == 'district' ? 'highlightedColumn' : ''),
];
    
$data = array();
$data[$i]['loc'] = "Location 1";
$data[$i]['district'] = "District 1";
...

return ('columns' => $columns, 'data' => $data);

Now I've got column styles working as you can see from the 'class' attribute in each column, however I want to style individual cells (Like $data[0]['loc']) to be specific colors gotten from the database I'm pulling the info from, so like - Location 1 would have a color of #f3003a and a background of #008800, whereas Location 2 would be #000000 and #ffffff - all the color data is in the database and looped over when assigning the values to the $data[$i] array.

Is this possible? I've looked and looked through the documentation and googled a bit, but I can't find a way to style individual cells in this way. You can style cells via a function assigned to a column, but that function can't receive individual cell's requested css data.

Just for good measure, here's the html/js I use to generate the tables:

<table id="table"></table>

<script>
function getAll() {
    clearTable();
    axios.get('/api/remote/').then(
        function (response) {
            $('#table').bootstrapTable({
                stickyHeader: true,
                fixedColumns: true,
                fixedNumber: 1,
                columns: response.data.columns,
                data: response.data.data
            });
        });
}

function clearTable() {
        $('#table').bootstrapTable('destroy');
}

window.onload = function () {
        getAll();
}
</script>

Answer 1

I found a kind of hacky way of doing this in case someone else stumbles across this question and needs a possible solution:

In a PHP file I can call as an API call, I put the following code in:

    public function getLocColors()
    {
        $locations = \App\Models\Location::select('abbreviation', 'bgcolor', 'color')->get();
        $colors = array();
        foreach ($locations as $location) {
            $colors[strtoupper($location->abbreviation)] = array('bgcolor' => $location->bgcolor, 'color' => $location->color);
        }

        return $colors;
    }

In the column that needs the styling I put:

        $columns[] = [
            'field' => 'loc',
            'title' => 'Loc',
            'sortable' => true,
            'cellStyle' => 'locStyle',
            'width' => 75
        ];

In the html file for the table I put:

// Put these functions somewhere

                            function locStyle(value, row, index) {
                                if (locColors !== undefined && locColors[value] !== undefined) {
                                    return {
                                        css: {
                                            "background-color": locColors[value]['bgcolor'],
                                            "color": locColors[value]['color']
                                        }
                                    }
                                } else {
                                    return {
                                        css: {
                                            
                                        }
                                    }
                                }
                            }

                            function setLocColors(colors) {
                                locColors = colors;
                            }

                            function getLocColors() {
                                axios.get('/api/getloccolors').then(
                                    function (response) {
                                        setLocColors(response.data);
                                    });
                            }

Then right before I get the table data, I call getLocColors():

                            window.onload = function () {
                                getLocColors();
                                getAll();
                            }

It's kind of aa hack, maybe a little slower than a native solution, but it works.

You can adjust it to have two separate arrays returned from the API - a list of strings to match with what array indexes to use, and of course the array with the color values. Then just change locStyle to use string includes to search on value, looping through the strings to match array. That way it'll work even if the cell value has more than what you're trying to match.