Quasar conditional style of cell in component q-table

Question

I like change color style in cell of q-table component

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 not work

If I try for testing this work in all cells

 style: 'color: red;'

I think is a mistake of my code in JS

Answer 1

I think custom style classes use as function is removed from version 1( Ref https://github.com/quasarframework/quasar/issues/242 , https://github.com/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