Visualize data on the web with Quasar Tables

We are going to build this table on the web in just a few minutes!

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.

Here is how the “src” folder in a newly created Quasar project is structured

Using this structure which comes out-of-the-box with Quasar, we will set up the table component in the “components” folder in a file called “Table.vue”.

Because Quasar is built with Vue, when you set up a component file you should follow the Vue single file component layout, which is Template, Script, Style

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.

Note that you bind data to html properties the same way as you would in Vue, using the “:” colon in front of the name and putting the variable or function you are binding in “double quotes”. The “row-key” name used should be the name of the column containing unique values.

Let’s add the columns first.

Notice the data structure for columns is an array containing an object for each column. We will get into different ways to configure your columns in separate post. In this example, we have 4 columns — rowNumber, account, debit, and credit.

The columns need some data, so let’s do that.

The Data property should be structured the same as columns, using arrays. Each object in the array represents a row. You assign each value in the row to a column header as seen in 4 of the 10 rows added to the data property.

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.

Now we need to import that component into a page so we can view it in the browser.

In this example we are going to modify the “Index.vue” page Quasar provides out-of-the-box to set up the table.

This is the code that comes out-of-the-box

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:

Beautiful! You now have a sortable table displayed in the web browser with pagination out of the box!

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.