Bootstrap Table cell color based on value

Question

I am using Bootstrap tables from this site Bootstrap Tables and I return data to the table from my MongoDB.

One of the fields is "ACTIVE" and i want to set the cell color based on the value returned in the field. If it is "YES" I want the cell to be green, and red for "NO".

Any help would be appreciated!! Thanks

Answer 1

This is really simple. See the wenzhixin's own fiddle for cell styling

bootstrap-tables has a function for cell customization name cellStyle

JavaScript:

function cellStyle(value, row, index) {
    return {
        classes: value.trim() === 'YES' ? 'yes' : 'no'
    };
}

Css:

td.yes {
  background-color: green;
}
td.no {
  background-color: red;
}

function cellStyle(value, row, index) {
  return {
    classes: value.trim() === 'YES' ? 'yes' : 'no'
  };
}

td.yes {
  background-color: green;
}
td.no {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet" />
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table data-toggle="table" id="demo-table">
  <thead>
    <tr>
      <th data-cell-style="cellStyle">Active</th>
      <th>Stars</th>
      <th>Forks</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tr-id-1" class="tr-class-1">
      <td id="td-id-1" class="td-class-1">YES
      </td>
      <td>526</td>
      <td>122</td>
      <td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
      </td>
    </tr>
    <tr id="tr-id-2" class="tr-class-2">
      <td id="td-id-2" class="td-class-2">
        YES
      </td>
      <td>288</td>
      <td>150</td>
      <td>A jQuery plugin to select multiple elements with checkboxes :)
      </td>
    </tr>
    <tr id="tr-id-3" class="tr-class-3">
      <td id="td-id-3" class="td-class-3">
        NO
      </td>
      <td>32</td>
      <td>11</td>
      <td>Show/hide password plugin for twitter bootstrap.
      </td>
    </tr>
    <tr id="tr-id-4" class="tr-class-4">
      <td id="td-id-4" class="td-class-4">
        YES
      </td>
      <td>13</td>
      <td>4</td>
      <td>my blog</td>
    </tr>
    <tr id="tr-id-5" class="tr-class-5">
      <td id="td-id-5" class="td-class-5">
        NO
        <td>6</td>
        <td>3</td>
        <td>Redmine notification tools for chrome extension.</td>
    </tr>
  </tbody>
</table>