Add example for editable table
hhaensel opened this issue · comments
Description
I am missing an example of an editable table. which is easier to use than the existing popup-editing.
I propose to add one along the following lines
<q-table :columns="columns" v-model="table" :rows="rows" row-key="__id">
<template v-slot:body-cell="props">
<q-td>
<q-input v-model="props.row[props.col.name]"
input-style="font-size: 0.81rem; padding-top: 2px" dense borderless></q-input>
</q-td>
</template>
</q-table>
and a specific column only
<q-table :columns="columns" v-model="table" :rows="rows" row-key="__id">
<template v-slot:body-cell-name="props">
<q-td>
<q-input v-model="props.row[props.col.name]"
input-style="font-size: 0.81rem; padding-top: 2px"" dense borderless></q-input>
</q-td>
</template>
</q-table>
Documentation Section URL
https://quasar.dev/vue-components/table#popup-editing
Flavour
None
Areas
Components (quasar)
Adaptation to Quasar 1 is easy, just change :rows
to :columns
in the first line.
I should acknowledge this post that helped me finding this solution: https://dev.to/quasar/quasar-s-qtable-the-ultimate-component-4-6-all-the-slots-40g2
Hi,
There's also the "Popup editing" section, but added a simple one with QInput.
Don't forget to add props to your QTd: <q-td :props="props">
Why do Ineed to propagate the props?
I read somewhere that it is no longer necessary. Maybe that information was wrong, but it definitely works without it.
BTW, I referenced the popup-section in the description, because I personally don't like the usage. It needs too many mouse clicks if I want to edit multiple cells. In the above example I can use the tab key to move to the next cell.
It works until it doesn't. You haven't bumped into issues but you will as soon as you configure QTable more. You need to supply it.