Q-table row highlight customization

[CWoodman]

I’m building tables with selectable rows. Is there a way to change the highlight color? Default is dull grey that doesn’t really show up on a big table. Something like ‘active-class’ for Q-item??

[turigeza]

@CWoodman I don’t think there is a ‘active-class’. But you can do it with css.
https://codepen.io/turigeza/pen/NWNdBRa?editors=0100

.q-table tbody td:before{
  background: rgba(255,0,0,0.1);
}

[CWoodman]

@turigeza OK, that’s setting the background when mouse is over the row. How to set it when row has been selected? TR doesn’t have an ‘active’ prop like q-item does.

[turigeza]

@CWoodman
I forgot you have to do that as well : ) The :after is the selected row.
https://codepen.io/turigeza/pen/eYZgLVJ?editors=0100

.q-table tbody td:after{
  background: rgba(255,0,0,0.2);
}
.q-table tbody td:before{
  background: rgba(255,0,0,0.1);
}

I don’t know why it is this way there must be some explanation on it …

[CWoodman]

Hmmm… Using ‘after’ highlights the row after selection, but text and icon disappear - it’s just a solid rectangle with the background color.

[turigeza]

@CWoodman
Post a pen (or at least code but pen better) and I try and help. It is difficult to guess what you are doing.

[CWoodman]

@turigeza It’s a big complicated component, so probably won’t work on codepen. But here’s the table code:

<q-table class="sticky-header non-selectable"
        :style="heightStyle"
        dense
        flat
        square
        :grid="$q.screen.lt.sm"
        virtual-scroll
        :rows-per-page-options="[0]"
        :pagination.sync="pagination"
        :data="tableItems"
        :columns="columns"
        row-key="name"
        selection="single"
        :selected.sync="selectedRow"
        :sort-method="customSort"
        :filter="searchTerm"
      >
        <template v-slot:header="props">
        <q-tr :props="props">
          <q-th></q-th> <!-- leave space for icon -->
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
        <template v-slot:body="props">
          <q-tr class="cursor-pointer" :props="props"
          @click.native="selectRow(props.row, $event)">
            <q-td auto-width>
              <q-icon size="xs" :name="props.row.icon.name" :color="props.row.icon.color" />
            </q-td>
            <q-td auto-width v-for="col in props.cols" :key="col.name" :props="props">
              {{ col.value }}
            </q-td>
          </q-tr>
        </template>
        <template v-slot:bottom>
          <div class="row" style="width: 100%">
            <div class="col-8">
              <div v-if="searchTerm">
                <div v-if="inCategoryName === allCategories">
                  Showing search result in all categories {{ stockStatus }}
                </div>
                <div v-else>
                  Showing search result in category: <b>{{ inCategoryName }}</b> {{ stockStatus }}
                </div>
              </div>
              <div v-else>
                <div v-if="inCategoryName === allCategories">
                  Showing {{  tableItems.length }} items in all categories {{ stockStatus }}
                </div>
                <div v-else>
                  Showing {{  tableItems.length }} items in category: <b>{{ inCategoryName }}</b> {{ stockStatus }}
                </div>
              </div>
            </div>
            <div class="col">
              <div>
                Total value: {{ totalValue.toFixed(2) }}
              </div>
            </div>
          </div>
        </template>
      </q-table>

And here’s a screen-shot with a row selected:

It’s OK, but would be nice to use a brighter color for selected row.

[CWoodman]

@CWoodman Here’s what it looks like with style:

.q-table tbody td:after
  background: lightblue

[metalsadman]

@CWoodman use your browser devtools to inspect elements and underlying classes, with trial an error, use css selectors to override underlying classes.

[CWoodman]

@metalsadman Can’t seem to get it to work. I think I’ll forget it. Thanks anyway.

[turigeza]

@CWoodman
The problem is with this background: lightblue
See the background styles I posted contain transparency like
background: rgba(255,0,0,0.1);
The 255,0,0 is the RGB colour. 0.1 is the how transparent that colour is.
A solid colour will cover everything else text icons name it …

[CWoodman]

@turigeza Got it! Works perfectly. Thanks for your help and patience!