cell color - wenzhixin's bootstrap-tables (or alternative)

Question

I've using wenzhixin's bootstrap tables for a while with excelent results, now I need to color each cell according to a different threshold, I was thinking in returning the cell value and cell color via ajax, so I can do all the process in the call. I'm loading the table like this:

if (data) {
    $('#estado').bootstrapTable('removeAll');
    $('#estado').bootstrapTable('load', data);
}

how do you recommend to approach this problem, maybe I shouldn't use wenzhixin bt for this?

I saw another answers but to use them i should add an extra column with the value that the next should have and then color it via js, is that the best way? Thank you!

Answer 1

Bootstrap Table should be able to handle what you want. Three options for cell based styling:

1. Row styling using the 'rowStyle' table option, which enables CSS styling for the table row. This uses a function like this one to arrive you to derive the row style from the row data:

   function rowStyle(row, index) {
     return {
       classes: 'text-nowrap another-class',
       css: {"color": "blue", "font-size": "50px"}
     };
   }
   

2. Cell styling using the 'cellStyle' column option, which enables CSS styling for the table cell. This uses a function like this one to arrive you to derive the cell style from the row data:

   function cellStyle(value, row, index, field) {
     return {
       classes: 'text-nowrap another-class',
       css: {"color": "blue", "font-size": "50px"}
     };
   }
   

   See full example here.

3. Individual field formatting using the 'formatter' column option, which provides custom HTML formatting of cell contents. This uses a function like this one to derive the HTML contents of the table cell:

   function priceFormatter(value) {
      // 16777215 == ffffff in decimal
      var color = '#'+Math.floor(Math.random() * 6777215).toString(16);
      return '<div  style="color: ' + color + '">' +
             '<i class="glyphicon glyphicon-usd"></i>' +
             value.substring(1) +
             '</div>';
   }
   

   See full example here.