If you’ve ever dreamt of making an impact on this world while you’re here, don’t ever give up on that dream.

No matter how you feel about your progress right now or if you believe it’s even still possible to reach your goal or not, the truth is that you can — just keep trying. Try every day. Try to learn anything you can. Try to be the best version of yourself. And also try to be happy with yourself for trying.

The outcome of your efforts may not always be what you envisioned in the beginning, but damn it…


Goal

The goal of this app is to keep track of changes made by users to data in a table. In a list next to the table, we are going to show the previous value, updated value, and cell location of the data that was changed.

You can read along or code along with this post by creating Quasar project. All code used in the video will be at the bottom of this post. Let’s get right to it!

Implementation

This is a simple app consisting of one page (Index.vue) and two UI components (Table.vue and Trail.vue).

When you look at…


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…

Final table
Final table
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.

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

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