Q-table row highlight customization



  • 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??



  • @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);
    }
    


  • @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.



  • @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 …



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



  • @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.



  • @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:
    table.png
    It’s OK, but would be nice to use a brighter color for selected row.



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

    .q-table tbody td:after
      background: lightblue
    

    table2.png



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



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



  • @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 …



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


Log in to reply