[Vuejs]-Creating a dynamic datatable vue js

1👍

If i understand you want to dynamically create your table based on departments, projects and employees so you can quickly see how many in each department is working on a given project.

I’ve tried doing that dynamically (with mock data since i don’t know how your data is structured)
https://codepen.io/Hiws/pen/qBWywdM?editors=1010

👤Hiws

0👍

It is much easier if you use only <table> tag

 <table class='table table-dark' border='2px'>
  <thead>
    <tr>
      <th scope='col'>Id</th>
      <th scope='col'>Name</th>
      <th scope='col'>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for='(emp,index) in employee' :key='index' :employee='employee'>
      <td>{{ emp.id }}</td>
      <td>{{ emp.name }}</td>
      <td>{{ emp.department }}</td>
    </tr>
  </tbody>
</table>

I have used axios to retrive data and this way i am generating dynamic table. Also you can use bootstrap table to style it accordingly.

Leave a comment