Visualize data on the web with Quasar Tables

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.

--

--

--

Hi! I am a CPA and self-taught developer who loves data, automation, and web development. Follow me for awesome information!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Learning Web Development for Beginners: HTML, CSS and JS

Many-To-Many Relations with One Model Serving as Two Actors

JS Week3: DOM & GUIs

Fragmentation Station

How to Write Test Cases for React Hooks From Scratch

Angular Utilities: init Directive

Streamlit for Building Web Apps

KYVE — Incentivized testnet

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
TheAccountemist

TheAccountemist

Hi! I am a CPA and self-taught developer who loves data, automation, and web development. Follow me for awesome information!

More from Medium

Folium Map: How to Create a Table-Style Pop-up with HTML Code

Power BI With GridDB Cloud | GridDB: Open Source Time Series Database for IoT

Bar Chart with Word Cloud Filled Bars

Bar chart with one bar for each letter. Each bar is filled with a word cloud with popular names for that starting letter. E.g. the first bar is A, with 14% of all babies. Popular A names include Ava, Amelia, Aiden, Alexander, etc.

How to create a documentation website with MkDocs