When applying a cell formatter to change the color of a Tabulator cell, the text displayed is being

Question

When applying a cell formatter to change the color of a Tabulator cell, the text displayed is being

I am attempting to dynamically change the color of a tabulator cell based on its input. My initial approach was to simply try changing the cell's color. After running the following code, here is what I observed:

function testFormatter(cell, formatterParams) {

    cell.getElement().style.backgroundColor = "#A6A6DF";

}

This link shows how my table appears after applying the cell formatting

I may respond late, as this marks my first inquiry on StackOverflow and I am unsure about typical response times.

javascript css dom tabulator

Answer 1

Answer №1

After some trial and error, I discovered the solution. Although it's not explicitly mentioned in the documentation, custom formatters must return a value in some manner.

To fix the issue, you simply need to implement the following code:

function customFormatter(cell, formatterParams) {
    var data = cell.getValue();
    cell.getElement().style.backgroundColor = "#A6A6DF";
    return data;
}

Answer 2

After some trial and error, I discovered the solution. Although it's not explicitly mentioned in the documentation, custom formatters must return a value in some manner.

To fix the issue, you simply need to implement the following code:

function customFormatter(cell, formatterParams) {
    var data = cell.getValue();
    cell.getElement().style.backgroundColor = "#A6A6DF";
    return data;
}

Answer 3

Answer №2

When formatting all cells:

    formatter: function (cell) {
        let val = cell.getValue();
        let el = cell.getElement();

        el.style.backgroundColor = "#A6A6DF";

        return val;
    }

For a specific cell that meets a certain condition:

    formatter: function (cell) {
        let val = cell.getValue();
        let el = cell.getElement();

        if (val == "some text") {
            el.style.backgroundColor = "#A6A6DF";
        }

        return val;
    }

Answer 4

When formatting all cells:

    formatter: function (cell) {
        let val = cell.getValue();
        let el = cell.getElement();

        el.style.backgroundColor = "#A6A6DF";

        return val;
    }

For a specific cell that meets a certain condition:

    formatter: function (cell) {
        let val = cell.getValue();
        let el = cell.getElement();

        if (val == "some text") {
            el.style.backgroundColor = "#A6A6DF";
        }

        return val;
    }

When applying a cell formatter to change the color of a Tabulator cell, the text displayed is being

Answer №1

Answer №2

Similar questions

Is there a one-liner to efficiently eliminate all instances of a specific sub-string from an array using the filter

Css technique for changing color on mouse hover

Creating a Standard DIV Element (JavaScript Code)

The integration between Javascript, PHP, and SQL Server does not display the retrieved data

If I change the request mode to 'no-cors' in my Firebase cloud function, how will it impact the outcome?

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

Using Angular to convert JSON data to PDF format and send it to the printer

Determine the byte size of the ImageData Object

The modal window pops up immediately upon the first click

What is the best way to generate a list from a text file in javascript?

Invoke a function within the redux reducer

Using file types in Vue 3: a beginner's guide

Incorporating unique symbols into a RegExp object during its creation using a variable

Using AngularJS to filter options in a dropdown list and trigger a function with ng-change

Filtering for Material Autocomplete is limited to the getOptionLabel field

To effectively execute a JQuery / Javascript function, it is essential to incorporate both $(document).ready and $(document).ajaxSucces

Having trouble sending an array with res.send() in NodeJS

Organize intricate JavaScript Arrays

How can you utilize jQuery to export multiple-page HTML content into a PDF document?

"Make sure to specify Safari input field as an email and mark