Tabulator: How to change the color of row ?

Created on 17 Oct 2017  Â·  8Comments  Â·  Source: olifolkerd/tabulator

hi, i have a problem.
how to change the row background-color which one of the column date is not null , i am not sure that you can understand .
just like this, if the cell's value is not null ,change that row color .
very thanks !!!!!!
image

Question - Ask On Stack Overflow

Most helpful comment

You can do this by adjusting the code for the customFormatter that you are applying to cells in your "date" column so that it changes the background color of the whole row, not just the cell depending on whether the cell is empty or not.

Something like this should work in the column definitions for your table:

{
        title: "Date",
        field: "date",
        formatter: function(cell, formatterParams) {
          var cellValue = cell.getValue();
          if (cellValue !== "") {
            cell.getRow().getElement().css({
              "background-color": "red"
            });
            return cellValue;
          } else {
            cell.getRow().getElement().css({
              "background-color": "transparent"
            });
            return cellValue;
          }
        }
      },

Hope this is what you meant?

All 8 comments

You can do this by adjusting the code for the customFormatter that you are applying to cells in your "date" column so that it changes the background color of the whole row, not just the cell depending on whether the cell is empty or not.

Something like this should work in the column definitions for your table:

{
        title: "Date",
        field: "date",
        formatter: function(cell, formatterParams) {
          var cellValue = cell.getValue();
          if (cellValue !== "") {
            cell.getRow().getElement().css({
              "background-color": "red"
            });
            return cellValue;
          } else {
            cell.getRow().getElement().css({
              "background-color": "transparent"
            });
            return cellValue;
          }
        }
      },

Hope this is what you meant?

Thank you for solving my problem 。

Hello,
I've try this. but got an error:
TypeError: cell.getRow(...).getElement(...).css is not a function

Tabulator v. 4.1

{title:"Age", field:"age", align:"left", formatter:function(cell, formatterParams){
var value = cell.getValue();
if(value > 20){
cell.getRow().getElement().css({
"background-color": "#ffbe33"
});
return value;
}else{
cell.getRow().getElement().css({
"background-color": "transparent"
});
return value;
}}
}

try cell.getRow().getElement().style.backgroundColor = "#ffbe33" in stead of cell.getRow().getElement().css

It works!!!
Thank you very much

This doesn’t work for me. It overrides the whole row and I don’t see my data anymore. Why is this happening? It seems to be hiding the value behind the colour it shows. Or something like that?

How do you change the text color for a given row? using ver 4.1

@shaakirshah This issues list is now for bugs and feature requests only, please ask questions on Stack Overflow

Cheers

Oli :)

Was this page helpful?
0 / 5 - 0 ratings