Creating a dynamic datatable vue js

Question

I have a requirement to build a data table/svg graph which would look like the image below so the idea is we'll use axios to get data like what are the departments and projects and how many employees from particular department is working on particular project (basically the count). i could build a table just for projects or just for departments with b-tables

but i need them to be both column and horizonal headers

*sorry for the vague image

Hiws · Answer 1 · 2019-09-16T12:16:44.430

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

edited Sep 16 '19 at 12:16

answered Sep 16 '19 at 12:04

Hiws

8,230
1
19
36

And if you want the department column to be a "row header" see this minor adjustment https://codepen.io/tmorehouse/pen/pozZmwQ?editors=1010 – Troy Morehouse Sep 16 '19 at 13:10
1

I should mention that in my previous comment that all I added was the `isRowHeader: true` to the department field definition. – Troy Morehouse Sep 16 '19 at 13:30

score 0 · Answer 2 · answered Sep 16 '19 at 11:26

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.

answered Sep 16 '19 at 11:26

rushabh sojitra

142
14

Or use the new `` component and child helper components to structure/style your table. https://bootstrap-vue.js.org/docs/components/table#simple-tables and https://bootstrap-vue.js.org/docs/components/table#table-helper-components. Theses automatically generate the required aria attributes and roles, as well as also provide sticky header and column support – Troy Morehouse Sep 16 '19 at 13:04
yes, even that is possible, but you will have to install its files to use the `` tag. – rushabh sojitra Sep 17 '19 at 07:23

Creating a dynamic datatable vue js

2 Answers2