Search code examples
tabulator

Tabulator 4.6, How Change row background color on a condition in Modern Theme


I wish to change the background color with row.getElement().style.backgroundColor = "green"; It is work with tabulator.min.css theme, but not work with the modern theme.

  <!--   <link href="dist/css/tabulator.min.css" rel="stylesheet"> -->
      <link href="dist/css/tabulator_modern.min.css" rel="stylesheet">
        <script type="text/javascript" src="user_data.json"></script>   
        <script type="text/javascript" src="dist/js/tabulator.min.js"></script>
    </head> 
<body>
    <div id="example-table"></div>
<script>
var local_data = esp_data;  
var table = new Tabulator("#example-table", {

    rowFormatter:function(row){
        //row - row component

        var bk = row.getData();

        if(bk["Beköltözhető "] == "igen"){
          row.getElement().style.backgroundColor = "green"; 
          // row.getElement().style.color = "green";

            console.log("bekötzheto");
        }
    },

Thanks for help.


Solution

  • I am not sure why it needs to be done differently than the normal css, but here is what you can do.

    Instead of row.getElement().style.backgroundColor, you have to set it on the individual cells for the row. So, row.getElement().childNodes[0].style.backgroundColor will set the first cell background to green.

    Here is a working example. https://jsfiddle.net/nrayburn/6wygod1c/10/