forked from thomasbertet/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDatatablesView.vue
executable file
·229 lines (226 loc) · 9.61 KB
/
DatatablesView.vue
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<template lang="pug">
component-view(v-bind:doc="doc")
</template>
<script>
export default {
data () {
return {
doc: {
component: 'tables',
edit: 'DatatablesView',
title: 'Data tables',
id: '#data-tables-view',
desc: `The <code>v-data-table</code> component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, header tooltips, and row selection.`,
examples: [
{ header: 'Standard', file: 'tables/1', desc: 'The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the <code>hide-actions</code> prop.' },
{ header: 'Slots: items and headers', file: 'tables/7', desc: 'The <code>items</code> and <code>headers</code> slots can accept either a collection of <kbd>td/th</kbd> tags, or if you want control of the entire row, a <kbd>tr</kbd> tag.' },
{ header: 'Slots: headerCell', file: 'tables/8', desc: 'If you only want to apply some common markup or effect on each of the header cells, you can use the slot <code>headerCell</code>. In this example is has been used to apply a tooltip to each header.' },
{ header: 'Selectable rows', file: 'tables/2', desc: 'Selectable rows allow you to perform an action on specific and all rows.' },
{ header: 'Search with custom page text', file: 'tables/3', desc: 'The data table exposes a <code>search</code> prop that allows you to filter your data.' },
{ header: 'External pagination', file: 'tables/4', desc: 'Pagination can be controlled externally by using the <code>pagination</code> prop. Remember that you must apply the <code>.sync</code> modifier.' },
{ header: 'External sorting', file: 'tables/5', desc: 'Sorting can also be controlled externally by using the <code>pagination</code> prop. Remember that you must apply the <code>.sync</code> modifier. You can also use the prop to set the default sorted column.' },
{ header: 'Paginate and sort server-side', file: 'tables/6', desc: 'If you\'re loading data from a backend and want to paginate and sort the results before displaying them, you can use the <code>total-items</code> prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the <code>pagination</code> prop to listen for changes. Use the <code>loading</code> prop to display a progress bar while fetching data.'},
{ header: 'Theme support', file: 'tables/9', desc: 'The <code>v-data-table</code> component supports the application dark theme.'}
],
props: {
'v-data-table': {
shared: ['filterable', 'theme'],
params: [
[
'headers',
'Array',
'[]',
'The array of headers'
],
[
'header-text',
'String',
'text',
'If using an object, the text value for the header'
],
[
'hide-actions',
'Boolean',
'False',
'Hide the table actions'
],
[
'items',
'Array',
'[]',
'The array of table rows'
],
[
'no-results-text',
'String',
'No matching records found',
'Display text when there are no filtered results.'
],
[
'rows-per-page-text',
'String',
'Rows per page:',
'The default rows per page text'
],
[
'rows-per-page-items',
'Array',
'[5, 15, 25, { text: "All", value: -1 }]',
'The default values for the rows-per-page dropdown'
],
[
'select-all',
'[Boolean, String]',
'False',
'Adds header row select all checkbox. Can either be a String which specifies which color is applied to the button, or a Boolean (which uses the default color).'
],
[
'selected-key',
'String',
'id',
'Determines the item value used for identifying selected items.'
],
[
'search',
'String',
'-',
'The search model for filtering results'
],
[
'filter',
'Function',
`(val, search) => {
defined', 'boolean'].indexOf(typeof val) === -1 &&
val.toString().toLowerCase().indexOf(search) !== -1
}`,
'The filtering method for search'
],
[
'custom-filter',
'Function',
'-',
'Custom search filter'
],
[
'custom-sort',
'Function',
'-',
'Custom sort filter'
],
[
'total-items',
'Number',
'-',
'Manually sets total number of row items, which disables built-in sort and pagination. Used together with pagination prop to enable server-side sort and pagination.'
],
[
'loading',
'[Boolean, String]',
'False',
'Displays progress bar. Can either be a String which specifies which color is applied to the progress bar (primary, secondary, success, info, warning, error) or a Boolean (which uses the primary color)'
],
[
'pagination.sync',
'Object',
`{
sortBy: 'column',
page: 1,
rowsPerPage: 5,
descending: false,
totalItems: 0
}`,
'Used to control pagination and sorting from outside the data table. Can also be used to set default sorted column.'
]
],
model: {
type: ['Array'],
default: '',
description: 'Holds selected row items'
}
},
'v-edit-dialog': {
params: [
[
'cancel-text',
'String',
'Cancel',
`Set's the default text for the cancel button when using the <code>large</code> prop`
],
[
'save-text',
'String',
'Save',
`Set's the default text for the save button when using the <code>large</code> prop`
],
[
'Large',
'Boolean',
'False',
'Attachs a submit and cancel button to the dialog'
],
[
'Lazy',
'Boolean',
'False',
'Lazily load the dialog contents'
],
[
'transition',
'String',
'v-slide-x-reverse-transition',
'The transition of the edit dialog'
]
]
}
},
slots: {
'v-data-table': {
params: [
[
'scope[headerCell]',
'The scoped slot for each individual header cell. The available prop is <code>header</code> which is the current header. Can be used to apply some markup or effect to each cell, such as a tooltip.'
],
[
'scope[headers]',
`The scoped slot for templating the headers. Provide either a <kbd>tr</kbd> tag or <kbd>th</kbd> tags for all headers. Scope properties <code>headers</code>, <code>indeterminate</code>, and <code>all</code>.`
],
[
'scope[items]',
'The scoped slot for templating the row display. Available props are the currently iterated <code>item</code> and its <code>index</code> wthin the iterated items array. Provide either a <kbd>tr</kbd> tag or <kbd>th</kbd> tags for all columns.'
],
[
'scope[pageText]',
'The scoped slot for adding custom page text.'
]
]
}
},
events: {
'v-data-table': {
params: [
['input', 'Array', 'Array will contain selected rows'],
]
},
'v-edit-dialog': {
params: [
['open', '-', 'Edit dialog opened'],
['close', '-', 'Edit dialog closed'],
['cancel', '-', 'Cancel button was clicked'],
['save', '-', 'Save button was clicked'],
]
},
}
}
}
},
methods: {
saving () {
console.log('I saved!')
}
}
}
</script>
<style lang="stylus">
#data-tables-view
max-width: 1200px
</style>