Creating dynamic table with Vue.js

Published on by Josip Jelić
Recently I had to develop a component which had to enable user write quotes and work orders inside our CRM. It has to have these functions: ability to enter description, quantity, price and tax rate numbers should be formatted nicely with thousands and decimals separators and currency symbol each column’s total should be auto calculated […]
blog

Recently I had to develop a component which had to enable user write quotes and work orders inside our CRM.

It has to have these functions:

  • ability to enter description, quantity, price and tax rate
  • numbers should be formatted nicely with thousands and decimals separators and currency symbol
  • each column’s total should be auto calculated as well as entire table totals,
  • total tax amount should be displayed in the end
  • delivery rate is added to total to make a grandtotal
  • user obviously has to be able to add and remove rows
  • ability to reorder rows

Usually I would create a nice looking HTML table with necessary columns in header, then move to body and make first (seed row) with empty input boxes, maybe one or two selects, in the end create some buttons for actions (adding and removing rows), footer will have some totals and ability to enter delivery rate and so on. 

Let’s break down some of the steps needed to do that in jQuery:

  • First I had to create keyDown event listeners on inputs  to make entire table responsive to human touch.
  • After that moved to programming the calculations, basically pull some numbers from the DOM and parse them to floats, do some math and update some other values in the DOM to reflect the change, take care of empty floats to return 0s instead of NaNs.
  • Be careful to attach needed events to newly created rows after insertion.
  • Oh, one more thing, I had to decide weather to use underscore.js for templating or use first row as “seed row” and always copy first row DOM in new places and be careful to empty all inputs before user can see new row being inserted.

While this can sound like an ordinary day at the office (or in my case the living room) I knew there is something better and deep inside felt bad for manipulating DOM and do all those data normalizing and calculations while all I really had to do was manipulate The Data (or The Model) and View will update itself accordingly, given that it has enough information to do so.

As you can see from description, there is a lot of DOM back and forthing, data normalization and an external library like autoNumeric or accounting.js to handle nicely formatted fields for currencies.

Since at the time I already had an urge to learn Angular.js and was looking for a problem to try to solve using Angular.js I thought, why the hell not! I started reading about Angular but wanted something more lightweight just to get the hang of it. Looked into Vue.js and saw a great Laravel + Vue.js tutorial at Laracasts so decision was made…

I’ll try do that with Vue.js!

 You can see end result here:

I’ll let code speak for itself…
Finished example: http://codepen.io/jjelic/pen/yevNLZ

Hint: take a look at how you can simply add and remove rows just by adding or removing rows from Model.

beautifull!

Also look at <select>s

No more deciding which one should be preselected manually either by PHP or jQuery – it just works!

Check out the <button>s

You can see how it’s easy to attach events that gets applied to each new row as you dynamically add it.

Hope you enjoyed my first blog.

Stay cool but be warm. Happy coding!

About the author

4 Responses to Creating dynamic table with Vue.js

  1. Anton says:

    Thank you so much for this blogpost. It has helped me overcome an almost identical obstacle and I’m no way near your skill level when it comes to programming. Without your post, I think I would have given up!

    One question though. How would I go about saving the rows position through my AJAX call? I’m thinking of having a v-model binding on the $index and point it to a key in the rows data. You see, I’m trying to make it work so that everytime I re-order my rows I send an update to my API with the all the rows position. Any thoughts?

  2. cynthia says:

    Thanks for the example, but the codepen link does not work for me.

    • Josip Jelić says:

      Hey Cynthia, thank you for your interest. Yes, Codepen was broken due to loading wrong Vue.js version. Should be working now.

Leave a Reply

Your email address will not be published. Required fields are marked *