What is the best way to handle q-table props??

[leonardoebert]

I’m using q-table on a project and i’ve been facing a situation that let me curious.
I am passing this "@click.native=“rowClick(props)” on q-table tag and “<q-tr slot=“body” slot-scope=“props” @click=“rowClick(props)” >” inside the q-table.
But it is asking to declare props on data (), but if a declare it, when i click on the row and put a console.log() on the function it returns to me empty, and if i don’t declare it returns me undefined.

What i want to know is the exact way to use the props on q-table.

[Hawkeye64]

You’re missing :props="props"
Here’s an example of mine:

<q-tr :id="props.row.id" slot="body" slot-scope="props" :props="props" @click.native.stop="rowClick(props.row)" @dblclick.native.stop="rowDoubleClick(props.row)" class="cursor-pointer" @mouseover.native="hoverMouseOver(props.row)" @mouseout.native="hoverMouseOut(props.row)" :style="selectedStyleObject(props.row)">

[leonardoebert]

Hi @hawkeye64, are you declarating props on the data()???

When i declare it this way it returns to me a empty string, and if i don’t declare it returns undefined. If possible you cloud show me a complete example??

Appreciate your help…

[s.molinari]

Here is a working example taken from the source code of the play app.

https://jsfiddle.net/49n8cLks/

Scott

[s.molinari]

props by the way, is the property (prop) built into the q-th, q-tr and q-td components. The v-bind method of :props is what is allowing those child components, used to fill slots, to get the data. You’ll notice in the example above, props is nowhere to be seen in the JS data() function.

Scott

[Hawkeye64]

@leonardoebert Exactly what he ( @s-molinari ) said!

[leonardoebert]

@Hawkeye64 , @s-molinari , the example works for me. It was a silly mistake that I did not see what was wrong. I really aprecciate the help from both of you…

[Hawkeye64]

Glad to have helped!

[MusicForMellons]

@Hawkeye64 @s-molinari Uh…, is this still relevant under quasar v1 ?

[Hawkeye64]

The scoped slot passes out props from q-table, which needs to be passed into q-tr.

Name
props

Description
QTable's row scoped slot property

Example
:props="props"