There are a lot of pictures in this post so enjoy. You can read along, code along in a new Quasar project, or code along by adding Quasar to an existing Vue project. The only pre-requisite for coding along is to have a Quasar project set up. Let’s get right to it!
There are a number of ways to organize your project, but I am going to take the simplest approach for now by using the folder structure Quasar provides out-of-the-box.
Inside of the template section, you can remove the Div and insert the Quasar table. For now, we are going to create a very basic table with a title, columns, and data, then build from there. Also for now, we are going to store our data and columns in the Data property within the script section.
Let’s add the columns first.
The columns need some data, so let’s do that.
Great! We set up the Quasar table using the q-table html, binded the table properties to column data and row data, and added basic configurations to the columns.
In this example we are going to modify the “Index.vue” page Quasar provides out-of-the-box to set up the table.
First thing you should do is import the component right above the “export default” statement. Then, create a reference to the component using the “components” object. Lastly, add the Table component to the HTML (replacing the “img”).
To view the table you can run a local dev server using the “quasar dev” command in your Command Line Interface (CLI). When you run that command you should see this table:
There is so much more you can do with Quasar Tables! From editing cells, to filtering, to column and row selection, to connecting to a database, to full blown customization of the look and behavior. The possibilities are amazing!
If you found this post useful or easy to follow and want to learn more, give this post a clap and follow me for more digestible information.