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

Sort by label using the pipe operator in RxJS with Angular

KineticJs: Enhancing Rotation with Multitouch Capability

The package.json file engines field specifying the version with a tilde and then a greater than sign (~>)

What is the mechanism behind range traversal in Javascript?

Is there a way to incorporate a computed value into a table prop while working with Element UI?

What is the method to group a TypeScript array based on a key from an object within the array?

Increasing the variable by 1 in PHP will result in the variable value being incremented to 1

Utilizing libraries in JavaScript

What causes variables and functions to behave differently when it comes to hoisting?

What is the appropriate content-type to use when sending AJAX POST data?

adjust back side height of flip box does not function on IE web browser

What is the best method to fill a mat-select dropdown with an existing value?

What could be the reason that the div is not being centered in the middle of the body?

Issue with ESLint arises following the installation of npm create-react-app package

Proper functionality of Chrome Extension chrome.downloads.download

Adjust the CSS to give <a> elements the appearance of plain text

Stacked divs needed to be aligned vertically

Traverse through an array or object using recursive render functions in JavaScript

Identifying JavaScript Errors in a Web Page: A Guide to Cypress

jQuery's draggable and resizable functionality with containment provisions is designed to