vue-tables-2 color cell background

Question

I am trying to work out how to render a cell with a specific background color based in text in the cell (eg ' green').

It seems that this may be possible using templates (https://github.com/matfish2/vue-tables-2#templates), but I don't follow how to use props.index within a single page vue app to render a specific cell a specific color.

<v-client-table :data="entries" :columns="['id', 'name' ,'age', 'edit']">
      <a slot="edit" slot-scope="props" class="fa fa-edit" :href="edit(props.row.id)"></a>
</v-client-table>
#Note: You can get the index of the current row relative to the entire data set using props.index

Any ideas?

It is only a single cell and not the entire row you want colored correct? — Carsten

jplattus jplattus · Accepted Answer · 2019-09-07T21:10:46

For those who need to apply some class to the entire row :

options: {
  rowClassCallback: function(row) { return 'bg-warning'}, //Using Boostrap4
}

EDIT: I think documentation was updted.

cellClasses:{
  balance: [
    {
        class:'low-balance',
        condition: row => row.balance < 100
    }
  ]
}

vue-tables-2 color cell background

1 Answers