<q-table
            title="Table Title"
            :data="products"
            :config="configs"
            :columns="columns"
            :filter="filter"
            row-key="id"
           >

           <q-tr :id="props.row.id" slot="body" slot-scope="props" :props="props">

                <q-td key="id" :props="props">{{ props.row.id }}</q-td>
                <q-td key="name" :props="props">{{ props.row.name }}</q-td>
                <q-td key="price" :props="props">{{ props.row.price }}</q-td>
                <q-td key="quantity" :props="props">{{ props.row.quantity }}</q-td>
                <q-td key="desc" :props="props">{{ props.row.short_description }}</q-td>
                <q-td key="special_price" :props="props">{{ props.row.special_price }}</q-td>
            </q-tr>
         </q-table>

but not showing data, I see data at Vue developer tools but when i click Inspect Dom, the results would be:

<table class="q-table q-table-horizontal-separator">
<thead>
<tr>
<th class="text-right">#</th>
<th class="text-right">name</th><th class="text-right">desc</th>
<th class="text-right">quantity</th>
<th class="text-right">price</th><th class="text-right">special_price</th>
</tr>
</thead>
<tbody>
<tr class="" id="52">
<!----><!----><!----><!----><!----><!---->
</tr>
<tr class="" id="53"><!----><!----><!----><!----><!----><!----></tr>
<tr class="" id="1893"><!----><!----><!----><!----><!----><!----></tr>
<tr class="" id="54"><!----><!----><!----><!----><!----><!----></tr>
<tr class="" id="55"><!----><!----><!----><!----><!----><!----></tr>
</tbody>
</table>

What is the problem?

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