Editable cell Data Table examples?



  • 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!



  • take a look here

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



  • @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.



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


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


  • @webhead , @leon

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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.