Add example for editable table

[hhaensel]

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)

[hhaensel]

Adaptation to Quasar 1 is easy, just change :rows to :columns in the first line.

[hhaensel]

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

[rstoenescu]

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">

[hhaensel]

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.

[rstoenescu]

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.