Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Quasar table change style of whole row based on value in one cell

I'm trying to change style of whole row based on the value in one cell. For this I used template styling, however it only allows me to change the style of one cell.

<q-table
  :data="rows"
  row-key="name"
>
  <template v-slot:body-cell-name="props">
    <q-td :props="props">
      <div>
        <q-badge
          :label="props.value"
          :class="(props.value=='Ice cream sandwich') ? 
            'bg-accent spc' : 'bg-white text-black'"
        ></q-badge>
      </div>
    </q-td>
  </template>
</q-table>

However is it possible to change the style of whole row so that the whole cell and the row is filled with the background color instead of only small area around the cell value? Here how it works currently: https://codepen.io/pokepim/pen/pogNyVy

But desired result is so that the whole row is purple based on that value in cell.

EDIT: I dont know how many columns and what their names will be.

like image 463
Alex T Avatar asked Dec 17 '22 13:12

Alex T


1 Answers

You can use body-cell like this to style an entire row based on the value of a cell in that row:

  <template v-slot:body-cell="props">
    <q-td
      :props="props"
      :class="(props.row.name=='Ice cream sandwich')?'bg-accent text-white':'bg-white text-black'"
    >
      {{props.value}}
    </q-td>
  </template>

enter image description here

like image 112
jtlindsey Avatar answered Apr 24 '23 18:04

jtlindsey