Vue.js In 30 minutes
BLOG

Vue.js: Create web table for 30 minutes

Diatom Enterprises team demonstrates the example of development web grid using vue.js framework
Nikita Kovalov
3 Sep 2021
Contact Us

Welcome to Diatom Enterprises website!

Very often in our work, we have to create components for working with Tables. Typically, a client needs a quick and easy way to create tables with sorting, filtering and pagination. In addition, tables must be versatile so that they could be used for small data sets as well as for significant ones (more than 1000 records.)

In this article, we would like to demonstrate as an example how convenient and easy it is to cope with this work using the vue.js framework.

Try to follow the instructions and you will be able to develop the web grid component easily!

  1. Launch the console, go to the folder in which we will create the project.
  2. Add the latest version of vue, bootstrap and bootstrap-vue (the last 2 are needed for the table):
    install vue bootstrap-vue bootstrap
  3. Create HTML and JS files for the project , for example: hr.html, hr.js
  4. Add references to module into html and reference to JS file with code:
    references to module and JS file in html
  5. Let’s add a table with the header “hrSystem” (into the body tag)
    (Id is hrSystem and js file will use that ID to connect Vue object)
    connecting vue object
  6. Now please create JS object vue and provide the array into the table.
    Add Vue object and array of persons into hr.js. That array will be visible in the Table until you connect server part.creating JS objectVue Object:vue object
  7. Update html file and add fields declaration
    vue add fields declaration
  8. Let’s add a “Delete” button to every row
    vue add delete button
  9. Add a code into JS (to delete row)
    JS delete row
  10. To make rows editable – lets add a edit button, script and template for edit of row
    JS edit button
    JS edit button
  11. Let’s add a button to add new rows
    JS add new rows
  12. Let’s add a filter option
    JS filter option
  13. Let’s add sort option for some columns “‘sortable’: true”. Below is an example
    JS sort option

 

And 🙂 That is it.

As you may see, the logic to create a web table (web grid) is extremely easy.

Vue.js is beautiful and clear framework.

The example we showed to you was a small app we developed for Human Resources department of our company. Vue.js allowed creating the frontend part of the app. Everything else (backend, database, testing, deploy and stabilization) was added just for a few days.

If you have any questions, we welcome you to contact us, just click on Contact Us button below. Our team will be happy to help!

Sincerely

Diatom Enterprises Team – Experts in Custom Software Development

 

 

 

Previous
Next