Popup Editing with Quasar Tables

Above is quick video demonstrating the behavior of the popup edit component used within a Quasar table. The code used to create the table is at the bottom of this post.

This post is written under the assumption you have some knowledge of Vuejs, Javascript, and HTML.

To make this edit functionality work, the idea is:

1. You have a Table component (Table.vue) and a page component (Index.vue) which imports the Table component and displays it in the browser.
2. You have two objects in the script section holding data; one for your column headers and one for the data within the table. You should bind those objects to the table. You can also store the data in a Vuex store or database like Firebase if you desire.
3. The Quasar table component comes with something called “templates”, which should make sense if you are familiar with Vuejs or developing custom HTML components. With the template, you can access the the cells of the table using the “v-slot:body-cell”
4. Within the table data cell, you can insert the “q-popup-edit” component with a “q-input” component inside of that.
5. Templates come with a built-in “props” variable which you can pass into the template using “v-slot:body-cell=‘props’”. The props variable gives you access to things like the columns, rows, cells, rowIndex, and more. In this case, we leverage the props.rowIndex and props.col.name (column name) of each cell to access the correct value within the data object.
6. Finally, you bind the correct value from the data object to the popup edit and input elements using “v-model=‘data[props.rowIndex][props.col.name]’”.

That’s it! If you found this post useful then give it a clap and follow more for some more useful information. Peace!