@april said in Editable cell Data Table examples?:

<template slot=“col-message” slot-scope=“cell”>
<q-input :value=“cell.data” :data-id=“cell.row.unique_id” @change.native=“updateMessage”>
</q-input>
</template>

Pretty close! Here’s how I would improve performance:

<template slot="col-message" slot-scope="cell">
    <q-input :value="cell.data" @change.native="updateMessage($event, cell.row.__index)"></q-input>
    <!-- $event is Vue's magic accessor for native events -->
    <!-- Quasar tracks your row index by assigning a __index property -->
</template>

Then change your method like this

// -- methods:
updateMessage (event, rowIndex) {
  const newMessage = event.target.value
  this.$set(this.table[rowIndex], 'message', newMessage)
}

It’s been awhile since I looked at the quasar table code, but you could also try triggering the config watcher on the component even with the same data it might force a new render…

this.$set(this, “configDataTable”, this.configDataTable)

In Vue I’ve found reactive data outside of a computed property sometimes difficult to trigger the watchers in nested components.

I have 3 things to try:

1: instead of using:
this.dynamicDataTableColumns = …
Try using the Vue.set method like:
this.$set(this, ‘dynamicDataTableColumns’, YOUR_NEW_COLUMNS)

2: if that doesn’t help try moving the handleTabChange code into a computed property that returns a column array based the activeTabName.

3: use v-if in your template to draw a new table for each tab. You will end up with more components but due to the nature of v-if you won’t lose performance as it will only draw the related tabs table