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.
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/