I would like to change color style in cell of q-table ponent.

{
  name: 'Active',
  align: 'center',
  label: 'Active',
  field: row => row.active,
  style: val => val ? 'color: red;' : 'color: black;',
  format: val => String(!!val),
  sortable: true
}

But this doesn't work.

If I try for testing, this work in all cells:

style: 'color: red;'

I think this is the mistake of my code in JS.

I would like to change color style in cell of q-table ponent.

https://codepen.io/abkrim-the-flexboxer/pen/eYYjPZZ

{
  name: 'Active',
  align: 'center',
  label: 'Active',
  field: row => row.active,
  style: val => val ? 'color: red;' : 'color: black;',
  format: val => String(!!val),
  sortable: true
}

But this doesn't work.

If I try for testing, this work in all cells:

style: 'color: red;'

I think this is the mistake of my code in JS.

• javascript
• vuejs2
• ponents
• cell
• quasar-framework

• Because the style property is getting evaluated based on the val wouldn't it be applied using v-bind: (just taking a guess here). – Neha Sharma Commented Nov 11, 2019 at 20:42

1 Answer 1

I think custom style classes use as function is removed from version 1(Ref https://github./quasarframework/quasar/issues/242, https://github./quasarframework/quasar/issues/2326). I tried this but it does not work.

{
  label: 'Message',
  field: 'message',
  classes (val) {
    return val.active==1 ? 'bg-red' : 'bg-yellow'
  },
  sort: true,
  width: '500px'
}

So best way is to customize the single column using slots.

<template v-slot:body-cell-active="props">
  <q-td :props="props" :class="props.row.active==1?'text-red':'text-black'">
    {{props.row.active}}
  </q-td>
</template>

Please refer the following code pen. You need to change the name of the active column in the lower case.

https://codepen.io/Pratik__007/pen/xxxaKxg