Vue Point Table

Table component that support freeze column, fix header when scrolling down, and manage column visibility

Installation

Install Package

npm i vue-point-table

or

yarn add vue-point-table

Import Globally

1import PointTable from 'vue-point-table'
2
3Vue.use(PointTable)

Import Inside Component

1import PointTable from 'vue-point-table'
2
3export default {
4  components: {
5    PointTable
6  }
7}

Usage

Using Props

Template

1<div id="app">
2  <vue-table :data="users"/>
3</div>

Scripts

1import PointTable from './components/PointTable'
2import users from './users.json'
3
4export default {
5  name: 'app',
6  components: {
7    PointTable
8  },
9  data () {
10    return {
11      users: users
12    }
13  }
14}

Using Slot

1<div id="app">
2  <point-table>
3    <template slot="p-head">
4        <tr>
5          <th>Name</th>
6          <th>Address</th>
7          <th>Phone</th>
8        </tr>
9    </template>
10    
11    <template slot="p-body">
12      <tr>
13        <td>John Doe</td>
14        <td>21 Street</td>
15        <td>+627314691</td>
16      </tr>
17      <tr>
18        <td>John Doe</td>
19        <td>22 Street</td>
20        <td>+627314692</td>
21      </tr>
22      <tr>
23        <td>John Doe</td>
24        <td>23 Street</td>
25        <td>+627314693</td>
26      </tr>
27    </template>
28  </point-table>
29</div>

Using Slot with extra header table

1<div id="app">
2  <point-table>
3    <template slot="p-extra">
4      <tr>
5        <th colspan="2"></th>
6        <th colspan="6">19 Nov</th>
7      </tr>
8      <tr>
9        <th colspan="2"></th>
10        <th colspan="3">Target</th>
11        <th colspan="3">Actual</th>
12      </tr>
13    </template>
14    <template slot="p-head">
15      <tr>
16        <th>No</th>
17        <th>Name</th>
18        <th>Call</th>
19        <th>Ec</th>
20        <th>Value</th>
21        <th>Call</th>
22        <th>Ec</th>
23        <th>Value</th>
24      </tr>
25    </template>
26    <template slot="p-body">
27      <tr>
28        <td>1</td>
29        <td>Adhi Lorraine</td>
30        <td>5</td>
31        <td>3</td>
32        <td>750000</td>
33        <td>0</td>
34        <td>0</td>
35        <td>0</td>
36      </tr>
37      <tr>
38        <td>1</td>
39        <td>Bagas Saputra</td>
40        <td>5</td>
41        <td>3</td>
42        <td>750000</td>
43        <td>0</td>
44        <td>0</td>
45        <td>0</td>
46      </tr>
47      <tr>
48        <td>1</td>
49        <td>Bagus</td>
50        <td>5</td>
51        <td>3</td>
52        <td>650000</td>
53        <td>0</td>
54        <td>0</td>
55        <td>0</td>
56      </tr>
57    </template>
58  </point-table>
59</div>

Rename Header

1<div id="app">
2  <vue-table v-bind:data="users" v-bind:headers="headers"></vue-table>
3</div>

1var app = new Vue({
2  el: '#app',
3  data: {
4    users: [
5      {
6        "id": 1,
7        "first_name": "John",
8        "last_name": "Doe",
9        "gender": "male",
10        "age": 24,
11        "email": "johndoe@point.red",
12      },      
13    ],
14    headers: {
15      "id": "ID",
16      "first_name": "First Name",
17      "last_name": "Last Name",
18      "gender": "Gender",
19      "age": "Age",
20      "email": "Email",
21    }
22  }
23})