Tabulator: Column formatting based on another column's value

[technie101]

First up - amazing library and such good documentation. Thanks for this.

I've checked to see if there's a similar question but could not find it.

The requirement is to apply formatting on a column based on the value of another column in the same row. In the snippet below, I want to show the 'currentPrice' in red if the value is less than that of the value in column 'price' on the same row.

$("#example-table").tabulator({
        index:"id",
        columns:[ //Define Table Columns
            {title:"ID", field:"id"},
            {title:"Price", field:"price"},
            {title:"Current Price", field:"currentPrice",
                formatter:function(cell, formatterParams){
                   var value = cell.getValue();
                    if(<VALUE OF THIS COLUMN LESS THAN PRICE COLUMN>){
                        return "<span style='color:red; font-weight:bold;'>" + value + "</span>";
                    }else{
                        return value;
                    }
                }
            }
        ]
    });

I was checking with $("#example-table").tabulator("getRow", "ID VALUE"); to get the data of current row in the formatter, but did not know how to pass the ID of the current row. Please help.

[tomheaps]

You need to get the value of the cell on that row in the "price" field e.g.

```
formatter: function(cell, formatterParams) {
var value = cell.getValue();
var row = cell.getRow();
var price = row.getCell("price").getValue();
if (value < price) {
return "" + value + "";
} else {
return value
}
}

```
You will need to make sure that your "price" and "currentPrice" values are in the same units and that these units can be compared using the < function.

[olifolkerd]

Hey @tomheaps ,

Great solution, but you could optimize it a little bit using the getData function on the cell component:
js formatter: function(cell, formatterParams) { var value = cell.getValue(); var price = cell.getData().price; if (value < price) { return "<span style='color:red; font-weight:bold;'>" + value + "</span>"; } else { return value } }

Cheers

Oli :)