title: vue.js How to add class to table row depending on property value
body: <p>I am trying to add bootstrap classes (success, waning... ) to table rows depending on a propertys (overallStatus) value.</p>
  
  <p>How would i implement this functionallity in the code below?</p>
  
  <p>Thanks in advance!</p>
  
  <pre><code>&lt;div id="people" class="col-md-12"&gt;      
      &lt;v-client-table :data="tableData" :columns="columns" :options="options"&gt;&lt;/v-client-table&gt;
  &lt;/div&gt;   
  
  Vue.use(VueTables.client, {
      perPage: 50, 
      skin: 'table table-condensed'
  });
  
  new Vue({
      el: "#people",
      ready: function () { },
      methods: {},
      data: {
          columns: ['deviceType', 'reasonForStatus', 'ip', 'monitorIsOn', 'freeSpace', 'cpuUsage', 'availableRam', 'statusTime'],
          options: {
              dateColumns: ['statusTime'],
              headings: {
                  deviceType: 'Device Type',
                  ip: 'Device Ip',
                  reasonForStatus: 'ReasonForStatus',
                  freeSpace: 'Free Space',
                  cpuUsage: 'CPU Usage',
                  availableRam: 'Available Ram',
                  statusTime: 'Log Time'
              },
              templates: {
                  deviceType: function (row) {
                      return row == 0 ? "Stander" : "Monitor";
                  },
                  availableRam: function (row) {
                      return row.availableRam + " mb.";
                  },
                  freeSpace: function (row) {
                      return row.freeSpace + " %";
                  },
                  cpuUsage: function (row) {
                      return row.cpuUsage + " %";
                  },
              },
  
          },
          selectedLetter: '',
          tableData: tableItems,
      }
  });
  </code></pre>