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

Question

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.

Gasser

Answer 1

the v-slot:body-cell-name only styles the cell you need to use the body slot.

<template v-slot:body="props">
        <q-tr :props="props" :class="(props.row.name=='Ice cream sandwich')?'bg-accent text-white':'bg-white text-black'">
          <q-td key="name" :props="props">
            {{ props.row.name }}
          </q-td>
          <q-td key="calories" :props="props">
            <q-badge color="green">
              {{ props.row.calories }}
            </q-badge>
          </q-td>
          <q-td key="fat" :props="props">
            <q-badge color="purple">
              {{ props.row.fat }}
            </q-badge>
          </q-td>
          <q-td key="carbs" :props="props">
            <q-badge color="orange">
              {{ props.row.carbs }}
            </q-badge>
          </q-td>
          <q-td key="protein" :props="props">
            <q-badge color="primary">
              {{ props.row.protein }}
            </q-badge>
          </q-td>
          <q-td key="sodium" :props="props">
            <q-badge color="teal">
              {{ props.row.sodium }}
            </q-badge>
          </q-td>
          <q-td key="calcium" :props="props">
            <q-badge color="accent">
              {{ props.row.calcium }}
            </q-badge>
          </q-td>
          <q-td key="iron" :props="props">
            <q-badge color="amber">
              {{ props.row.iron }}
            </q-badge>
          </q-td>
        </q-tr>
      </template>

codepen - https://codepen.io/Pratik__007/pen/NWxbbMK?editors=1010

Edit -

You can do for dynamic columns as well just loop the columns.

<q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.value }}
          </q-td>

Donothing

But the thing is I dont know how many columns are there so this wont work in my case – Gasser

Answer 2

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>

Bali

This works great, but is there a way to have two conditions? I need to change the column color to one value if it's A, a second value if it's B, and a third value if it's C. – Indicative

You can create a method to return a value according to the desired condition. – Legislator