CODEWITHSUNDEEP
javascriptvuejs2componentscellquasar-framework
abkrim
abkrim

Reputation: 3692

Quasar conditional style of cell in component q-table

I would like to 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 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.

Upvotes: 2

Views: 9060

Answers (1)

Pratik Patel
Pratik Patel

Reputation: 6978

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

Upvotes: 6

Related Questions