Editable cell Data Table examples?

[ssuess]

I would like to allow cells in the Data Table component to be clicked on and then edited and saved, is this possible within Quasar? Are there any examples of this type someone could point me to? Thanks!

[benoitranque]

take a look here

Basically you can render the cell as a slot. So you can put anything you want there

[april]

@ssuess
This was what I did. I had a data table with a field called “message”.

First, this didn’t work:

<!-- THIS DOES NOT WORK -->
<template>
 <q-data-table :data="table"
                      :config="config"
                      :columns="columns" >
    <template slot="col-message" slot-scope="cell">
        <q-input  v-model="cell.data"></q-input>
    </template>
</template>

My solution:

<!-- SOLUTION -->
<template>
 <q-data-table :data="table"
                      :config="config"
                      :columns="columns" >
     <template slot="col-message" slot-scope="cell">
        <q-input :value="cell.data" :data-id="cell.row.unique_id" @change.native="updateMessage">
        </q-input>
    </template>
</template>

export default {
      data() {
            return {
                table : [
                       {
                         "message":"This is a test message 1",
                         "unique_id":1,
                       },
                       {
                          "message":"This is a test message 2",
                          "unique_id":2,
                       },
                ],
                config: {
                    title: 'Data Table',
                    refresh: true,
                    noHeader: false,
                    columnPicker: true,
                    leftStickyColumns: 0,
                    rightStickyColumns: 2,
                    bodyStyle: {
                        maxHeight: '500px'
                    },
                    rowHeight: '50px',
                    responsive: true,
                    pagination: {
                        rowsPerPage: 15,
                        options: [5, 10, 15, 30, 50, 500]
                    },
                    selection: 'multiple'
                },
                columns: [
                    {
                        label: 'Message',
                        field: 'message',
                        filter: true,
                        sort: true,
                        type: 'string',
                        width: '300px'
                    }
                ],
                pagination: true,
                rowHeight: 50,
                bodyHeightProp: 'maxHeight',
                bodyHeight: 500
            }
        },
         methods: {
            updateMessage(event ) {
                let rowId = parseInt(event.currentTarget.getAttribute('data-id'))
                // Find the row
                this.table.forEach(row => {
                    if (row.unique_id === rowId) {
                        row.message = event.target.value
                    }
                })
            }
      }
}

Anybody have a better solution? Mine is kinda hacky.

[Conan]

@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)
}

[leon]

Hi!
Can use a direct v-model too.

<template slot="col-message" slot-scope="cell">
    <q-input :v-model="table[cell.row.__index].message" ></q-input>
</template>

[april]

@webhead , @leon

Thank you so much! I’ve just learned about Vue’s $event and Quasar’s __index.

[neomobil]

Hi. What about the @click?
I just like show the input field when the user clicks the cell. Otherwise it should be normal string.

[benoitranque]

@neomobil one way to do this is to place the value in the placeholder. (And keep v-model empty). This is how you can input a number in the page counter of the data table

[neomobil]

Thanks for the answer.

[neomobil]

So maybe you know also about, how to add a q-select to the header section of the datatable?