Skip to content
This repository was archived by the owner on Mar 17, 2021. It is now read-only.

Commit 8c65c63

Browse files
committed
Update table.md
1 parent f07c849 commit 8c65c63

File tree

1 file changed

+98
-5
lines changed

1 file changed

+98
-5
lines changed

docs/components/table.md

Lines changed: 98 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,49 @@ export default {
2626
};
2727
```
2828

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+
2960
## Title & Search
3061
<div class="p-3 pb-5 border rounded-2 my-3">
3162
<v-table :fields="normal.fields" :items="normal.items">
32-
<template v-slot:toolbar="{ handleSearchInput, selected }">
63+
<template v-slot:header="{ handleSearchInput, selected }">
3364
<v-table-header
3465
title="Custom title"
3566
:handleSearchInput="handleSearchInput"
3667
>
3768
<template v-slot:action>
3869
<v-dropdown placement="bottom-end" :options="[{ label: 'Share' }, { label: 'Remove' }]">
3970
<template v-slot:toggle>
40-
<v-button appearance="alternative">Actions</v-button>
71+
<v-button size="3" appearance="alternative">Actions</v-button>
4172
</template>
4273
</v-dropdown>
4374
</template>
@@ -50,7 +81,7 @@ export default {
5081
<v-table :fields="normal.fields" :items="normal.items">
5182

5283
<!--custom header-->
53-
<template v-slot:toolbar="{ handleSearchInput }">
84+
<template v-slot:header="{ handleSearchInput }">
5485
<v-table-header
5586
title="Custom title"
5687
:handleSearchInput="handleSearchInput"
@@ -124,7 +155,7 @@ export default {
124155
## Pagination
125156
<div class="p-3 pb-5 border rounded-2 my-3">
126157
<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 }">
128159
<v-table-header title="Custom title" :handleSearchInput="handleSearchInput"></v-table-header>
129160
</template>
130161
<template v-slot:pagination="{ total, perPage }">
@@ -139,7 +170,7 @@ export default {
139170
:fields="pagination.fields"
140171
:items="pagination.items"
141172
>
142-
<template v-slot:toolbar="{ handleSearchInput, selected }">
173+
<template v-slot:header="{ handleSearchInput, selected }">
143174
<v-table-header
144175
title="Custom title"
145176
:handleSearchInput="handleSearchInput"
@@ -156,6 +187,34 @@ export default {
156187

157188
</v-table>
158189
```
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+
```
159218

160219
<script>
161220
export default {
@@ -228,3 +287,37 @@ export default {
228287
},
229288
};
230289
</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

Comments
 (0)