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

user_6653602 0
Viewed 8371

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.

quasar-framework vue.js background-color css styles
2 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

user_16289840

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>
user_92726540
Related