1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| <template>
| <v-client-table :data="tableData" :columns="columns" :options="options">
| <!-- <template slot="edit" slot-scope="props">
| <div>
| <b-btn variant="outline-success borderless icon-btn" class="btn-xs" @click.prevent="edit(props.row)"><i class="ion ion-md-create"></i></b-btn>
| <b-btn variant="outline-danger borderless icon-btn" class="btn-xs" @click.prevent="remove(props.row)"><i class="ion ion-md-close"></i></b-btn>
| </div>
| </template>
| <template slot="child_row" slot-scope="props">
| <div><b>First name:</b> {{props.row.first_name}}</div>
| <div><b>Last name:</b> {{props.row.last_name}}</div>
| </template> -->
| </v-client-table>
| </template>
|
| <style src="@/vendor/libs/vue-data-tables/vue-data-tables.scss" lang="scss"></style>
|
| <script>
| import Vue from 'vue'
| import {ClientTable} from 'vue-tables-2'
|
| Vue.use(ClientTable)
|
| export default {
| name: 'tables-vue-tables-2',
| data: () => ({
| tableData: [
| { id: 1, name: "John", age: "20" },
| { id: 2, name: "Jane", age: "24" },
| { id: 3, name: "Susan", age: "16" },
| { id: 4, name: "Chris", age: "55" },
| { id: 5, name: "Dan", age: "40" }
| ],
| columns: ['id', 'name', 'age', 'edit'],
| options: {
| pagination: { chunk: 1 },
| sortIcon: {
| is: 'fa-sort',
| base: 'fas',
| up: 'fa-sort-up',
| down: 'fa-sort-down'
| }
| }
| }),
| created () {
| },
| methods: {
| edit (row) {
| alert(`Edit: ${row.first_name} ${row.last_name}`)
| },
| remove (row) {
| alert(`Remove: ${row.first_name} ${row.last_name}`)
| }
| }
| }
| </script>
|
|
