Odd/Even Table Row Colours

effiestar

Hello all!

I’m very new to Quasar & Coding in general (Just an FYI as I’m still mixing u my terminology, so sorry in advance).

I’m building a table that pulls info from a database of parts. However, to make it visually easier to read, I’m wanting to colourise the rows in grey & white. I’m having trouble figuring out how to do this given the different tables could have any number of rows?

Additionally, they also have an expanding button in each row which clicks open to display ‘more info’ buttons:

<q-btn size=“sm” color=“positive” round dense @click=“props.expand = !props.expand” :icon=“props.expand ? ‘remove’ : ‘add’” />

I want the expanded rows beneath the item to stay white while the main rows are odd/even in colour:

Could someone please help with a solution? Thank you!

walfin

Try

<q-table ...>
<template #body="props">
<q-tr :class="(props.rowIndex==%2)===0?'bg-grey':'bg-white'">
...
<div class="bg-white"><!--expanded portion-->
</div>
</q-tr>
</template>
</q-table>

effiestar

Hey @walfin thanks for helping! - I tried this option with my current code, but it is still returning an error

        <q-tr :props="props"
                  :class="(props.rowIndex==%2)===0?'bg-grey':'bg-white'"
            >
          <q-td 
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
            
          >
            {{ col.value }}

          </q-td>
          <q-td auto-width>
            
            <q-btn size="sm" color="positive" round dense @click="props.expand = !props.expand" :icon="props.expand ? 'remove' : 'add'" />
          </q-td>
        </q-tr>
        <q-tr v-show="props.expand" :props="props">
          <q-td colspan="100%">

            <div class="q-pa-dense q-gutter-md bg-white" style="inline" >
            <q-btn outline style="color: grey; inherit" label="Button 1" @click="moreinfo(props.row)" />
            <q-btn outline style="color: grey;" label="Button 2" />
            <q-btn outline style="color: grey;" icon="history" />
            <q-btn outline style="color: grey;" icon="report_problem" />
          </div>
       
          </q-td>
        </q-tr>
      </template>

This is my current code but it is still returning the following error, plus a couple of others regarding whitespace which hadn’t popped up before.

walfin

Hm, I think you don’t need to put in :props=“props” - can you try removing all of those and see if it works?

effiestar

Hey @walfin !

I’ve removed the extra :props the other errors are now gone, but the tables are still not returning alternate colours. Doesn’t seem to be a fan of the below:

<q-tr :class="(props.rowIndex==%2)===0?'bg-grey':'bg-white'"
            >
          <q-td 
            v-for="col in props.cols"
            :key="col.name"            
          >

walfin

@effiestar oh OK sorry it should not be (props.rowIndex==%2) it should just be (props.rowIndex%2)===0. Typo on my part.

Also, for your expanded portion I think you don’t actually need an inner div, you can just put the styles / classes on the enclosing q-td.

effiestar

@walfin you are brilliant! Thank you so much. This one has been bugging me for so long
Finally fixed and working great! Also, the div trick was something I didn’t pick up either!

No More Posting New Topics!

Odd/Even Table Row Colours