Vuetables2 How to add dynamic style to specific data in vue-client-table

Question

I am working on vue js and vue client table. I have created a vue-client-table and populated some dummy data as static.

Now there is a column name STATUS which will have two value i.e Active or Inactive.

I want to change the font color of 'Inactive' to red. (Which denotes that link is down)

I need help to understand it.

Below I have attached my code:

Headings : [ 'APPLICATION NAME', 'URL','LAST ACCESSED','STATUS'],
tableData: [
            {
             "APPLICATION NAME": "Pannier",
                    "URL": "http://boston.com/urna/ut/tellus/nulla/ut/erat/id.js?magna=blandit&ac=ultrices&consequat=enim&metus=lorem",
                    "LAST ACCESSED": "5:07 PM",
                    "STATUS": 'Inactive'
                    },{
                    "APPLICATION NAME": "Kanlam",
                    "URL": "http://archive.org/rutrum/nulla/nunc/purus.jpg?ac=ametttis&sit=nibh&amet=ligula",
                    "LAST ACCESSED": "7:02 AM",
                    "STATUS": 'active'
                    }

Below I have attached my image:

Answer 1

One simple way is to use Scoped slots, in order to add css class and the href attribute. Take a look at the official docs.
Here is an example.

Vue.use(VueTables.ClientTable);

new Vue({
  el: "#app",
  data: {
    columns: ['APPLICATION NAME', 'URL', 'STATUS'],
    tableData: [
      {
        "APPLICATION NAME": "Pannier",
        "URL": "http://boston.com/urna/ut/tellus/nulla/ut/erat/id.js?magna=blandit&ac=ultrices&consequat=enim&metus=lorem",
        "LAST ACCESSED": "5:07 PM",
        "STATUS": 'Inactive'
      },{
        "APPLICATION NAME": "Kanlam",
        "URL": "http://archive.org/rutrum/nulla/nunc/purus.jpg?ac=ametttis&sit=nibh&amet=ligula",
        "LAST ACCESSED": "7:02 AM",
        "STATUS": 'active'
      }],
  }
});

.Inactive {
  color: red
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>

<h3>Vue Tables 2</h3>

<div id="app">
  <v-client-table :columns="columns" :data="tableData">
      <a :class="props.row.STATUS" :href="props.row.URL" slot="STATUS" slot-scope="props">{{props.row.STATUS}}</a>
  </v-client-table>
</div>

You need to create a css class with name "Inactive", exactly the same with the "STATUS" value.