@@ -26,18 +26,49 @@ export default {
26
26
};
27
27
```
28
28
29
+ ## Custom template
30
+ <div class =" p-3 pb-5 border rounded-2 my-3 flex " >
31
+ <v-table :fields =" normal.fields " :items =" normal.items " >
32
+ <template v-slot:name="{ item }">
33
+ <div class="text-bold">{{ item.name }}</div>
34
+ <div class="text-secondary">Unique identifier: {{ item.id }}</div>
35
+ </template>
36
+ </v-table >
37
+ </div >
38
+
39
+ ``` html
40
+ <v-table :fields =" normal.fields" :items =" normal.items" />
41
+ ```
42
+ ``` javascript
43
+ export default {
44
+ data () {
45
+ return {
46
+ fields: {
47
+ name: { label: ' Name' , sortable: true },
48
+ createdAt: { label: ' Created' , sortable: false },
49
+ },
50
+ items: [
51
+ { id: 1 , name: ' Item 1' , createdAt: ' 1 days ago' , },
52
+ { id: 2 , name: ' Item 2' , createdAt: ' 2 days ago' , },
53
+ { id: 3 , name: ' Item 3' , createdAt: ' 3 days ago' , },
54
+ ],
55
+ };
56
+ }
57
+ };
58
+ ```
59
+
29
60
## Title & Search
30
61
<div class =" p-3 pb-5 border rounded-2 my-3 " >
31
62
<v-table :fields =" normal.fields " :items =" normal.items " >
32
- <template v-slot:toolbar ="{ handleSearchInput, selected }">
63
+ <template v-slot:header ="{ handleSearchInput, selected }">
33
64
<v-table-header
34
65
title="Custom title"
35
66
:handleSearchInput="handleSearchInput"
36
67
>
37
68
<template v-slot:action>
38
69
<v-dropdown placement="bottom-end" :options="[{ label: 'Share' }, { label: 'Remove' }]">
39
70
<template v-slot:toggle>
40
- <v-button appearance="alternative">Actions</v-button>
71
+ <v-button size="3" appearance="alternative">Actions</v-button>
41
72
</template>
42
73
</v-dropdown>
43
74
</template>
@@ -50,7 +81,7 @@ export default {
50
81
<v-table :fields =" normal.fields" :items =" normal.items" >
51
82
52
83
<!-- custom header-->
53
- <template v-slot:toolbar =" { handleSearchInput }" >
84
+ <template v-slot:header =" { handleSearchInput }" >
54
85
<v-table-header
55
86
title =" Custom title"
56
87
:handleSearchInput =" handleSearchInput"
@@ -124,7 +155,7 @@ export default {
124
155
## Pagination
125
156
<div class =" p-3 pb-5 border rounded-2 my-3 " >
126
157
<v-table : per-page ="5" : current-page ="pagination.currentPage": fields ="pagination.fields" : items ="pagination.items">
127
- <template v-slot:toolbar =" { handleSearchInput, selected } " >
158
+ <template v-slot:header =" { handleSearchInput, selected } " >
128
159
<v-table-header title =" Custom title " :handleSearchInput =" handleSearchInput " ></v-table-header >
129
160
</template >
130
161
<template v-slot:pagination =" { total, perPage } " >
@@ -139,7 +170,7 @@ export default {
139
170
:fields =" pagination.fields"
140
171
:items =" pagination.items"
141
172
>
142
- <template v-slot:toolbar =" { handleSearchInput, selected }" >
173
+ <template v-slot:header =" { handleSearchInput, selected }" >
143
174
<v-table-header
144
175
title =" Custom title"
145
176
:handleSearchInput =" handleSearchInput"
@@ -156,6 +187,34 @@ export default {
156
187
157
188
</v-table >
158
189
```
190
+ ``` javascript
191
+ export default {
192
+ data () {
193
+ return {
194
+ pagination: {
195
+ currentPage: 1 ,
196
+ fields: {
197
+ name: { label: ' Name' , sortable: true },
198
+ createdAt: { label: ' Created' , sortable: false },
199
+ },
200
+ items: [
201
+ { id: 1 , name: ' Item 1' , createdAt: ' 2 days ago' },
202
+ { id: 2 , name: ' Item 2' , createdAt: ' just now' },
203
+ { id: 3 , name: ' Item 3' , createdAt: ' 1 day ago' },
204
+ { id: 4 , name: ' Item 4' , createdAt: ' 1 week ago' },
205
+ { id: 5 , name: ' Item 5' , createdAt: ' just now' },
206
+ { id: 6 , name: ' Item 6' , createdAt: ' 3 years ago' },
207
+ { id: 7 , name: ' Item 7' , createdAt: ' 1 week ago' },
208
+ { id: 8 , name: ' Item 8' , createdAt: ' 1 week ago' },
209
+ { id: 9 , name: ' Item 9' , createdAt: ' 1 week ago' },
210
+ { id: 10 , name: ' Item 10' , createdAt: ' 9 week ago' },
211
+ ...
212
+ ],
213
+ },
214
+ };
215
+ },
216
+ };
217
+ ```
159
218
160
219
<script >
161
220
export default {
@@ -228,3 +287,37 @@ export default {
228
287
},
229
288
};
230
289
</script >
290
+
291
+ ## Table Props
292
+ Name | Type | Description | Default | Required
293
+ ---------- | -------- | ----------- | --------- | --------
294
+ value | Array | Returns selected values | [ ] | false
295
+ fields | Object | Columns labels | {} | false
296
+ items | Array | Data | [ ] | false
297
+ multiSelect| Boolean | If true user can select multiple values | false | false
298
+ perPage | Number | How many items to render per page | 10 | false
299
+ currentPage | Number | Current page for pagination | 1 | false
300
+ sortCompare | Function | Custom function to perform sort | null | false
301
+ emptyText | String | Text for state when no data found | 'There is no records.' | false
302
+ emptyFilteredText | String | Text for state when search results not found | 'There are no records matching your request' | false
303
+
304
+ ## Table Slots
305
+ Name | Props | Description
306
+ ------- | --------- | -----------
307
+ header | items, selected, handleSearchInput, disabledSearch | Slot for table header
308
+ {key} field name | value, item, index | Slot for custom cell
309
+ pagination | total, perPage | Slot for pagination
310
+
311
+ ## TableHeader Props
312
+ Name | Type | Description | Default
313
+ ---------- | -------- | ----------- | ---------
314
+ title | String | Appearance of spinner [ 'default', 'primary'] | 'Table title'
315
+ searchable | Boolean | Display search or not | false
316
+ handleSearchInput | Function | Function from table to keep ` query ` up to date to filter data properly. Required when ` searchable ` is ` true ` . | None | false
317
+ disabledSearch | Boolean |
318
+
319
+ ## TableHeader Slots
320
+ Name | Props | Description
321
+ ------- | --------- | -----------
322
+ title | None | Slot for title
323
+ action | None | Slot for action
0 commit comments