-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
524 lines (278 loc) · 242 KB
/
atom.xml
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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Vue Search</title>
<subtitle>Vue Search</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://vue-guide.github.io/"/>
<updated>2020-03-19T01:59:36.533Z</updated>
<id>https://vue-guide.github.io/</id>
<author>
<name>Taeuk Kang</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Sass</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/sass/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/sass/</id>
<published>2020-03-14T10:04:47.000Z</published>
<updated>2020-03-19T01:59:36.533Z</updated>
<content type="html"><![CDATA[<h1 id="Sass"><a href="#Sass" class="headerlink" title="Sass"></a>Sass</h1><p>Vue-Good-Table’s styling is written in Sass. The source files are made available as part of the npm dependency.</p><p><strong>Vue-Good-Table’s root Sass file:</strong></p><figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">import</span> <span class="string">"../node_modules/vue-good-table/src/styles/style.scss"</span>;</span><br></pre></td></tr></table></figure><p>Vue-Good-Table has an optional feature to filter a column based on a multi-select dropdown. We use Vue-Select for this feature.</p><p><strong>Vue-Select’s root Sass file</strong></p><figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">import</span> <span class="string">"../node_modules/vue-select/src/scss/vue-select.scss"</span>;</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h1 id="Sass"><a href="#Sass" class="headerlink" title="Sass"></a>Sass</h1><p>Vue-Good-Table’s styling is written in Sass. The source files
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Style Classes</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/style-classes/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/style-classes/</id>
<published>2020-03-13T10:04:47.000Z</published>
<updated>2020-03-19T01:59:26.053Z</updated>
<content type="html"><![CDATA[<h1 id="Style-Classes"><a href="#Style-Classes" class="headerlink" title="Style Classes"></a>Style Classes</h1><p>Vue-good-table allows providing your own css classes for the table via <strong>styleClass</strong> option but it also has in-built classes that you can make use of.</p><p>::: tip NOTE<br>by default, tables have ‘vgt-table striped bordered’<br>:::</p><h2 id="vgt-table"><a href="#vgt-table" class="headerlink" title=".vgt-table"></a>.vgt-table</h2><p>Base class that initializes all the core styles for the table.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><vue-good-table</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"</span><br><span class="line"> styleClass="vgt-table"></span><br><span class="line"></vue-good-table></span><br></pre></td></tr></table></figure><theme-example styleclasses="vgt-table"><h2 id="vgt-table-striped"><a href="#vgt-table-striped" class="headerlink" title=".vgt-table .striped"></a>.vgt-table .striped</h2><p>Add row striping in your data table.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><vue-good-table</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"</span><br><span class="line"> styleClass="vgt-table striped"></span><br><span class="line"></vue-good-table></span><br></pre></td></tr></table></figure><theme-example styleclasses="vgt-table striped"><h2 id="vgt-table-bordered"><a href="#vgt-table-bordered" class="headerlink" title=".vgt-table .bordered"></a>.vgt-table .bordered</h2><p>Add borders to columns/rows</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><vue-good-table</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"</span><br><span class="line"> styleClass="vgt-table bordered"></span><br><span class="line"></vue-good-table></span><br></pre></td></tr></table></figure><theme-example styleclasses="vgt-table bordered"><h2 id="vgt-table-condensed"><a href="#vgt-table-condensed" class="headerlink" title=".vgt-table .condensed"></a>.vgt-table .condensed</h2><p>Have lots of rows? use condensed class to get more compact rows.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><vue-good-table</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"</span><br><span class="line"> styleClass="vgt-table condensed"></span><br><span class="line"></vue-good-table></span><br></pre></td></tr></table></figure><theme-example styleclasses="vgt-table condensed"></theme-example></theme-example></theme-example></theme-example>]]></content>
<summary type="html">
<h1 id="Style-Classes"><a href="#Style-Classes" class="headerlink" title="Style Classes"></a>Style Classes</h1><p>Vue-good-table allows prov
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Themes</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/style-configuration/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/style-configuration/</id>
<published>2020-03-12T10:04:47.000Z</published>
<updated>2020-03-19T01:59:03.828Z</updated>
<content type="html"><![CDATA[<h1 id="Themes"><a href="#Themes" class="headerlink" title="Themes"></a>Themes</h1><h2 id="Default"><a href="#Default" class="headerlink" title="Default"></a>Default</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><theme-example><h2 id="Black-rhino"><a href="#Black-rhino" class="headerlink" title="Black-rhino"></a>Black-rhino</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">theme</span>=<span class="string">"black-rhino"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><theme-example theme="black-rhino"><h2 id="Nocturnal"><a href="#Nocturnal" class="headerlink" title="Nocturnal"></a>Nocturnal</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">theme</span>=<span class="string">"nocturnal"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><theme-example theme="nocturnal"></theme-example></theme-example></theme-example>]]></content>
<summary type="html">
<h1 id="Themes"><a href="#Themes" class="headerlink" title="Themes"></a>Themes</h1><h2 id="Default"><a href="#Default" class="headerlink" ti
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Server Side Table</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/remote-workflow/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/remote-workflow/</id>
<published>2020-03-11T10:04:47.000Z</published>
<updated>2020-03-19T01:58:39.808Z</updated>
<content type="html"><![CDATA[<h1 id="Server-Side-Table"><a href="#Server-Side-Table" class="headerlink" title="Server Side Table"></a>Server Side Table</h1><h2 id="Why-Remote-Mode"><a href="#Why-Remote-Mode" class="headerlink" title="Why Remote Mode?"></a>Why Remote Mode?</h2><p>Vue-good-table’s in-built features like sorting, paging, filtering etc. are all performed client side and therefore are great for most of the use-cases. Sometimes though, we might have <strong>too much data to render all of it at once on the UI</strong>. In such cases, we would want to do things like sorting, paging, filtering on the server side. Fortunately, vue-good-table comes with <code>remote mode</code> to switch from client side to server side. </p><p>When remote mode is on, vue-good-table does not perform sorting, paging, filtering etc. on the client side but instead emits events that we can use to then send proper parameters to the back-end. The server then is expected to send the correct rows to display on the UI. </p><p>Following is a workflow you can use to get a server powered vue-good-table instance: </p><h2 id="Prep-Work"><a href="#Prep-Work" class="headerlink" title="Prep Work"></a>Prep Work</h2><h3 id="What-do-we-send-to-server"><a href="#What-do-we-send-to-server" class="headerlink" title="What do we send to server?"></a>What do we send to server?</h3><p>Before we dive into remote mode, lets agree on what we’re going to be sending to the server. A set of parameters that tells the server exactly what rows I need to get back. Here’s a proposed parameter object to send: </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">serverParams: {</span><br><span class="line"> <span class="comment">// a map of column filters example: {name: 'john', age: '20'}</span></span><br><span class="line"> columnFilters: {</span><br><span class="line"> },</span><br><span class="line"> sort: [</span><br><span class="line"> {</span><br><span class="line"> field: <span class="string">''</span>, <span class="comment">// example: 'name'</span></span><br><span class="line"> type: <span class="string">''</span> <span class="comment">// 'asc' or 'desc'</span></span><br><span class="line"> }</span><br><span class="line"> ],</span><br><span class="line"></span><br><span class="line"> page: <span class="number">1</span>, <span class="comment">// what page I want to show</span></span><br><span class="line"> perPage: <span class="number">10</span> <span class="comment">// how many items I'm showing per page</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>With the above information, server should be able to generate the relevant rows to send back.</p><h3 id="What-does-the-server-send-back"><a href="#What-does-the-server-send-back" class="headerlink" title="What does the server send back?"></a>What does the server send back?</h3><p>Two things are required for the server to send back </p><ol><li><strong>relevant rows</strong> - set of rows for the current page, matching the current filter and sort. </li><li><strong>totalRecords</strong> - number of total records matching the params we sent (not just the current page). This is required for the pagination to work correctly.</li></ol><h2 id="Set-mode-to-remote"><a href="#Set-mode-to-remote" class="headerlink" title="Set mode to remote"></a>Set mode to remote</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">mode</span>=<span class="string">"remote"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:totalRows</span>=<span class="string">"totalRecords"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span>/></span></span><br></pre></td></tr></table></figure><p>this tells VGT to not do client side paging/sorting/filtering</p><h2 id="Provide-handlers-for-user-events"><a href="#Provide-handlers-for-user-events" class="headerlink" title="Provide handlers for user events"></a>Provide handlers for user events</h2><p>Now instead of doing the above client side, each user interaction will generate events. So lets provide handlers for those events:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">mode</span>=<span class="string">"remote"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-page-change</span>=<span class="string">"onPageChange"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-sort-change</span>=<span class="string">"onSortChange"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-column-filter</span>=<span class="string">"onColumnFilter"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-per-page-change</span>=<span class="string">"onPerPageChange"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:totalRows</span>=<span class="string">"totalRecords"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:isLoading.sync</span>=<span class="string">"isLoading"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span>/></span></span><br></pre></td></tr></table></figure><p>… in data</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">data() {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> isLoading: <span class="literal">false</span>,</span><br><span class="line"> columns: [</span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line"> ],</span><br><span class="line"> rows: [],</span><br><span class="line"> totalRecords: <span class="number">0</span>,</span><br><span class="line"> serverParams: {</span><br><span class="line"> columnFilters: {</span><br><span class="line"> },</span><br><span class="line"> sort: {</span><br><span class="line"> field: <span class="string">''</span>, </span><br><span class="line"> type: <span class="string">''</span>,</span><br><span class="line"> },</span><br><span class="line"> page: <span class="number">1</span>, </span><br><span class="line"> perPage: <span class="number">10</span></span><br><span class="line"> }</span><br><span class="line"> }; </span><br><span class="line">},</span><br></pre></td></tr></table></figure><p>… handlers</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> updateParams(newProps) {</span><br><span class="line"> <span class="keyword">this</span>.serverParams = <span class="built_in">Object</span>.assign({}, <span class="keyword">this</span>.serverParams, newProps);</span><br><span class="line"> },</span><br><span class="line"> </span><br><span class="line"> onPageChange(params) {</span><br><span class="line"> <span class="keyword">this</span>.updateParams({<span class="attr">page</span>: params.currentPage});</span><br><span class="line"> <span class="keyword">this</span>.loadItems();</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> onPerPageChange(params) {</span><br><span class="line"> <span class="keyword">this</span>.updateParams({<span class="attr">perPage</span>: params.currentPerPage});</span><br><span class="line"> <span class="keyword">this</span>.loadItems();</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> onSortChange(params) {</span><br><span class="line"> <span class="keyword">this</span>.updateParams({</span><br><span class="line"> sort: [{</span><br><span class="line"> type: params.sortType,</span><br><span class="line"> field: <span class="keyword">this</span>.columns[params.columnIndex].field,</span><br><span class="line"> }],</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">this</span>.loadItems();</span><br><span class="line"> },</span><br><span class="line"> </span><br><span class="line"> onColumnFilter(params) {</span><br><span class="line"> <span class="keyword">this</span>.updateParams(params);</span><br><span class="line"> <span class="keyword">this</span>.loadItems();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// load items is what brings back the rows from server</span></span><br><span class="line"> loadItems() {</span><br><span class="line"> getFromServer(<span class="keyword">this</span>.serverParams).then(<span class="function"><span class="params">response</span> =></span> {</span><br><span class="line"> <span class="keyword">this</span>.totalRecords = response.totalRecords;</span><br><span class="line"> <span class="keyword">this</span>.rows = response.rows;</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="So-what-is-happening"><a href="#So-what-is-happening" class="headerlink" title="So, what is happening?"></a>So, what is happening?</h2><ol><li>Everytime the user interacts with the table, an appropriate event is emitted.</li><li>Along with this, VGT knows that this event will now result in fetching things from the backend. So it starts a loading screen. </li><li>In the handler of that event, we first update the <code>serverParams</code> and then send a request to the backend. </li><li>When we get the response back, we update both the totalRecords and the rows data objects. </li><li>Row object’s update signifies to VGT that the loading event is now done, and VGT shows the new rows on the table. </li></ol><p>::: tip<br>If you want to show loading notification manually, you can do so using table’s <code>:isLoading.sync="isLoading"</code> property.<br>:::</p><p>::: tip<br>to style the loading dom, you can use the slot - <code>loadingContent</code><br>:::</p><h2 id="Conclusion"><a href="#Conclusion" class="headerlink" title="Conclusion"></a>Conclusion</h2><p>So that wasn’t too bad. You now have VGT that’s powered completely by your backend server.</p>]]></content>
<summary type="html">
<h1 id="Server-Side-Table"><a href="#Server-Side-Table" class="headerlink" title="Server Side Table"></a>Server Side Table</h1><h2 id="Why-R
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Grouped Table</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/grouped-table/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/grouped-table/</id>
<published>2020-03-10T10:04:47.000Z</published>
<updated>2020-03-19T01:58:14.050Z</updated>
<content type="html"><![CDATA[<h1 id="Grouped-Table"><a href="#Grouped-Table" class="headerlink" title="Grouped Table"></a>Grouped Table</h1><p>To create grouped rows, you need two things.</p><h4 id="1-Add-groupOptions-to-table-component"><a href="#1-Add-groupOptions-to-table-component" class="headerlink" title="1. Add groupOptions to table component"></a>1. Add groupOptions to table component</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:groupOptions</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span></span></span><br><span class="line"><span class="tag">></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h4 id="2-Make-sure-the-rows-are-formatted-correctly-Grouped-rows-need-to-be-nested-within-header-rows-containing-data-rows-in-their-children-property-For-example"><a href="#2-Make-sure-the-rows-are-formatted-correctly-Grouped-rows-need-to-be-nested-within-header-rows-containing-data-rows-in-their-children-property-For-example" class="headerlink" title="2. Make sure the rows are formatted correctly. Grouped rows need to be nested within header rows containing data rows in their children property. For example:"></a>2. Make sure the rows are formatted correctly. Grouped rows need to be nested within header rows containing data rows in their children property. For example:</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">rows: [</span><br><span class="line"> {</span><br><span class="line"> mode: <span class="string">"span"</span>, <span class="comment">// span means this header will span all columns</span></span><br><span class="line"> label: <span class="string">"Mammal"</span>, <span class="comment">// this is the label that'll be used for the header</span></span><br><span class="line"> html: <span class="literal">false</span>, <span class="comment">// if this is true, label will be rendered as html</span></span><br><span class="line"> children: [</span><br><span class="line"> { <span class="attr">name</span>: <span class="string">"Elephant"</span>, <span class="attr">diet</span>: <span class="string">"herbivore"</span>, <span class="attr">count</span>: <span class="number">5</span> },</span><br><span class="line"> { <span class="attr">name</span>: <span class="string">"Cat"</span>, <span class="attr">diet</span>: <span class="string">"carnivore"</span>, <span class="attr">count</span>: <span class="number">28</span> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line">];</span><br></pre></td></tr></table></figure><grouped-table :options="{enabled: true}"><h4 id="3-Sometimes-you-might-want-a-summary-row-instead-of-a-header-row-For-example-if-you-want-to-show-total-count-for-your-group"><a href="#3-Sometimes-you-might-want-a-summary-row-instead-of-a-header-row-For-example-if-you-want-to-show-total-count-for-your-group" class="headerlink" title="3. Sometimes, you might want a summary row instead of a header row. For example, if you want to show total count for your group"></a>3. Sometimes, you might want a summary row instead of a header row. For example, if you want to show total count for your group</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">rows: [</span><br><span class="line"> {</span><br><span class="line"> name: <span class="string">"Mammals Total"</span>, <span class="comment">// this is the label that'll be used for the header</span></span><br><span class="line"> diet: <span class="literal">undefined</span>,</span><br><span class="line"> count: <span class="string">""</span>, <span class="comment">// total count will be displayed here</span></span><br><span class="line"> children: [</span><br><span class="line"> { <span class="attr">name</span>: <span class="string">"Elephant"</span>, <span class="attr">diet</span>: <span class="string">"herbivore"</span>, <span class="attr">count</span>: <span class="number">5</span> },</span><br><span class="line"> { <span class="attr">name</span>: <span class="string">"Cat"</span>, <span class="attr">diet</span>: <span class="string">"carnivore"</span>, <span class="attr">count</span>: <span class="number">28</span> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line">];</span><br></pre></td></tr></table></figure><h4 id="4-If-you-want-the-header-summary-row-to-show-up-at-the-bottom-of-the-group-you-can-specify-that-in-the-groupOptions-property-of-the-table"><a href="#4-If-you-want-the-header-summary-row-to-show-up-at-the-bottom-of-the-group-you-can-specify-that-in-the-groupOptions-property-of-the-table" class="headerlink" title="4. If you want the header/summary row to show up at the bottom of the group, you can specify that in the groupOptions property of the table."></a>4. If you want the header/summary row to show up at the bottom of the group, you can specify that in the groupOptions property of the table.</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:groupOptions</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> headerPosition: 'bottom',</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span></span></span><br><span class="line"><span class="tag">></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><grouped-table :options="{enabled: true, headerPosition: 'bottom'}"><h4 id="5-What-if-you-wanted-to-add-a-total-count-in-summary-rows"><a href="#5-What-if-you-wanted-to-add-a-total-count-in-summary-rows" class="headerlink" title="5. What if you wanted to add a total count in summary rows?"></a>5. What if you wanted to add a total count in summary rows?</h4><p>In your column definition add a property, <code>headerField</code>. This is just like <code>field</code> property but for summary/header rows only. So lets say we wanted to add a <strong>sum function</strong> to this field.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// in columns</span></span><br><span class="line">{</span><br><span class="line"> label: <span class="string">'Count'</span>,</span><br><span class="line"> field: <span class="string">'count'</span>,</span><br><span class="line"> headerField: <span class="keyword">this</span>.sumCount,</span><br><span class="line"> type: <span class="string">'number'</span>,</span><br><span class="line">},</span><br><span class="line"></span><br><span class="line"><span class="comment">// in methods we define sumCount</span></span><br><span class="line">methods: {</span><br><span class="line"> sumCount(rowObj) {</span><br><span class="line"> <span class="built_in">console</span>.log(rowObj);</span><br><span class="line"> <span class="keyword">let</span> sum = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < rowObj.children.length; i++) {</span><br><span class="line"> sum += rowObj.children[i].count;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> sum;</span><br><span class="line"> },</span><br><span class="line">},</span><br></pre></td></tr></table></figure><h2 id="Customizing-Header-Row"><a href="#Customizing-Header-Row" class="headerlink" title="Customizing Header Row"></a>Customizing Header Row</h2><p>If you want more control over what the header row looks like, you can use slots the same way you <a href="/guide/advanced/#custom-row-template">customize rows</a>. For example if you want to add a button in the header row or something, this would be the way to do it.</p><h3 id="When-mode-is-‘span’"><a href="#When-mode-is-‘span’" class="headerlink" title="When mode is ‘span’"></a>When mode is ‘span’</h3><p>In this case, the header row spans across all columns</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><vue-good-table</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"</span><br><span class="line"> :group-options="{</span><br><span class="line"> enabled: true,</span><br><span class="line"> headerPosition: 'top'</span><br><span class="line"> }"</span><br><span class="line">></span><br><span class="line"> <template slot="table-header-row" slot-scope="props"></span><br><span class="line"> <span class="my-fancy-class"></span><br><span class="line"> {{ props.row.label }}</span><br><span class="line"> </span></span><br><span class="line"> </template></span><br><span class="line"> </vue-good-table></span><br></pre></td></tr></table></figure><grouped-custom-span :options="{enabled: true, headerPosition: 'top'}"><h3 id="When-mode-is-not-‘span’"><a href="#When-mode-is-not-‘span’" class="headerlink" title="When mode is not ‘span’"></a>When mode is not ‘span’</h3><p>In this case header row expects a value for each column</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><vue-good-table</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"</span><br><span class="line"> :group-options="{</span><br><span class="line"> enabled: true,</span><br><span class="line"> headerPosition: 'top'</span><br><span class="line"> }"</span><br><span class="line">></span><br><span class="line"> <template slot="table-header-row" slot-scope="props"></span><br><span class="line"> <span v-if="props.column.field == 'action'"></span><br><span class="line"> <button class="fancy-btn">Action</button></span><br><span class="line"> </span></span><br><span class="line"> <span v-else></span><br><span class="line"> {{props.formattedRow[props.column.field]}}</span><br><span class="line"> </span></span><br><span class="line"> </template></span><br><span class="line"> </vue-good-table></span><br></pre></td></tr></table></figure><grouped-custom :options="{enabled: true, headerPosition: 'top'}"><p>::: tip</p><ul><li>The original row object can be accessed via <code>props.row</code></li><li>The column object can be accessed via <code>props.column</code></li><li>You can access the formatted row data (for example - formatted date) via <code>props.formattedRow</code><br>:::</li></ul><h2 id="Collapsable-Rows"><a href="#Collapsable-Rows" class="headerlink" title="Collapsable Rows"></a>Collapsable Rows</h2><p>To allow the row to collapse and expand you can use the groupOption “collapsable”. You can either pass in a boolean or a number.<br>If <code>collapsable</code> is set to <code>true</code> then it will default to making the first column collapsable. Alternatively, you can specify the column index number.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">ref</span>=<span class="string">"myCustomTable"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:groupOptions</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> collapsable: true // or column index</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span></span></span><br><span class="line"><span class="tag">></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><p>To expand/collapse all you can use the method called <code>expandAll</code> or <code>collapseAll</code>.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$refs.myCustomTable.expandAll();</span><br><span class="line"><span class="keyword">this</span>.$refs.myCustomTable.collapseAll();</span><br></pre></td></tr></table></figure></grouped-custom></grouped-custom-span></grouped-table></grouped-table>]]></content>
<summary type="html">
<h1 id="Grouped-Table"><a href="#Grouped-Table" class="headerlink" title="Grouped Table"></a>Grouped Table</h1><p>To create grouped rows, yo
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Checkbox Table</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/checkbox-table/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/checkbox-table/</id>
<published>2020-03-09T10:04:47.000Z</published>
<updated>2020-03-19T01:57:52.646Z</updated>
<content type="html"><![CDATA[<h1 id="Checkbox-Table"><a href="#Checkbox-Table" class="headerlink" title="Checkbox Table"></a>Checkbox Table</h1><p>One of the most common customizations in datatables is selectable rows. Creating a checkbox table with <strong>vue-good-table</strong> is easier than ever.</p><h2 id="Configuration"><a href="#Configuration" class="headerlink" title="Configuration"></a>Configuration</h2><p>type: <code>Object</code></p><p>Object containing select options</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-selected-rows-change</span>=<span class="string">"selectionChanged"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:selectOptions</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row</span></span></span><br><span class="line"><span class="tag"><span class="string"> selectionInfoClass: 'custom-class',</span></span></span><br><span class="line"><span class="tag"><span class="string"> selectionText: 'rows selected',</span></span></span><br><span class="line"><span class="tag"><span class="string"> clearSelectionText: 'clear',</span></span></span><br><span class="line"><span class="tag"><span class="string"> disableSelectInfo: true, // disable the select info panel on top</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br></pre></td></tr></table></figure><p>Although, the <code>on-selected-rows-change</code> event should be enough for you to keep track of selected rows. If at any time you need to know what rows are selected, you can get it via ref.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$refs[<span class="string">'my-table'</span>].selectedRows;</span><br></pre></td></tr></table></figure><h3 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><vue-good-table</span><br><span class="line"> @on-selected-rows-change="selectionChanged"</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"</span><br><span class="line"> :select-options="{ enabled: true }"</span><br><span class="line"> :search-options="{ enabled: true }"></span><br><span class="line"></vue-good-table></span><br></pre></td></tr></table></figure><checkbox-table><h2 id="Selected-row-action-slot"><a href="#Selected-row-action-slot" class="headerlink" title="Selected row action slot"></a>Selected row action slot</h2><p>Once you select a row, an info bar shows up. This bar allows for a customizable slot for your action buttons. </p><h3 id="Example-1"><a href="#Example-1" class="headerlink" title="Example"></a>Example</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-selected-rows-change</span>=<span class="string">"selectionChanged"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:select-options</span>=<span class="string">"{ </span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:search-options</span>=<span class="string">"{ enabled: true }"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"selected-row-actions"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span>></span>Action 1<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br><span class="line"><span class="comment"><!-- click on a row below to show the action button --></span></span><br></pre></td></tr></table></figure><checkbox-table :show-slot="true"><p>::: tip Note<br>You can style the selection info bar by supplying a css class to <code>selectionInfoClass</code> property.<br>:::</p></checkbox-table></checkbox-table>]]></content>
<summary type="html">
<h1 id="Checkbox-Table"><a href="#Checkbox-Table" class="headerlink" title="Checkbox Table"></a>Checkbox Table</h1><p>One of the most common
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Customizations</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/advanced/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/advanced/</id>
<published>2020-03-08T10:04:47.000Z</published>
<updated>2020-03-19T01:57:29.900Z</updated>
<content type="html"><![CDATA[<h1 id="Customizations"><a href="#Customizations" class="headerlink" title="Customizations"></a>Customizations</h1><h2 id="Custom-Row-Template"><a href="#Custom-Row-Template" class="headerlink" title="Custom Row Template"></a>Custom Row Template</h2><p>Sometimes you might want to customize exactly how rows are displayed in a table. Vue-good-table also supports dynamic td templates where you dictate how to display the cells. Example:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">template</span> <span class="attr">slot</span>=<span class="string">"table-row"</span> <span class="attr">slot-scope</span>=<span class="string">"props"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-if</span>=<span class="string">"props.column.field == 'age'"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">style</span>=<span class="string">"font-weight: bold; color: blue;"</span>></span>{{props.row.age}}<span class="tag"></<span class="name">span</span>></span> </span><br><span class="line"> <span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-else</span>></span></span><br><span class="line"> {{props.formattedRow[props.column.field]}}</span><br><span class="line"> <span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">template</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h3 id="Result"><a href="#Result" class="headerlink" title="Result"></a>Result</h3><custom-row><p>::: tip NOTE</p><ul><li>The original row object can be accessed via <code>props.row</code></li><li>The currently displayed table row index can be accessed via <code>props.index</code> . </li><li>The original row index can be accessed via <code>props.row.originalIndex</code>. You can then access the original row object by using <code>rows[props.row.originalIndex]</code>.</li><li>The column object can be accessed via <code>props.column</code></li><li>You can access the formatted row data (for example - formatted date) via <code>props.formattedRow</code><br>:::</li></ul><h2 id="Adding-custom-columns"><a href="#Adding-custom-columns" class="headerlink" title="Adding custom columns"></a>Adding custom columns</h2><p>Sometimes you might want to add columns to the table that are not part of your row data. Maybe before or after the other columns. </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">template</span> <span class="attr">slot</span>=<span class="string">"table-row"</span> <span class="attr">slot-scope</span>=<span class="string">"props"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-if</span>=<span class="string">"props.column.field == 'before'"</span>></span></span><br><span class="line"> before</span><br><span class="line"> <span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-else-if</span>=<span class="string">"props.column.field == 'after'"</span>></span></span><br><span class="line"> after</span><br><span class="line"> <span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-else</span>></span></span><br><span class="line"> {{props.formattedRow[props.column.field]}}</span><br><span class="line"> <span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">template</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><p>keep in mind that you’ll need to add the custom columns to your column definition.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> label: <span class="string">'Before'</span>,</span><br><span class="line"> field: <span class="string">'before'</span></span><br><span class="line">},</span><br><span class="line">{</span><br><span class="line"> label: <span class="string">'After'</span>,</span><br><span class="line"> field: <span class="string">'after'</span></span><br><span class="line">},</span><br></pre></td></tr></table></figure><h3 id="Result-1"><a href="#Result-1" class="headerlink" title="Result"></a>Result</h3><before-after-columns><h2 id="Custom-column-headers"><a href="#Custom-column-headers" class="headerlink" title="Custom column headers"></a>Custom column headers</h2><p>Sometimes you might want to customize column headers. You can do that in the following way</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">template</span> <span class="attr">slot</span>=<span class="string">"table-column"</span> <span class="attr">slot-scope</span>=<span class="string">"props"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-if</span>=<span class="string">"props.column.label =='Name'"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-address-book"</span>></span><span class="tag"></<span class="name">i</span>></span> {{props.column.label}}</span><br><span class="line"> <span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">v-else</span>></span></span><br><span class="line"> {{props.column.label}}</span><br><span class="line"> <span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">template</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="Custom-pagination"><a href="#Custom-pagination" class="headerlink" title="Custom pagination"></a>Custom pagination</h2><p>Sometimes you might want to customize the pagination. You can do that in the following way:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{enabled: true}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">template</span> <span class="attr">slot</span>=<span class="string">"pagination-bottom"</span> <span class="attr">slot-scope</span>=<span class="string">"props"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">custom-pagination</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:total</span>=<span class="string">"props.total"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pageChanged</span>=<span class="string">"props.pageChanged"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:perPageChanged</span>=<span class="string">"props.perPageChanged"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">custom-pagination</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">template</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// within your <custom-pagination> component</span></span><br><span class="line">props: {</span><br><span class="line"> pageChanged: {</span><br><span class="line"> type: <span class="built_in">Function</span>,</span><br><span class="line"> },</span><br><span class="line"> perPageChanged: {</span><br><span class="line"> type: <span class="built_in">Function</span>,</span><br><span class="line"> },</span><br><span class="line">}</span><br><span class="line"><span class="comment">// and...</span></span><br><span class="line">methods: {</span><br><span class="line"> customPageChange(customCurrentPage) {</span><br><span class="line"> <span class="keyword">this</span>.pageChanged({<span class="attr">currentPage</span>: customCurrentPage});</span><br><span class="line"> },</span><br><span class="line"> customPerPageChange(customPerPage) {</span><br><span class="line"> <span class="keyword">this</span>.perPageChanged({<span class="attr">currentPerPage</span>: customPerPage});</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>::: warning<br>You will have to implement your own pagination system:</p><ul><li>The total number of rows can be accessed via <code>props.total</code></li><li>The function to call when the current page has changed can be accessed via <code>props.pageChanged</code>.</li><li>The function to call when the per page value has changed can be accessed via <code>props.perPageChanged</code> .<br>:::</li></ul></before-after-columns></custom-row>]]></content>
<summary type="html">
<h1 id="Customizations"><a href="#Customizations" class="headerlink" title="Customizations"></a>Customizations</h1><h2 id="Custom-Row-Templa
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Column Filter Options</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/column-filter-options/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/column-filter-options/</id>
<published>2020-03-07T10:04:47.000Z</published>
<updated>2020-03-19T01:57:06.265Z</updated>
<content type="html"><![CDATA[<h1 id="Column-Filter-Options"><a href="#Column-Filter-Options" class="headerlink" title="Column Filter Options"></a>Column Filter Options</h1><h2 id="filterOptions"><a href="#filterOptions" class="headerlink" title="filterOptions"></a>filterOptions</h2><p>type <code>Object</code></p><p>A collection of filter specific properties within a column object.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'name'</span>,</span><br><span class="line"> field: <span class="string">'user_name'</span>,</span><br><span class="line"> filterOptions: {</span><br><span class="line"> enabled: <span class="literal">true</span>, <span class="comment">// enable filter for this column</span></span><br><span class="line"> placeholder: <span class="string">'Filter This Thing'</span>, <span class="comment">// placeholder for filter input</span></span><br><span class="line"> filterValue: <span class="string">'Jane'</span>, <span class="comment">// initial populated value for this filter</span></span><br><span class="line"> filterDropdownItems: [], <span class="comment">// dropdown (with selected values) instead of text input</span></span><br><span class="line"> filterMultiselectDropdownItems: [], <span class="comment">// dropdown (with multiple selected values) instead of text input</span></span><br><span class="line"> filterFn: <span class="keyword">this</span>.columnFilterFn, <span class="comment">//custom filter function that</span></span><br><span class="line"> trigger: <span class="string">'enter'</span>, <span class="comment">//only trigger on enter not on keyup </span></span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="enabled"><a href="#enabled" class="headerlink" title="enabled"></a>enabled</h2><p>type: <code>Boolean</code><br>Switch to enable column filter.</p><h2 id="placeholder"><a href="#placeholder" class="headerlink" title="placeholder"></a>placeholder</h2><p>type: <code>String</code><br>Placeholder to use on the column filter input.</p><h2 id="filterValue"><a href="#filterValue" class="headerlink" title="filterValue"></a>filterValue</h2><p>type: <code>String</code><br>If you want filter to be pre-populated, use this property</p><h2 id="trigger"><a href="#trigger" class="headerlink" title="trigger"></a>trigger</h2><p>type: <code>String (default: '')</code><br>Allows specifying trigger for column filter. Default trigger is keyup. use ‘enter’ to filter only when enter key is pressed.</p><h2 id="filterDropdownItems"><a href="#filterDropdownItems" class="headerlink" title="filterDropdownItems"></a>filterDropdownItems</h2><p>type <code>Array of strings or Array of objects</code></p><p>allows creating a dropdown for filter as opposed to an input</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//array</span></span><br><span class="line">filterDropdownItems: [<span class="string">'Blue'</span>, <span class="string">'Red'</span>, <span class="string">'Yellow'</span>]</span><br><span class="line"><span class="comment">//or</span></span><br><span class="line">filterDropdownItems: [ </span><br><span class="line"> { <span class="attr">value</span>: <span class="string">'n'</span>, <span class="attr">text</span>: <span class="string">'Inactive'</span> }, </span><br><span class="line"> { <span class="attr">value</span>: <span class="string">'y'</span>, <span class="attr">text</span>: <span class="string">'Active'</span> }, </span><br><span class="line"> { <span class="attr">value</span>: <span class="string">'c'</span>, <span class="attr">text</span>: <span class="string">'Check'</span> } </span><br><span class="line">],</span><br></pre></td></tr></table></figure><h2 id="filterMultiselectDropdownItems"><a href="#filterMultiselectDropdownItems" class="headerlink" title="filterMultiselectDropdownItems"></a>filterMultiselectDropdownItems</h2><p>type <code>Array of strings</code> or <code>Array of objects</code> with labels</p><p>allows creating a dropdown for filtering multiple items as opposed to an input</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//array of strings</span></span><br><span class="line">filterMultiselectDropdownItems: [<span class="string">'Blue'</span>, <span class="string">'Red'</span>, <span class="string">'Yellow'</span>]</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//array of objects</span></span><br><span class="line">filterMultiselectDropdownItems: [</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">label</span>: <span class="string">'Blue'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">label</span>: <span class="string">'Red'</span> },</span><br><span class="line"> { <span class="attr">id</span>: <span class="number">3</span>, <span class="attr">label</span>: <span class="string">'Yellow'</span> }</span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="filterFn"><a href="#filterFn" class="headerlink" title="filterFn"></a>filterFn</h2><p>type <code>Function</code></p><p>Custom filter, function of two variables: <code>function(data, filterString)</code>, should return true if data matches the filterString, otherwise false</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">filterFn: <span class="function"><span class="keyword">function</span>(<span class="params">data, filterString</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> x = <span class="built_in">parseInt</span>(filterString)</span><br><span class="line"> <span class="keyword">return</span> data >= x - <span class="number">5</span> && data <= x + <span class="number">5</span>;</span><br><span class="line">}</span><br><span class="line"><span class="comment">// would create a filter matching numbers within 5 of the provided value</span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h1 id="Column-Filter-Options"><a href="#Column-Filter-Options" class="headerlink" title="Column Filter Options"></a>Column Filter Options</
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Column Options</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/column-options/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/column-options/</id>
<published>2020-03-06T10:04:47.000Z</published>
<updated>2020-03-19T01:56:46.799Z</updated>
<content type="html"><![CDATA[<h1 id="Column-Options"><a href="#Column-Options" class="headerlink" title="Column Options"></a>Column Options</h1><p>Each column objects can contain the following configuration options:</p><h2 id="label"><a href="#label" class="headerlink" title="label"></a>label</h2><p>type <code>String</code></p><p>Text to put on column header.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'name'</span></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="field"><a href="#field" class="headerlink" title="field"></a>field</h2><p>type <code>String</code></p><p>Row object property that this column corresponds to. This can be: </p><ul><li>String <code>eg: 'name'</code> - simple row property name</li><li>String <code>eg: 'location.lat'</code>- nested row property name. lets say if the row had a property ‘location’ which was an object containing ‘lat’ and ‘lon’</li><li>Function - a function that returns a value to be displayed based on the row object<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'name'</span>,</span><br><span class="line"> field: <span class="keyword">this</span>.fealdFn,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br><span class="line"><span class="comment">// in methods</span></span><br><span class="line">fieldFn(rowObj) {</span><br><span class="line"> <span class="keyword">return</span> rowObj.name;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><h2 id="type"><a href="#type" class="headerlink" title="type"></a>type</h2><p>type <code>String</code></p><p>type of column. default: ‘text’. This determines the formatting for the column and filter behavior as well. Possible values:</p><ul><li><em>number</em> - right aligned</li><li><em>decimal</em> - right aligned, 2 decimal places</li><li><em>percentage</em> - expects a decimal like 0.03 and formats it as 3.00%</li><li><em>boolean</em> - right aligned</li><li><em>date</em> - expects a string representation of date eg ‘20170530’. You should also specify <a href="#dateinputformat">dateInputFormat</a> and <a href="#dateoutputformat">dateOutputFormat</a></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'joined On'</span>,</span><br><span class="line"> field: <span class="string">'createdAt'</span>,</span><br><span class="line"> type: <span class="string">'date'</span>,</span><br><span class="line"> dateInputFormat: <span class="string">'yyyy-MM-dd'</span>, <span class="comment">// expects 2018-03-16</span></span><br><span class="line"> dateOutputFormat: <span class="string">'MMM Do yyyy'</span>, <span class="comment">// outputs Mar 16th 2018</span></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="dateInputFormat"><a href="#dateInputFormat" class="headerlink" title="dateInputFormat"></a>dateInputFormat</h2><p>type <code>String</code></p><p>provide the format to parse date string. </p><p>::: tip<br>Vue-good-table uses date-fns for date parsing. <a href="https://date-fns.org/v2.0.0-beta.4/docs/parse" target="_blank" rel="noopener">Check out their formats here</a>.<br>:::</p><h2 id="dateOutputFormat"><a href="#dateOutputFormat" class="headerlink" title="dateOutputFormat"></a>dateOutputFormat</h2><p>type <code>String</code></p><p>provide the format for output date</p><h2 id="sortable"><a href="#sortable" class="headerlink" title="sortable"></a>sortable</h2><p>type <code>Boolean</code></p><p>enable/disable sorting on columns. This property is higher priority than global sortable property</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'name'</span>,</span><br><span class="line"> field: <span class="string">'user_name'</span>,</span><br><span class="line"> sortable: <span class="literal">false</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="sortFn"><a href="#sortFn" class="headerlink" title="sortFn"></a>sortFn</h2><p>type <code>Function</code></p><p>custom sort function. If you want to supply your own sort function you can use this property.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// in data</span></span><br><span class="line">columns: [</span><br><span class="line"> {</span><br><span class="line"> label: <span class="string">'Name'</span>,</span><br><span class="line"> field: <span class="string">'name'</span>,</span><br><span class="line"> sortable: <span class="literal">true</span>,</span><br><span class="line"> sortFn: <span class="keyword">this</span>.sortFn,</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line">],</span><br><span class="line"><span class="comment">// in methods</span></span><br><span class="line">methods: {</span><br><span class="line"> sortFn(x, y, col, rowX, rowY) {</span><br><span class="line"> <span class="comment">// x - row1 value for column</span></span><br><span class="line"> <span class="comment">// y - row2 value for column</span></span><br><span class="line"> <span class="comment">// col - column being sorted</span></span><br><span class="line"> <span class="comment">// rowX - row object for row1</span></span><br><span class="line"> <span class="comment">// rowY - row object for row2</span></span><br><span class="line"> <span class="keyword">return</span> (x < y ? <span class="number">-1</span> : (x > y ? <span class="number">1</span> : <span class="number">0</span>));</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="formatFn"><a href="#formatFn" class="headerlink" title="formatFn"></a>formatFn</h2><p>type <code>Function</code></p><p>Allows for custom format of values, <code>function(value)</code>, should return the formatted value to display.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// in data</span></span><br><span class="line">columns: [</span><br><span class="line"> {</span><br><span class="line"> label: <span class="string">'Salary'</span>,</span><br><span class="line"> field: <span class="string">'salary'</span>,</span><br><span class="line"> sortable: <span class="literal">true</span>,</span><br><span class="line"> formatFn: <span class="keyword">this</span>.formatFn,</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line">],</span><br><span class="line"><span class="comment">// in methods</span></span><br><span class="line">formatFn: <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'$'</span> + value;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="html"><a href="#html" class="headerlink" title="html"></a>html</h2><p>type <code>Boolean</code></p><p>indicates whether this column will require html rendering.<br>::: tip<br>The preferred way of creating columns that have html is by <a href="#custom-row-template">using slots</a><br>:::</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// in data</span></span><br><span class="line">columns: [</span><br><span class="line"> {</span><br><span class="line"> label: <span class="string">'Action'</span>,</span><br><span class="line"> field: <span class="string">'btn'</span>,</span><br><span class="line"> html: <span class="literal">true</span>,</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line">],</span><br><span class="line">rows: [</span><br><span class="line"> {</span><br><span class="line"> btn: <span class="string">'<button>My Action</button>'</span>,</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> }</span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="width"><a href="#width" class="headerlink" title="width"></a>width</h2><p>type <code>Number</code></p><p>provide a width value for this column</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'name'</span>,</span><br><span class="line"> field: <span class="string">'user_name'</span>,</span><br><span class="line"> width: <span class="string">'50px'</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="hidden"><a href="#hidden" class="headerlink" title="hidden"></a>hidden</h2><p>type <code>Boolean</code></p><p>hide a column</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'name'</span>,</span><br><span class="line"> field: <span class="string">'user_name'</span>,</span><br><span class="line"> hidden: <span class="literal">true</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="thClass"><a href="#thClass" class="headerlink" title="thClass"></a>thClass</h2><p>type <code>String</code></p><p>provide custom class(es) to the table header</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'name'</span>,</span><br><span class="line"> field: <span class="string">'user_name'</span>,</span><br><span class="line"> thClass: <span class="string">'custom-th-class'</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="tdClass"><a href="#tdClass" class="headerlink" title="tdClass"></a>tdClass</h2><p>type <code>String</code> or <code>Function</code></p><p>provide custom class(es) to the table cells</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'name'</span>,</span><br><span class="line"> field: <span class="string">'user_name'</span>,</span><br><span class="line"> tdClass: <span class="string">'text-center'</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure><p>or</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'name'</span>,</span><br><span class="line"> field: <span class="string">'user_name'</span>,</span><br><span class="line"> tdClass: <span class="keyword">this</span>.tdClassFunc,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br><span class="line"><span class="comment">// and later</span></span><br><span class="line">methods: {</span><br><span class="line"> tdClassFunc(row) {</span><br><span class="line"> <span class="keyword">if</span> (row.field > <span class="number">50</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'red-class'</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'green-class'</span>;</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="globalSearchDisabled"><a href="#globalSearchDisabled" class="headerlink" title="globalSearchDisabled"></a>globalSearchDisabled</h2><p>type <code>Boolean (default: false)</code></p><p>if true, this column will be ignored by the global search</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">columns: [</span><br><span class="line"> { </span><br><span class="line"> label: <span class="string">'name'</span>,</span><br><span class="line"> field: <span class="string">'user_name'</span>,</span><br><span class="line"> globalSearchDisabled: <span class="literal">true</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h1 id="Column-Options"><a href="#Column-Options" class="headerlink" title="Column Options"></a>Column Options</h1><p>Each column objects ca
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Pagination Options</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/pagination-options/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/pagination-options/</id>
<published>2020-03-05T10:04:47.000Z</published>
<updated>2020-03-19T01:56:29.245Z</updated>
<content type="html"><![CDATA[<h1 id="Pagination-Options"><a href="#Pagination-Options" class="headerlink" title="Pagination Options"></a>Pagination Options</h1><p>A set of options that are related to table pagination. Each of these are optional and reasonable defaults will be used if you leave off the property.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> mode: 'records',</span></span></span><br><span class="line"><span class="tag"><span class="string"> perPage: 5,</span></span></span><br><span class="line"><span class="tag"><span class="string"> position: 'top',</span></span></span><br><span class="line"><span class="tag"><span class="string"> perPageDropdown: [3, 7, 9],</span></span></span><br><span class="line"><span class="tag"><span class="string"> dropdownAllowAll: false,</span></span></span><br><span class="line"><span class="tag"><span class="string"> setCurrentPage: 2,</span></span></span><br><span class="line"><span class="tag"><span class="string"> nextLabel: 'next',</span></span></span><br><span class="line"><span class="tag"><span class="string"> prevLabel: 'prev',</span></span></span><br><span class="line"><span class="tag"><span class="string"> rowsPerPageLabel: 'Rows per page',</span></span></span><br><span class="line"><span class="tag"><span class="string"> ofLabel: 'of',</span></span></span><br><span class="line"><span class="tag"><span class="string"> pageLabel: 'page', // for 'pages' mode</span></span></span><br><span class="line"><span class="tag"><span class="string"> allLabel: 'All',</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="enabled"><a href="#enabled" class="headerlink" title="enabled"></a>enabled</h2><p>type: <code>Boolean (default: false)</code></p><p>Enable Pagination for table. By default the paginator is created at the bottom of the table.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="mode"><a href="#mode" class="headerlink" title="mode"></a>mode</h2><p>type: <code>String (default: 'records')</code></p><p>You can render pagination controls in two modes - ‘records’ and ‘pages’. Below, you’ll find examples of both. </p><p>::: tip<br>For tables that may have many pages, ‘pages’ mode offers the ability to jump to any valid page.<br>:::</p><h3 id="records-mode-default"><a href="#records-mode-default" class="headerlink" title="records mode (default)"></a>records mode (default)</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> mode: 'records'</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><p><pagination-table :options="{ enabled: true, mode: 'records', perPage: 2, }"></pagination-table></p><h3 id="pages-mode"><a href="#pages-mode" class="headerlink" title="pages mode"></a>pages mode</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> mode: 'pages'</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><p><pagination-table :options="{ enabled: true, mode: 'pages', perPage: 2, }"></pagination-table></p><h2 id="position"><a href="#position" class="headerlink" title="position"></a>position</h2><p>type: <code>String (default: 'bottom')</code></p><p>Add pagination on ‘top’ or ‘bottom’ (top and bottom) of the table (default position is bottom)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> position: 'top'</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="perPage"><a href="#perPage" class="headerlink" title="perPage"></a>perPage</h2><p>type: <code>Integer (default: 10)</code></p><p>Number of rows to show per page</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> perPage: 5</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="perPageDropdown"><a href="#perPageDropdown" class="headerlink" title="perPageDropdown"></a>perPageDropdown</h2><p>type: <code>Array (default: [10,20,30,40,50])</code></p><p>Customize the dropdown options for the amount of items per page</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> perPageDropdown: [3, 7, 9]</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="dropdownAllowAll"><a href="#dropdownAllowAll" class="headerlink" title="dropdownAllowAll"></a>dropdownAllowAll</h2><p>type: <code>Boolean (default: true)</code></p><p>enables/disables ‘All’ in the per page dropdown.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> perPageDropdown: [3, 7, 9],</span></span></span><br><span class="line"><span class="tag"><span class="string"> dropdownAllowAll: false,</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="setCurrentPage"><a href="#setCurrentPage" class="headerlink" title="setCurrentPage"></a>setCurrentPage</h2><p>type: <code>Number</code></p><p>set current page programmatically.<br>::: warning<br>There’s no validation for number of pages so please be careful using this.<br>:::</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> setCurrentPage: 2,</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="pagination-label-text-options"><a href="#pagination-label-text-options" class="headerlink" title="pagination label/text options"></a>pagination label/text options</h2><p>you can change one or more of the texts shown on pagination by overriding the labels in the following way: </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:pagination-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> nextLabel: 'next',</span></span></span><br><span class="line"><span class="tag"><span class="string"> prevLabel: 'prev',</span></span></span><br><span class="line"><span class="tag"><span class="string"> rowsPerPageLabel: 'Rows per page',</span></span></span><br><span class="line"><span class="tag"><span class="string"> ofLabel: 'of',</span></span></span><br><span class="line"><span class="tag"><span class="string"> pageLabel: 'page', // for 'pages' mode</span></span></span><br><span class="line"><span class="tag"><span class="string"> allLabel: 'All',</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="Replace-Pagination-Component"><a href="#Replace-Pagination-Component" class="headerlink" title="Replace Pagination Component"></a>Replace Pagination Component</h2><p>you can also replace the pagination component with your own component - <a href="/guide/advanced/#custom-pagination">Custom Pagination</a></p>]]></content>
<summary type="html">
<h1 id="Pagination-Options"><a href="#Pagination-Options" class="headerlink" title="Pagination Options"></a>Pagination Options</h1><p>A set
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Sort Options</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/sort-options/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/sort-options/</id>
<published>2020-03-04T11:04:47.000Z</published>
<updated>2020-03-19T02:00:34.659Z</updated>
<content type="html"><![CDATA[<h1 id="Sort-Options"><a href="#Sort-Options" class="headerlink" title="Sort Options"></a>Sort Options</h1><p>Set of options related to table sorting</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:sort-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> initialSortBy: {field: 'name', type: 'asc'}</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="enabled"><a href="#enabled" class="headerlink" title="enabled"></a>enabled</h2><p>type: <code>Boolean (default: true)</code></p><p>Enable/disable sorting on table as a whole. </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:sort-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="initialSortBy"><a href="#initialSortBy" class="headerlink" title="initialSortBy"></a>initialSortBy</h2><p>::: tip Update<br><code>initialSortBy</code> now allows for sort by multiple columns<br>:::</p><p>type: <code>Object</code> or <code>Array</code></p><p>Allows specifying a default sort for the table on wakeup</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:sort-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> initialSortBy: {field: 'name', type: 'asc'}</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="Multiple-Column-Sort"><a href="#Multiple-Column-Sort" class="headerlink" title="Multiple Column Sort"></a>Multiple Column Sort</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:sort-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> initialSortBy: [</span></span></span><br><span class="line"><span class="tag"><span class="string"> {field: 'name', type: 'asc'},</span></span></span><br><span class="line"><span class="tag"><span class="string"> {field: 'age', type: 'desc'}</span></span></span><br><span class="line"><span class="tag"><span class="string"> ],</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><p>Users can shift-click on multiple columns to sort by multiple columns. The first column in the array gets primary sort.</p>]]></content>
<summary type="html">
<h1 id="Sort-Options"><a href="#Sort-Options" class="headerlink" title="Sort Options"></a>Sort Options</h1><p>Set of options related to tabl
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Search Options</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/search-options/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/search-options/</id>
<published>2020-03-04T10:04:47.000Z</published>
<updated>2020-03-19T01:56:09.365Z</updated>
<content type="html"><![CDATA[<h1 id="Search-Options"><a href="#Search-Options" class="headerlink" title="Search Options"></a>Search Options</h1><p>Vue-good-table supports two ways of filtering the table. </p><ol><li>A global search that searches through all records in the table</li><li><a href="/guide/configuration/column-filter-options.md">Column filters</a> that filter based on a given column</li></ol><p>This section talks about how to configure global search options.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:search-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> trigger: 'enter',</span></span></span><br><span class="line"><span class="tag"><span class="string"> skipDiacritics: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> searchFn: mySearchFn,</span></span></span><br><span class="line"><span class="tag"><span class="string"> placeholder: 'Search this table',</span></span></span><br><span class="line"><span class="tag"><span class="string"> externalQuery: searchQuery</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="enabled"><a href="#enabled" class="headerlink" title="enabled"></a>enabled</h2><p>type: <code>Boolean (default: false)</code></p><p>Allows a single search input for the whole table </p><p>::: warning<br>Enabling this option disables column filters<br>:::</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:search-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><search-demo><h2 id="trigger"><a href="#trigger" class="headerlink" title="trigger"></a>trigger</h2><p>type: <code>String (default: '')</code></p><p>Allows you to specify if you want search to trigger on ‘enter’ event of the input. By <strong>default table searches on key-up</strong>. </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:search-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> trigger: 'enter'</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><search-demo trigger="enter"><h2 id="skipDiacritics"><a href="#skipDiacritics" class="headerlink" title="skipDiacritics"></a>skipDiacritics</h2><p>type: <code>boolean (default: false)</code></p><p>By default, search does a diacriticless comparison so you can search through accented characters. This however slows down the search to some extent. If your data doesn’t have accented characters, you can skip this check and gain some performance. </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:search-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> skipDiacritics: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="searchFn"><a href="#searchFn" class="headerlink" title="searchFn"></a>searchFn</h2><p>type: <code>Function</code></p><p>Allows you to specify your own search function for the global search</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:search-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> searchFn: myFunc</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// in js</span></span><br><span class="line">methods: {</span><br><span class="line"> myFunc(row, col, cellValue, searchTerm){</span><br><span class="line"> <span class="keyword">return</span> cellValue === <span class="string">'my value'</span>;</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="placeholder"><a href="#placeholder" class="headerlink" title="placeholder"></a>placeholder</h2><p>type: <code>String (default: 'Search Table')</code></p><p>Text for global search input place holder</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:search-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> placeholder: 'Search this table',</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="externalQuery"><a href="#externalQuery" class="headerlink" title="externalQuery"></a>externalQuery</h2><p>type: <code>String</code></p><p>If you want to use your own input for searching the table, you can use this property</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"searchTerm"</span> ></span></span><br><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:search-options</span>=<span class="string">"{</span></span></span><br><span class="line"><span class="tag"><span class="string"> enabled: true,</span></span></span><br><span class="line"><span class="tag"><span class="string"> externalQuery: searchTerm</span></span></span><br><span class="line"><span class="tag"><span class="string"> }"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// and in data</span></span><br><span class="line">data(){</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> searchTerm: <span class="string">''</span>,</span><br><span class="line"> <span class="comment">// rows, columns etc...</span></span><br><span class="line"> };</span><br><span class="line">}</span><br></pre></td></tr></table></figure><external-query></external-query></search-demo></search-demo>]]></content>
<summary type="html">
<h1 id="Search-Options"><a href="#Search-Options" class="headerlink" title="Search Options"></a>Search Options</h1><p>Vue-good-table support
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Table Events</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/table-events/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/table-events/</id>
<published>2020-03-03T10:04:47.000Z</published>
<updated>2020-03-19T01:55:49.640Z</updated>
<content type="html"><![CDATA[<h1 id="Table-Events"><a href="#Table-Events" class="headerlink" title="Table Events"></a>Table Events</h1><h2 id="on-row-click"><a href="#on-row-click" class="headerlink" title="@on-row-click"></a>@on-row-click</h2><p>event emitted on table row click</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-row-click</span>=<span class="string">"onRowClick"</span>></span></span><br></pre></td></tr></table></figure> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> onRowClick(params) {</span><br><span class="line"> <span class="comment">// params.row - row object </span></span><br><span class="line"> <span class="comment">// params.pageIndex - index of this row on the current page.</span></span><br><span class="line"> <span class="comment">// params.selected - if selection is enabled this argument </span></span><br><span class="line"> <span class="comment">// indicates selected or not</span></span><br><span class="line"> <span class="comment">// params.event - click event</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-row-dblclick"><a href="#on-row-dblclick" class="headerlink" title="@on-row-dblclick"></a>@on-row-dblclick</h2><p>event emitted on table row click</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-row-dblclick</span>=<span class="string">"onRowDoubleClick"</span>></span></span><br></pre></td></tr></table></figure> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> methods: {</span><br><span class="line"> onRowDoubleClick(params) {</span><br><span class="line"> <span class="comment">// params.row - row object </span></span><br><span class="line"> <span class="comment">// params.pageIndex - index of this row on the current page.</span></span><br><span class="line"> <span class="comment">// params.selected - if selection is enabled this argument </span></span><br><span class="line"> <span class="comment">// indicates selected or not</span></span><br><span class="line"> <span class="comment">// params.event - click event</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-cell-click"><a href="#on-cell-click" class="headerlink" title="@on-cell-click"></a>@on-cell-click</h2><p>event emitted on table cell click</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-cell-click</span>=<span class="string">"onCellClick"</span>></span></span><br></pre></td></tr></table></figure> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> onCellClick(params) {</span><br><span class="line"> <span class="comment">// params.row - row object </span></span><br><span class="line"> <span class="comment">// params.column - column object</span></span><br><span class="line"> <span class="comment">// params.rowIndex - index of this row on the current page.</span></span><br><span class="line"> <span class="comment">// params.event - click event</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-row-mouseenter"><a href="#on-row-mouseenter" class="headerlink" title="@on-row-mouseenter"></a>@on-row-mouseenter</h2><p>event emitted on row mouseenter</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-row-mouseenter</span>=<span class="string">"onRowMouseover"</span>></span></span><br></pre></td></tr></table></figure> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> onRowMouseover(params) {</span><br><span class="line"> <span class="comment">// params.row - row object </span></span><br><span class="line"> <span class="comment">// params.pageIndex - index of this row on the current page.</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-row-mouseleave"><a href="#on-row-mouseleave" class="headerlink" title="@on-row-mouseleave"></a>@on-row-mouseleave</h2><p>event emitted on table row mouseleave</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-row-mouseleave</span>=<span class="string">"onRowMouseleave"</span>></span></span><br></pre></td></tr></table></figure> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> onRowMouseleave(row, pageIndex) {</span><br><span class="line"> <span class="comment">// row - row object </span></span><br><span class="line"> <span class="comment">// pageIndex - index of this row on the current page.</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-search"><a href="#on-search" class="headerlink" title="@on-search"></a>@on-search</h2><p>event emitted on global search (when global search is enabled)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-search</span>=<span class="string">"onSearch"</span>></span></span><br></pre></td></tr></table></figure> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> onSearch(params) {</span><br><span class="line"> <span class="comment">// params.searchTerm - term being searched for</span></span><br><span class="line"> <span class="comment">// params.rowCount - number of rows that match search</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-page-change"><a href="#on-page-change" class="headerlink" title="@on-page-change"></a>@on-page-change</h2><p>event emitted on pagination page change (when pagination is enabled)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-page-change</span>=<span class="string">"onPageChange"</span>></span></span><br></pre></td></tr></table></figure> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> onPageChange(params) {</span><br><span class="line"> <span class="comment">// params.currentPage - current page that pagination is at</span></span><br><span class="line"> <span class="comment">// params.prevPage - previous page</span></span><br><span class="line"> <span class="comment">// params.currentPerPage - number of items per page</span></span><br><span class="line"> <span class="comment">// params.total - total number of items in the table</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-per-page-change"><a href="#on-per-page-change" class="headerlink" title="@on-per-page-change"></a>@on-per-page-change</h2><p>event emitted on per page dropdown change (when pagination is enabled)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-per-page-change</span>=<span class="string">"onPageChange"</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> onPageChange(params) {</span><br><span class="line"> <span class="comment">// params.currentPage - current page that pagination is at</span></span><br><span class="line"> <span class="comment">// params.currentPerPage - number of items per page</span></span><br><span class="line"> <span class="comment">// params.total - total number of items in the table</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-sort-change"><a href="#on-sort-change" class="headerlink" title="@on-sort-change"></a>@on-sort-change</h2><p>event emitted on sort change.<br>::: tip<br>vue-good-table now supports sorting by multiple columns, so the params<br>is an array.<br>:::</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-sort-change</span>=<span class="string">"onSortChange"</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> onSortChange(params) {</span><br><span class="line"> <span class="comment">// params[0].sortType - ascending or descending</span></span><br><span class="line"> <span class="comment">// params[0].columnIndex - index of column being sorted</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-column-filter"><a href="#on-column-filter" class="headerlink" title="@on-column-filter"></a>@on-column-filter</h2><p>event emitted when column is filtered (only emitted for remote mode)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-column-filter</span>=<span class="string">"onColumnFilter"</span>></span></span><br></pre></td></tr></table></figure> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> onColumnFilter(params) {</span><br><span class="line"> <span class="comment">// params.columnFilters - filter values for each column in the following format:</span></span><br><span class="line"> <span class="comment">// {field1: 'filterTerm', field3: 'filterTerm2')</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-select-all"><a href="#on-select-all" class="headerlink" title="@on-select-all"></a>@on-select-all</h2><p>event emitted when all is selected (only emitted for checkbox tables)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:select-options</span>=<span class="string">"{ enabled: true }"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-select-all</span>=<span class="string">"onSelectAll"</span>></span></span><br></pre></td></tr></table></figure> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> onSelectAll(params) {</span><br><span class="line"> <span class="comment">// params.selected - whether the select-all checkbox is checked or unchecked</span></span><br><span class="line"> <span class="comment">// params.selectedRows - all rows that are selected (this page)</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="on-selected-rows-change"><a href="#on-selected-rows-change" class="headerlink" title="@on-selected-rows-change"></a>@on-selected-rows-change</h2><p> event emitted whenever selection is changed (on checkbox tables)<br> <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:select-options</span>=<span class="string">"{ enabled: true }"</span></span></span><br><span class="line"><span class="tag"> @<span class="attr">on-selected-rows-change</span>=<span class="string">"selectionChanged"</span>></span></span><br></pre></td></tr></table></figure></p> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> selectionChanged(params) {</span><br><span class="line"> <span class="comment">// params.selectedRows - all rows that are selected (this page)</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h1 id="Table-Events"><a href="#Table-Events" class="headerlink" title="Table Events"></a>Table Events</h1><h2 id="on-row-click"><a href="#o
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Table Options</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/configuration/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/configuration/</id>
<published>2020-03-02T10:04:47.000Z</published>
<updated>2020-03-19T01:55:29.213Z</updated>
<content type="html"><![CDATA[<h1 id="Table-Options"><a href="#Table-Options" class="headerlink" title="Table Options"></a>Table Options</h1><p>These options relate to the table as a whole</p><h2 id="columns"><a href="#columns" class="headerlink" title="columns"></a>columns</h2><p>type: <code>Array</code></p><p>Array containing objects that describe table columns. The column object itself can contain many <a href="/guide/configuration/column-options.md">configurable properties</a>.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line"> {</span><br><span class="line"> label: <span class="string">'Name'</span>,</span><br><span class="line"> field: <span class="string">'name'</span>,</span><br><span class="line"> filterable: <span class="literal">true</span>,</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure><h2 id="rows"><a href="#rows" class="headerlink" title="rows"></a>rows</h2><p>type: <code>Array</code></p><p>Array containing row objects. Each row object contains data that will be displayed in the table row.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line"> {</span><br><span class="line"> id:<span class="number">1</span>,</span><br><span class="line"> name:<span class="string">"John"</span>,</span><br><span class="line"> age:<span class="number">20</span></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure><p>::: tip<br>for <strong>grouped rows</strong>, you need a nested format. Refer to <a href="/guide/advanced/grouped-table.md">Grouped Table</a> for examples.<br>:::</p><h2 id="max-height"><a href="#max-height" class="headerlink" title="max-height"></a>max-height</h2><p>type: <code>String</code><br>Set a maximum height for table body</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><vue-good-table</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"</span><br><span class="line"> max-height="300px"></span><br><span class="line"></vue-good-table></span><br></pre></td></tr></table></figure><h2 id="fixed-header"><a href="#fixed-header" class="headerlink" title="fixed-header"></a>fixed-header</h2><p>type: <code>Boolean (default: false)</code><br>fix header so it stays in view as you scroll the table.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><vue-good-table</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"</span><br><span class="line"> max-height="200px"</span><br><span class="line"> :fixed-header="true"></span><br><span class="line"></vue-good-table></span><br></pre></td></tr></table></figure><fixed-header><p>::: tip<br>Fixed header should probably be used with max-height<br>:::</p><h2 id="line-numbers"><a href="#line-numbers" class="headerlink" title="line-numbers"></a>line-numbers</h2><p>type: <code>Boolean (default: false)</code><br>Show line number for each row</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:line-numbers</span>=<span class="string">"true"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><line-numbers-table><h2 id="row-style-class"><a href="#row-style-class" class="headerlink" title="row-style-class"></a>row-style-class</h2><p>type: <code>String</code> or <code>Function</code></p><p>property to assign a class to rows. This can either be a string representing a css class-name or a function.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><vue-good-table</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"</span><br><span class="line"> :row-style-class="rowStyleClassFn"></span><br><span class="line"></vue-good-table></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">methods: {</span><br><span class="line"> rowStyleClassFn(row) {</span><br><span class="line"> <span class="keyword">return</span> row.age > <span class="number">18</span> ? <span class="string">'green'</span> : <span class="string">'red'</span>;</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="rtl"><a href="#rtl" class="headerlink" title="rtl"></a>rtl</h2><p>type: <code>Boolean (default: false)</code></p><p>Enable Right-To-Left layout for the table</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rtl</span>=<span class="string">"true"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><rtl-table><h2 id="Table-Actions-Slot"><a href="#Table-Actions-Slot" class="headerlink" title="Table Actions Slot"></a>Table Actions Slot</h2><p>If you want to add table specific actions like a print button for example, you can use the Table Actions Slot. If you have global search enabled, the action panel will show up to the right of that.</p><p>::: tip Note<br>You don’t have to have global search enabled to use this slot.<br>:::</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"table-actions"</span>></span></span><br><span class="line"> This will show up on the top right of the table. </span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><action-slot-table><h2 id="Table-Actions-Footer-Slot"><a href="#Table-Actions-Footer-Slot" class="headerlink" title="Table Actions Footer Slot"></a>Table Actions Footer Slot</h2><p>If you want a space for your buttons between pagination and the table. This is the slot you use. </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"table-actions-bottom"</span>></span></span><br><span class="line"> This will show up on the bottom of the table. </span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="Empty-state-slot"><a href="#Empty-state-slot" class="headerlink" title="Empty state slot"></a>Empty state slot</h2><p>You can provide html for empty state slot as well. Example:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"emptystate"</span>></span></span><br><span class="line"> This will show up when there are no rows</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="mode"><a href="#mode" class="headerlink" title="mode"></a>mode</h2><p>type: <code>String</code></p><p>Set mode=<code>remote</code> to allow sorting/filtering etc to be powered by server side instead of client side.</p><p>for a detailed workflow example check out <a href="/guide/advanced/remote-workflow.md">Server Side Workflow</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">vue-good-table</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:columns</span>=<span class="string">"columns"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:rows</span>=<span class="string">"rows"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">mode</span>=<span class="string">"remote"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">vue-good-table</span>></span></span><br></pre></td></tr></table></figure><h2 id="totalRecords"><a href="#totalRecords" class="headerlink" title="totalRecords"></a>totalRecords</h2><p>type: <code>Number</code><br>::: tip<br>totalRecords is only useful for remote mode. When server controls pagination the table needs to know how many total rows exist.<br>:::</p><p>total number of rows that exist given a table/filter. refer to <a href="/guide/advanced/remote-workflow.md">remote workflow</a> for more details</p></action-slot-table></rtl-table></line-numbers-table></fixed-header>]]></content>
<summary type="html">
<h1 id="Table-Options"><a href="#Table-Options" class="headerlink" title="Table Options"></a>Table Options</h1><p>These options relate to th
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>Getting Started</title>
<link href="https://vue-guide.github.io/wiki/vue-good-table/README/"/>
<id>https://vue-guide.github.io/wiki/vue-good-table/README/</id>
<published>2020-03-01T10:04:47.000Z</published>
<updated>2020-03-19T01:54:58.240Z</updated>
<content type="html"><![CDATA[<h1 id="Getting-Started"><a href="#Getting-Started" class="headerlink" title="Getting Started"></a>Getting Started</h1><h2 id="Installation"><a href="#Installation" class="headerlink" title="Installation"></a>Installation</h2><p>Install with npm:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save vue-good-table</span><br></pre></td></tr></table></figure><p>Import globally in app:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> VueGoodTablePlugin <span class="keyword">from</span> <span class="string">'vue-good-table'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// import the styles</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'vue-good-table/dist/vue-good-table.css'</span></span><br><span class="line"></span><br><span class="line">Vue.use(VueGoodTablePlugin);</span><br></pre></td></tr></table></figure><p><strong>or</strong> you can import into your component:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// import the styles</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'vue-good-table/dist/vue-good-table.css'</span></span><br><span class="line"><span class="keyword">import</span> { VueGoodTable } <span class="keyword">from</span> <span class="string">'vue-good-table'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// add to component</span></span><br><span class="line">components: {</span><br><span class="line"> VueGoodTable,</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="Basic-Example"><a href="#Basic-Example" class="headerlink" title="Basic Example"></a>Basic Example</h2><basic-table><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <div></span><br><span class="line"> <vue-good-table</span><br><span class="line"> :columns="columns"</span><br><span class="line"> :rows="rows"/></span><br><span class="line"> </div></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line">export default {</span><br><span class="line"> name: 'my-component',</span><br><span class="line"> data(){</span><br><span class="line"> return {</span><br><span class="line"> columns: [</span><br><span class="line"> {</span><br><span class="line"> label: 'Name',</span><br><span class="line"> field: 'name',</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> label: 'Age',</span><br><span class="line"> field: 'age',</span><br><span class="line"> type: 'number',</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> label: 'Created On',</span><br><span class="line"> field: 'createdAt',</span><br><span class="line"> type: 'date',</span><br><span class="line"> dateInputFormat: 'yyyy-MM-dd',</span><br><span class="line"> dateOutputFormat: 'MMM Do yy',</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> label: 'Percent',</span><br><span class="line"> field: 'score',</span><br><span class="line"> type: 'percentage',</span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> rows: [</span><br><span class="line"> { id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },</span><br><span class="line"> { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },</span><br><span class="line"> { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },</span><br><span class="line"> { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },</span><br><span class="line"> { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },</span><br><span class="line"> { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },</span><br><span class="line"> ],</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line">};</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><h2 id="Usage-with-Nuxt-js"><a href="#Usage-with-Nuxt-js" class="headerlink" title="Usage with Nuxt.js"></a>Usage with Nuxt.js</h2><p>Create your own plugin by creating a file called <code>vue-good-table.js</code> inside your Nuxt <code>plugins</code> folder. Shoud look something like this:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">import Vue from 'vue'</span><br><span class="line">import VueGoodTablePlugin from 'vue-good-table';</span><br><span class="line"></span><br><span class="line">// import the styles</span><br><span class="line">import 'vue-good-table/dist/vue-good-table.css'</span><br><span class="line"></span><br><span class="line">Vue.use(VueGoodTablePlugin);</span><br></pre></td></tr></table></figure><p>As you can see, the only difference from the normal installation is that we need to reference Vue using <code>import Vue from 'vue'</code>.</p><p>Next we need to declare the plugin inside your <code>nuxt.config.js</code> like so:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">plugins: [</span><br><span class="line"> { src: '~/plugins/vue-good-table', ssr: false }</span><br><span class="line">],</span><br></pre></td></tr></table></figure><p>This should now work as expected.</p></basic-table>]]></content>
<summary type="html">
<h1 id="Getting-Started"><a href="#Getting-Started" class="headerlink" title="Getting Started"></a>Getting Started</h1><h2 id="Installation"
</summary>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/categories/Vue-good-table/"/>
<category term="Vue-good-table" scheme="https://vue-guide.github.io/tags/Vue-good-table/"/>
</entry>
<entry>
<title>동적 & 비동기 컴포넌트</title>
<link href="https://vue-guide.github.io/wiki/vue/components-dynamic-async/"/>
<id>https://vue-guide.github.io/wiki/vue/components-dynamic-async/</id>
<published>2020-02-05T10:04:47.000Z</published>
<updated>2020-03-19T01:48:23.918Z</updated>
<content type="html"><![CDATA[<blockquote><p>이 페이지는 <a href="components.html">컴포넌트 기초</a>를 읽었다는 것을 가정합니다. 컴포넌트가 처음이라면 먼저 읽어야 합니다.</p></blockquote><h2 id="keep-alive-동적-컴포넌트"><a href="#keep-alive-동적-컴포넌트" class="headerlink" title="keep-alive 동적 컴포넌트"></a><code>keep-alive</code> 동적 컴포넌트</h2><p>초기에는, 탭 인터페이스에서 컴포넌트들을 전환하기 위해서 <code>is</code> 특성을 사용했습니다. :</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">component</span> <span class="attr">v-bind:is</span>=<span class="string">"currentTabComponent"</span>></span><span class="tag"></<span class="name">component</span>></span></span><br></pre></td></tr></table></figure><p>컴포넌트들을 전환할 때 가끔 성능상의 이유로 상태를 유지하거나 재-렌더링을 피하길 원할 수 있습니다. 예를 들면, 탭 인터페이스를 약간 확장 할 때 :</p><div id="dynamic-component-demo" class="demo"> <button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['dynamic-component-demo-tab-button', { 'dynamic-component-demo-active': currentTab === tab }]" v-on:click="currentTab = tab">{{ tab }}</button> <component v-bind:is="currentTabComponent" class="dynamic-component-demo-tab"></component></div><script>Vue.component('tab-posts', { data: function () { return { posts: [ { id: 1, title: 'Cat Ipsum', content: '<p>Dont wait for the storm to pass, dance in the rain kick up litter decide to want nothing to do with my owner today demand to be let outside at once, and expect owner to wait for me as i think about it cat cat moo moo lick ears lick paws so make meme, make cute face but lick the other cats. Kitty poochy chase imaginary bugs, but stand in front of the computer screen. Sweet beast cat dog hate mouse eat string barf pillow no baths hate everything stare at guinea pigs. My left donut is missing, as is my right loved it, hated it, loved it, hated it scoot butt on the rug cat not kitten around</p>' }, { id: 2, title: 'Hipster Ipsum', content: '<p>Bushwick blue bottle scenester helvetica ugh, meh four loko. Put a bird on it lumbersexual franzen shabby chic, street art knausgaard trust fund shaman scenester live-edge mixtape taxidermy viral yuccie succulents. Keytar poke bicycle rights, crucifix street art neutra air plant PBR&B hoodie plaid venmo. Tilde swag art party fanny pack vinyl letterpress venmo jean shorts offal mumblecore. Vice blog gentrify mlkshk tattooed occupy snackwave, hoodie craft beer next level migas 8-bit chartreuse. Trust fund food truck drinking vinegar gochujang.</p>' }, { id: 3, title: 'Cupcake Ipsum', content: '<p>Icing dessert soufflé lollipop chocolate bar sweet tart cake chupa chups. Soufflé marzipan jelly beans croissant toffee marzipan cupcake icing fruitcake. Muffin cake pudding soufflé wafer jelly bear claw sesame snaps marshmallow. Marzipan soufflé croissant lemon drops gingerbread sugar plum lemon drops apple pie gummies. Sweet roll donut oat cake toffee cake. Liquorice candy macaroon toffee cookie marzipan.</p>' } ], selectedPost: null } }, template: '\ <div class="dynamic-component-demo-posts-tab">\ <ul class="dynamic-component-demo-posts-sidebar">\ <li\ v-for="post in posts"\ v-bind:key="post.id"\ v-bind:class="{ \'dynamic-component-demo-active\': post === selectedPost }"\ v-on:click="selectedPost = post"\ >\ {{ post.title }}\ </li>\ </ul>\ <div class="dynamic-component-demo-post-container">\ <div \ v-if="selectedPost"\ class="dynamic-component-demo-post"\ >\ <h3>{{ selectedPost.title }}</h3>\ <div v-html="selectedPost.content"></div>\ </div>\ <strong v-else>\ Click on a blog title to the left to view it.\ </strong>\ </div>\ </div>\ '})Vue.component('tab-archive', { template: '<div>Archive component</div>'})new Vue({ el: '#dynamic-component-demo', data: { currentTab: 'Posts', tabs: ['Posts', 'Archive'] }, computed: { currentTabComponent: function () { return 'tab-' + this.currentTab.toLowerCase() } }})</script><style>.dynamic-component-demo-tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid #ccc; cursor: pointer; background: #f0f0f0; margin-bottom: -1px; margin-right: -1px;}.dynamic-component-demo-tab-button:hover { background: #e0e0e0;}.dynamic-component-demo-tab-button.dynamic-component-demo-active { background: #e0e0e0;}.dynamic-component-demo-tab { border: 1px solid #ccc; padding: 10px;}.dynamic-component-demo-posts-tab { display: flex;}.dynamic-component-demo-posts-sidebar { max-width: 40vw; margin: 0 !important; padding: 0 10px 0 0 !important; list-style-type: none; border-right: 1px solid #ccc;}.dynamic-component-demo-posts-sidebar li { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer;}.dynamic-component-demo-posts-sidebar li:hover { background: #eee;}.dynamic-component-demo-posts-sidebar li.dynamic-component-demo-active { background: lightblue;}.dynamic-component-demo-post-container { padding-left: 10px;}.dynamic-component-demo-post > :first-child { margin-top: 0 !important; padding-top: 0 !important;}</style><p>게시물을 선택하고, <em>Archive</em> 탭으로 전환하고, 다시 <em>Posts</em>로 전환할 때, 선택했던 게시물이 더는 보지 않는 것 알아차릴 수 있습니다. 그 이유는 매번 새로운 탭을 선택할 때, Vue는 <code>currentTabComponent</code>의 새로운 인스턴스를 생성하기 때문입니다.</p><p>동적 컴포넌트를 재생성하는 것은 보통은 유용한 동작입니다. 하지만 이 경우에는, 탭 컴포넌트 인스턴스가 처음 생성될 때 캐시 되는 것을 선호합니다. 이런 문제를 해결하기 위해서, 동적 컴포넌트를 <code><keep-alive></code> 엘리먼트로 둘러쌀 수 있습니다. :</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Inactive components will be cached! --></span></span><br><span class="line"><span class="tag"><<span class="name">keep-alive</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">component</span> <span class="attr">v-bind:is</span>=<span class="string">"currentTabComponent"</span>></span><span class="tag"></<span class="name">component</span>></span></span><br><span class="line"><span class="tag"></<span class="name">keep-alive</span>></span></span><br></pre></td></tr></table></figure><p>아래 결괴를 확인하세요. :</p><div id="dynamic-component-keep-alive-demo" class="demo"> <button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['dynamic-component-demo-tab-button', { 'dynamic-component-demo-active': currentTab === tab }]" v-on:click="currentTab = tab">{{ tab }}</button> <keep-alive> <component v-bind:is="currentTabComponent" class="dynamic-component-demo-tab"></component> </keep-alive></div><script>new Vue({ el: '#dynamic-component-keep-alive-demo', data: { currentTab: 'Posts', tabs: ['Posts', 'Archive'] }, computed: { currentTabComponent: function () { return 'tab-' + this.currentTab.toLowerCase() } }})</script><p>이제 <em>Posts</em> 탭은 (게시물이 선택된) 상태를 유지할 수 있고 심지어 렌더링하지 않습니다. 완성된 코드는 <a href="https://jsfiddle.net/chrisvfritz/Lp20op9o/" target="_blank" rel="noopener">this fiddle</a>에서 볼 수 있습니다.</p><p class="tip">`<keep-alive>`가 컴포넌트에서 `name` 옵션을 사용하거나 로컬/글로벌 등록을 하여 정의된 모든 것들로 전환되고 있는 컴포넌트들을 요구한다는 것을 유의하세요.</keep-alive></p>더 자세한 내용은 [API reference](../api/#keep-alive)에서 `<keep-alive> 확인해주세요.<h2 id="Async-Components"><a href="#Async-Components" class="headerlink" title="Async Components"></a>Async Components</h2><div class="vueschool"><a href="https://vueschool.io/lessons/dynamically-load-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Async Components lesson">Watch a free video lesson on Vue School</a></div>In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders. For example:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">"async-example"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">resolve, reject</span>) </span>{</span><br><span class="line"> setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// Pass the component definition to the resolve callback</span></span><br><span class="line"> resolve({</span><br><span class="line"> template: <span class="string">"<div>I am async!</div>"</span></span><br><span class="line"> });</span><br><span class="line"> }, <span class="number">1000</span>);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>As you can see, the factory function receives a <code>resolve</code> callback, which should be called when you have retrieved your component definition from the server. You can also call <code>reject(reason)</code> to indicate the load has failed. The <code>setTimeout</code> here is for demonstration; how to retrieve the component is up to you. One recommended approach is to use async components together with <a href="https://webpack.js.org/guides/code-splitting/" target="_blank" rel="noopener">Webpack’s code-splitting feature</a>:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">"async-webpack-example"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">resolve</span>) </span>{</span><br><span class="line"> <span class="comment">// This special require syntax will instruct Webpack to</span></span><br><span class="line"> <span class="comment">// automatically split your built code into bundles which</span></span><br><span class="line"> <span class="comment">// are loaded over Ajax requests.</span></span><br><span class="line"> <span class="built_in">require</span>([<span class="string">"./my-async-component"</span>], resolve);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>You can also return a <code>Promise</code> in the factory function, so with Webpack 2 and ES2015 syntax you can do:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(</span><br><span class="line"> <span class="string">"async-webpack-example"</span>,</span><br><span class="line"> <span class="comment">// The `import` function returns a Promise.</span></span><br><span class="line"> () => <span class="keyword">import</span>(<span class="string">"./my-async-component"</span>)</span><br><span class="line">);</span><br></pre></td></tr></table></figure><p>When using <a href="components-registration.html#Local-Registration">local registration</a>, you can also directly provide a function that returns a <code>Promise</code>:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> components: {</span><br><span class="line"> <span class="string">"my-component"</span>: <span class="function"><span class="params">()</span> =></span> <span class="keyword">import</span>(<span class="string">"./my-async-component"</span>)</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p class="tip">If you're a <strong>Browserify</strong> user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend using Webpack for built-in, first-class async support.</p>### Handling Loading State<blockquote><p>New in 2.3.0+</p></blockquote><p>The async component factory can also return an object of the following format:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> AsyncComponent = <span class="function"><span class="params">()</span> =></span> ({</span><br><span class="line"> <span class="comment">// The component to load (should be a Promise)</span></span><br><span class="line"> component: <span class="keyword">import</span>(<span class="string">"./MyComponent.vue"</span>),</span><br><span class="line"> <span class="comment">// A component to use while the async component is loading</span></span><br><span class="line"> loading: LoadingComponent,</span><br><span class="line"> <span class="comment">// A component to use if the load fails</span></span><br><span class="line"> error: ErrorComponent,</span><br><span class="line"> <span class="comment">// Delay before showing the loading component. Default: 200ms.</span></span><br><span class="line"> delay: <span class="number">200</span>,</span><br><span class="line"> <span class="comment">// The error component will be displayed if a timeout is</span></span><br><span class="line"> <span class="comment">// provided and exceeded. Default: Infinity.</span></span><br><span class="line"> timeout: <span class="number">3000</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><blockquote><p>Note that you must use <a href="https://github.com/vuejs/vue-router" target="_blank" rel="noopener">Vue Router</a> 2.4.0+ if you wish to use the above syntax for route components.</p></blockquote></keep-alive>]]></content>
<summary type="html">
<blockquote>
<p>이 페이지는 <a href="components.html">컴포넌트 기초</a>를 읽었다는 것을 가정합니다. 컴포넌트가 처음이라면 먼저 읽어야 합니다.</p>
</blockquote>
<h2 id="keep-alive-동적
</summary>
<category term="Vue.js" scheme="https://vue-guide.github.io/categories/Vue-js/"/>
<category term="Vue.js" scheme="https://vue-guide.github.io/tags/Vue-js/"/>
</entry>
<entry>
<title>액션</title>
<link href="https://vue-guide.github.io/wiki/vuex/actions/"/>
<id>https://vue-guide.github.io/wiki/vuex/actions/</id>
<published>2019-12-07T10:04:47.000Z</published>
<updated>2020-03-19T01:48:23.934Z</updated>
<content type="html"><![CDATA[<h1 id="액션"><a href="#액션" class="headerlink" title="액션"></a>액션</h1><p>액션은 변이와 유사합니다. 몇가지 다른 점은,</p><ul><li>상태를 변이시키는 대신 액션으로 변이에 대한 커밋을 합니다.</li><li>작업에는 임의의 비동기 작업이 포함될 수 있습니다.</li></ul><p>간단한 액션을 등록합시다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> state: {</span><br><span class="line"> count: <span class="number">0</span></span><br><span class="line"> },</span><br><span class="line"> mutations: {</span><br><span class="line"> increment (state) {</span><br><span class="line"> state.count++</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> actions: {</span><br><span class="line"> increment (context) {</span><br><span class="line"> context.commit(<span class="string">'increment'</span>)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>액션 핸들러는 저장소 인스턴스의 같은 메소드들/프로퍼티 세트를 드러내는 컨텍스트 객체를 받습니다. 그래서 <code>context.commit</code>을 호출하여 변이를 커밋하거나 <code>context.state</code>와 <code>context.getters</code>를 통해 상태와 getters에 접근 할 수 있습니다. 나중에 <a href="modules.md">모듈</a>에서 이 컨텍스트 객체가 저장소 인스턴스 자체가 아닌 이유를 알 수 있습니다.</p><p>실제로 (특히 <code>commit</code>를 여러 번 호출해야하는 경우)코드를 단순화하기 위해 ES2015 <a href="https://github.com/lukehoban/es6features#destructuring" target="_blank" rel="noopener">전달인자 분해</a>를 사용합니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">actions: {</span><br><span class="line"> increment ({ commit }) {</span><br><span class="line"> commit(<span class="string">'increment'</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="디스패치-액션"><a href="#디스패치-액션" class="headerlink" title="디스패치 액션"></a>디스패치 액션</h3><p>액션은 <code>store.dispatch</code> 메소드로 시작됩니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">store.dispatch(<span class="string">'increment'</span>)</span><br></pre></td></tr></table></figure><p>처음 볼 때는 이상해 보일 수 있습니다. 카운트를 증가 시키려면 <code>store.commit('increment')</code>를 직접 호출하면 어떻습니까? 음, <strong>상태변이는 동기적</strong> 이어야 한다는 것을 기억하십니까? 액션은 그렇지 않습니다. 액션 내에서 <strong>비동기</strong> 작업을 수행 할 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">actions: {</span><br><span class="line"> incrementAsync ({ commit }) {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> commit(<span class="string">'increment'</span>)</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>액션은 동일한 페이로드 타입과 객체 스타일의 디스패치를 지원합니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 페이로드와 함께 디스패치</span></span><br><span class="line">store.dispatch(<span class="string">'incrementAsync'</span>, {</span><br><span class="line"> amount: <span class="number">10</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 객체와 함께 디스패치</span></span><br><span class="line">store.dispatch({</span><br><span class="line"> type: <span class="string">'incrementAsync'</span>,</span><br><span class="line"> amount: <span class="number">10</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>액션의 좀 더 실용적인 예는 <strong>비동기 API 호출</strong> 과 <strong>여러 개의 변이를 커밋</strong> 하는 장바구니 결제입니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">actions: {</span><br><span class="line"> checkout ({ commit, state }, products) {</span><br><span class="line"> <span class="comment">// 장바구니에 현재있는 항목을 저장하십시오.</span></span><br><span class="line"> <span class="keyword">const</span> savedCartItems = [...state.cart.added]</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 결제 요청을 보낸 후 장바구니를 비웁니다.</span></span><br><span class="line"> commit(types.CHECKOUT_REQUEST)</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 상점 API는 성공 콜백 및 실패 콜백을 받습니다.</span></span><br><span class="line"> shop.buyProducts(</span><br><span class="line"> products,</span><br><span class="line"> <span class="comment">// 요청 성공 핸들러</span></span><br><span class="line"> () => commit(types.CHECKOUT_SUCCESS),</span><br><span class="line"> <span class="comment">// 요청 실패 핸들러</span></span><br><span class="line"> () => commit(types.CHECKOUT_FAILURE, savedCartItems)</span><br><span class="line"> )</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>비동기 작업의 흐름을 수행하고 커밋하여 작업의 사이드이펙트(상태 변이)을 기록합니다.</p><h3 id="컴포넌트-내부에서-디스패치-액션-사용하기"><a href="#컴포넌트-내부에서-디스패치-액션-사용하기" class="headerlink" title="컴포넌트 내부에서 디스패치 액션 사용하기"></a>컴포넌트 내부에서 디스패치 액션 사용하기</h3><p><code>this.$store.dispatch('xxx')</code>를 사용하여 컴포넌트에서 액션을 디스패치하거나 컴포넌트 메소드를 <code>store.dispatch</code> 호출에 매핑하는 <code>mapActions</code> 헬퍼를 사용할 수 있습니다 (루트 <code>store</code> 주입 필요) :</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { mapActions } <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> methods: {</span><br><span class="line"> ...mapActions([</span><br><span class="line"> <span class="string">'increment'</span> <span class="comment">// this.increment()을 this.$store.dispatch('increment')에 매핑</span></span><br><span class="line"> ]),</span><br><span class="line"> ...mapActions({</span><br><span class="line"> add: <span class="string">'increment'</span> <span class="comment">// this.add()을 this.$store.dispatch('increment')에 매핑</span></span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="액션-구성하기"><a href="#액션-구성하기" class="headerlink" title="액션 구성하기"></a>액션 구성하기</h3><p>액션은 종종 비동기적 입니다. 그러면 액션이 언제 완료되는지 어떻게 알 수 있습니까? 더 중요한 것은, 복잡한 비동기 흐름을 처리하기 위해 어떻게 여러 작업을 함께 구성 할 수 있습니까?</p><p>가장 먼저 알아야 할 점은 <code>store.dispatch</code>가 트리거 된 액션 핸들러에 의해 반환된 Promise를 처리 할 수 있으며 Promise를 반환한다는 것입니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">actions: {</span><br><span class="line"> actionA ({ commit }) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> commit(<span class="string">'someMutation'</span>)</span><br><span class="line"> resolve()</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>이렇게 할 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">store.dispatch(<span class="string">'actionA'</span>).then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>그리고 안에 또 다른 액션을 사용할 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">actions: {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> actionB ({ dispatch, commit }) {</span><br><span class="line"> <span class="keyword">return</span> dispatch(<span class="string">'actionA'</span>).then(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> commit(<span class="string">'someOtherMutation'</span>)</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>마지막으로, JavaScript 기능인 <a href="https://tc39.github.io/ecmascript-asyncawait/" target="_blank" rel="noopener">async/await</a>를 사용하면 다음과 같은 작업을 구성 할 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// getData() 및 getOtherData()가 Promise를 반환한다고 가정합니다.</span></span><br><span class="line">actions: {</span><br><span class="line"> <span class="keyword">async</span> actionA ({ commit }) {</span><br><span class="line"> commit(<span class="string">'gotData'</span>, <span class="keyword">await</span> getData())</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">async</span> actionB ({ dispatch, commit }) {</span><br><span class="line"> <span class="keyword">await</span> dispatch(<span class="string">'actionA'</span>) <span class="comment">// actionA가 끝나기를 기다립니다.</span></span><br><span class="line"> commit(<span class="string">'gotOtherData'</span>, <span class="keyword">await</span> getOtherData())</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><blockquote><p><code>store.dispatch</code>가 다른 모듈에서 여러 액션 핸들러를 트리거하는 것이 가능합니다. 이 경우 반환 된 값은 모든 트리거 된 처리기가 완료 되었을 때 처리되는 Promise입니다.</p></blockquote>]]></content>
<summary type="html">
<h1 id="액션"><a href="#액션" class="headerlink" title="액션"></a>액션</h1><p>액션은 변이와 유사합니다. 몇가지 다른 점은,</p>
<ul>
<li>상태를 변이시키는 대신 액션으로 변이에 대한 커밋을 합니
</summary>
<category term="Vuex" scheme="https://vue-guide.github.io/categories/Vuex/"/>
<category term="Vuex" scheme="https://vue-guide.github.io/tags/Vuex/"/>
</entry>
<entry>
<title>Strict 모드</title>
<link href="https://vue-guide.github.io/wiki/vuex/strict/"/>
<id>https://vue-guide.github.io/wiki/vuex/strict/</id>
<published>2019-12-07T10:04:47.000Z</published>
<updated>2020-03-19T01:48:23.940Z</updated>
<content type="html"><![CDATA[<h1 id="Strict-모드"><a href="#Strict-모드" class="headerlink" title="Strict 모드"></a>Strict 모드</h1><p>strict 모드를 사용하기 위해, <code>strict: true</code>를 Vuex 저장소를 만들 때 추가하면 됩니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> strict: <span class="literal">true</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>엄격 모드에서는 Vuex 상태가 변이 핸들러 외부에서 변이 될 때 마다 오류가 발생합니다. 이렇게하면 디버깅 도구로 모든 상태 변이를 명시적으로 추적 할 수 있습니다.</p><h3 id="개발-vs-배포"><a href="#개발-vs-배포" class="headerlink" title="개발 vs. 배포"></a>개발 vs. 배포</h3><p><strong>배포시 strict 모드를 켜지 마십시오!</strong> Strict 모드는 부적절한 변이를 감지하기 위해 상태 트리를 자세히 관찰합니다. 성능 이슈를 피하기 위해 배포 환경에서 이를 해제 하십시오.</p><p>플러그인과 마찬가지로 빌드 도구가 다음을 처리하도록 할 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> strict: process.env.NODE_ENV !== <span class="string">'production'</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h1 id="Strict-모드"><a href="#Strict-모드" class="headerlink" title="Strict 모드"></a>Strict 모드</h1><p>strict 모드를 사용하기 위해, <code>strict: true</co
</summary>
<category term="Vuex" scheme="https://vue-guide.github.io/categories/Vuex/"/>
<category term="Vuex" scheme="https://vue-guide.github.io/tags/Vuex/"/>
</entry>
<entry>
<title>상태</title>
<link href="https://vue-guide.github.io/wiki/vuex/state/"/>
<id>https://vue-guide.github.io/wiki/vuex/state/</id>
<published>2019-12-07T10:04:47.000Z</published>
<updated>2020-03-19T01:48:23.939Z</updated>
<content type="html"><![CDATA[<h1 id="상태"><a href="#상태" class="headerlink" title="상태"></a>상태</h1><h3 id="단일-상태-트리"><a href="#단일-상태-트리" class="headerlink" title="단일 상태 트리"></a>단일 상태 트리</h3><p>Vuex는 <strong>단일 상태 트리</strong> 를 사용합니다. 즉, 이 단일 객체는 모든 애플리케이션 수준의 상태를 포함하며 “원본 소스” 역할을 합니다. 이는 각 애플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미합니다. 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으므로 디버깅을 위해 현재 앱 상태의 스냅 샷을 쉽게 가져올 수 있습니다.</p><p>단일 상태 트리는 모듈성과 충돌하지 않습니다. 나중에 상태와 변이를 하위 모듈로 분할하는 방법에 대해 설명합니다.</p><h3 id="Vuex-상태를-Vue-컴포넌트에서-가져오기"><a href="#Vuex-상태를-Vue-컴포넌트에서-가져오기" class="headerlink" title="Vuex 상태를 Vue 컴포넌트에서 가져오기"></a>Vuex 상태를 Vue 컴포넌트에서 가져오기</h3><p>그러면 Vue 컴포넌트에서 저장소 내부의 상태를 어떻게 표시하나요? Vuex 저장소는 반응적이기 때문에 저장소에서 상태를 “검색”하는 가장 간단한 방법은 <a href="http://kr.vuejs.org/guide/computed.html" target="_blank" rel="noopener">계산된 속성</a>내에서 일부 저장소 상태를 가져오는 것입니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Counter 컴포넌트를 만듭니다</span></span><br><span class="line"><span class="keyword">const</span> Counter = {</span><br><span class="line"> template: <span class="string">`<div>{{ count }}</div>`</span>,</span><br><span class="line"> computed: {</span><br><span class="line"> count () {</span><br><span class="line"> <span class="keyword">return</span> store.state.count</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>store.state.count</code>가 변경되면 계산된 속성이 다시 변경되고 관련 DOM 업데이트가 트리거됩니다.</p><p>그러나 이 패턴은 컴포넌트가 전역 저장소 단독 항목에 의존하게합니다. 모듈 시스템을 사용할 때는 저장소 상태를 사용하는 모든 컴포넌트에서 저장소를 가져와야하며 컴포넌트를 테스트 할 때는 가짜데이터가 필요합니다.</p><p>Vuex는 <code>store</code> 옵션(<code>Vue.use(Vuex)</code>에 의해 가능)으로 루트 컴포넌트의 모든 자식 컴포넌트에 저장소를 “주입”하는 메커니즘을 제공합니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> Vue({</span><br><span class="line"> el: <span class="string">'#app'</span>,</span><br><span class="line"> <span class="comment">// "store" 옵션을 사용하여 저장소를 제공하십시오.</span></span><br><span class="line"> <span class="comment">// 그러면 모든 하위 컴포넌트에 저장소 인스턴스가 삽입됩니다.</span></span><br><span class="line"> store,</span><br><span class="line"> components: { Counter },</span><br><span class="line"> template: <span class="string">`</span></span><br><span class="line"><span class="string"> <div class="app"></span></span><br><span class="line"><span class="string"> <counter></counter></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> `</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>루트 인스턴스에 <code>store</code> 옵션을 제공함으로써 저장소는 루트의 모든 하위 컴포넌트에 주입되고 <code>this.$store</code>로 사용할 수 있습니다. <code>Counter</code> 구현을 수정해야 합니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Counter = {</span><br><span class="line"> template: <span class="string">`<div>{{ count }}</div>`</span>,</span><br><span class="line"> computed: {</span><br><span class="line"> count () {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.$store.state.count</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="mapState-헬퍼"><a href="#mapState-헬퍼" class="headerlink" title="mapState 헬퍼"></a><code>mapState</code> 헬퍼</h3><p>컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야하는 경우 계산된 속성을 모두 선언하면 반복적이고 장황해집니다. 이를 처리하기 위해 우리는 계산된 getter 함수를 생성하는 <code>mapState</code> 헬퍼를 사용하여 키 입력을 줄일 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 독립 실행 형 빌드에서 헬퍼가 Vuex.mapState로 노출됩니다.</span></span><br><span class="line"><span class="keyword">import</span> { mapState } <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> computed: mapState({</span><br><span class="line"> <span class="comment">// 화살표 함수는 코드를 매우 간결하게 만들어 줍니다!</span></span><br><span class="line"> count: <span class="function"><span class="params">state</span> =></span> state.count,</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 문자열 값 'count'를 전달하는 것은 `state => state.count`와 같습니다.</span></span><br><span class="line"> countAlias: <span class="string">'count'</span>,</span><br><span class="line"></span><br><span class="line"> <span class="comment">// `this`를 사용하여 로컬 상태에 액세스하려면 일반적인 함수를 사용해야합니다</span></span><br><span class="line"> countPlusLocalState (state) {</span><br><span class="line"> <span class="keyword">return</span> state.count + <span class="keyword">this</span>.localCount</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>또한 매핑 된 계산된 속성의 이름이 상태 하위 트리 이름과 같을 때 문자열 배열을 <code>mapState</code>에 전달할 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">computed: mapState([</span><br><span class="line"> <span class="comment">// this.count를 store.state.count에 매핑 합니다.</span></span><br><span class="line"> <span class="string">'count'</span></span><br><span class="line">])</span><br></pre></td></tr></table></figure><h3 id="객체-전개-연산자-Object-Spread-Operator"><a href="#객체-전개-연산자-Object-Spread-Operator" class="headerlink" title="객체 전개 연산자 (Object Spread Operator)"></a>객체 전개 연산자 (Object Spread Operator)</h3><p><code>mapState</code>는 객체를 반환합니다. 다른 로컬 영역의 계산된 속성과 함께 사용하려면 어떻게 해야 하나요? 일반적으로, 최종 객체를 <code>computed</code>에 전달할 수 있도록 여러 객체를 하나로 병합하는 유틸리티를 사용해야합니다. 그러나 (3 단계 ECMAScript 스펙) <a href="https://github.com/sebmarkbage/ecmascript-rest-spread" target="_blank" rel="noopener">객체 전개 연산자 (Object Spread Operator)</a>을 사용하면 문법을 매우 단순화 할 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">computed: {</span><br><span class="line"> localComputed () { <span class="comment">/* ... */</span> },</span><br><span class="line"> <span class="comment">// 이것을 객체 전개 연산자(Object Spread Operator)를 사용하여 외부 객체에 추가 하십시오.</span></span><br><span class="line"> ...mapState({</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="컴포넌트에는-여전히-로컬-상태가-있을-수-있습니다"><a href="#컴포넌트에는-여전히-로컬-상태가-있을-수-있습니다" class="headerlink" title="컴포넌트에는 여전히 로컬 상태가 있을 수 있습니다."></a>컴포넌트에는 여전히 로컬 상태가 있을 수 있습니다.</h3><p>Vuex를 사용한다고해서 Vuex에 <strong>모든</strong> 상태를 넣어야하는 것은 아닙니다. Vuex에 더 많은 상태를 넣으면 상태 변이가 더 명확하고 디버그 가능하지만, 때로는 코드를 보다 장황하고 간접적으로 만들 수 있습니다. 상태 조각이 단일 컴포넌트에 엄격하게 속한 경우 로컬 상태로 남겨 둘 수 있습니다. 기회비용을 판단하고 앱의 개발 요구에 맞는 결정을 내려야 합니다.</p>]]></content>
<summary type="html">
<h1 id="상태"><a href="#상태" class="headerlink" title="상태"></a>상태</h1><h3 id="단일-상태-트리"><a href="#단일-상태-트리" class="headerlink" title="단일 상태 트리"
</summary>
<category term="Vuex" scheme="https://vue-guide.github.io/categories/Vuex/"/>
<category term="Vuex" scheme="https://vue-guide.github.io/tags/Vuex/"/>
</entry>
<entry>
<title>플러그인</title>
<link href="https://vue-guide.github.io/wiki/vuex/plugins/"/>
<id>https://vue-guide.github.io/wiki/vuex/plugins/</id>
<published>2019-12-07T10:04:47.000Z</published>
<updated>2020-03-19T01:48:23.939Z</updated>
<content type="html"><![CDATA[<h1 id="플러그인"><a href="#플러그인" class="headerlink" title="플러그인"></a>플러그인</h1><p>Vuex 저장소는 각 변이에 대한 훅을 노출하는 <code>plugins</code> 옵션을 허용합니다. Vuex 플러그인은 저장소를 유일한 전달인자로 받는 함수입니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myPlugin = <span class="function"><span class="params">store</span> =></span> {</span><br><span class="line"> <span class="comment">// 저장소가 초기화 될 때 불립니다.</span></span><br><span class="line"> store.subscribe(<span class="function">(<span class="params">mutation, state</span>) =></span> {</span><br><span class="line"> <span class="comment">// 매 변이시마다 불립니다.</span></span><br><span class="line"> <span class="comment">// 변이는 { type, payload } 포맷으로 제공됩니다.</span></span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>그리고 다음과 같이 사용할 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> plugins: [myPlugin]</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="플러그인-내부에서-변이-커밋하기"><a href="#플러그인-내부에서-변이-커밋하기" class="headerlink" title="플러그인 내부에서 변이 커밋하기"></a>플러그인 내부에서 변이 커밋하기</h3><p>플러그인은 상태를 직접 변이할 수 없습니다. 컴포넌트와 마찬가지로 변이를 커밋하여 변경을 트리거 할 수 있습니다.</p><p>변이을 커밋함으로써 플러그인을 사용하여 데이터 소스를 저장소에 동기화 할 수 있습니다. 예를 들어, websocket 데이터 소스를 저장소에 동기화하려면 (이는 사실 인위적인 예제입니다. 실제로 <code>createPlugin</code> 함수는 더 복잡한 작업을 위해 몇 가지 추가 옵션을 필요로 할 수 있습니다)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">createWebSocketPlugin</span> (<span class="params">socket</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="params">store</span> =></span> {</span><br><span class="line"> socket.on(<span class="string">'data'</span>, data => {</span><br><span class="line"> store.commit(<span class="string">'receiveData'</span>, data)</span><br><span class="line"> })</span><br><span class="line"> store.subscribe(<span class="function"><span class="params">mutation</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (mutation.type === <span class="string">'UPDATE_DATA'</span>) {</span><br><span class="line"> socket.emit(<span class="string">'update'</span>, mutation.payload)</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> plugin = createWebSocketPlugin(socket)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> state,</span><br><span class="line"> mutations,</span><br><span class="line"> plugins: [plugin]</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="상태-스냅샷-가져오기"><a href="#상태-스냅샷-가져오기" class="headerlink" title="상태 스냅샷 가져오기"></a>상태 스냅샷 가져오기</h3><p>때로는 플러그인이 상태의 “스냅샷”을 얻고자 할 수 있으며, 또한 변이 이후 상태와 변이 이전 상태를 비교할 수 있습니다. 이를 달성하기 위해서는 상태 객체에 대한 깊은 복사를 수행해야합니다 :</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myPluginWithSnapshot = <span class="function"><span class="params">store</span> =></span> {</span><br><span class="line"> <span class="keyword">let</span> prevState = _.cloneDeep(store.state)</span><br><span class="line"> store.subscribe(<span class="function">(<span class="params">mutation, state</span>) =></span> {</span><br><span class="line"> <span class="keyword">let</span> nextState = _.cloneDeep(state)</span><br><span class="line"></span><br><span class="line"> <span class="comment">// prevState와 nextState를 비교하십시오.</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 다음 변이를 위한 상태 저장</span></span><br><span class="line"> prevState = nextState</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>상태 스냅 샷을 사용하는 플러그인은 개발 중에 만 사용해야합니다.</strong> webpack 또는 Browserify를 사용하는 경우 빌드 도구가 이를 처리 할 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> plugins: process.env.NODE_ENV !== <span class="string">'production'</span></span><br><span class="line"> ? [myPluginWithSnapshot]</span><br><span class="line"> : []</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>플러그인은 기본적으로 사용됩니다. 배포를 위해서는 webpack의 <a href="https://webpack.js.org/plugins/define-plugin/" target="_blank" rel="noopener">DefinePlugin</a> 또는 <a href="https://github.com/hughsk/envify" target="_blank" rel="noopener">envify</a>가 필요합니다. Browserify가 <code>process.env.NODE_ENV !== 'production'</code>의 값을 최종 빌드를 위해 <code>false</code>로 변환합니다.</p><h3 id="내장-로거-플러그인"><a href="#내장-로거-플러그인" class="headerlink" title="내장 로거 플러그인"></a>내장 로거 플러그인</h3><blockquote><p><a href="https://github.com/vuejs/vue-devtools" target="_blank" rel="noopener">vue-devtools</a>를 사용하고 있으면 필요 없을 수 있습니다.</p></blockquote><p>Vuex에는 일반적인 디버깅을 위한 로거 플러그인이 함께 제공됩니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> createLogger <span class="keyword">from</span> <span class="string">'vuex/dist/logger'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> plugins: [createLogger()]</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><code>createLogger</code> 함수는 몇 가지 옵션을 가질 수 있습니다.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> logger = createLogger({</span><br><span class="line"> collapsed: <span class="literal">false</span>, <span class="comment">// 로그를 가지는 변이 자동 확장</span></span><br><span class="line"> filter (mutation, stateBefore, stateAfter) {</span><br><span class="line"> <span class="comment">// returns true if a mutation should be logged</span></span><br><span class="line"> <span class="comment">// `mutation` is a { type, payload }</span></span><br><span class="line"> <span class="keyword">return</span> mutation.type !== <span class="string">"aBlacklistedMutation"</span></span><br><span class="line"> },</span><br><span class="line"> transformer (state) {</span><br><span class="line"> <span class="comment">// 로깅하기전 상태를 변이 하십시오.</span></span><br><span class="line"> <span class="comment">// 예를 들어 특정 하위 트리만 반환합니다.</span></span><br><span class="line"> <span class="keyword">return</span> state.subTree</span><br><span class="line"> },</span><br><span class="line"> mutationTransformer (mutation) {</span><br><span class="line"> <span class="comment">// 변이는 { type, payload }의 포맷으로 기록됩니다.</span></span><br><span class="line"> <span class="comment">// 원하는 포맷으로 변경할 수 있습니다.</span></span><br><span class="line"> <span class="keyword">return</span> mutation.type</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>로거 파일은<code><script></code>태그를 통해 직접 포함될 수 있으며 <code>createVuexLogger</code> 함수를 전역적으로 노출합니다.</p><p>로거 플러그인은 상태 스냅샷을 사용하므로 개발용으로만 사용하십시오.</p>]]></content>
<summary type="html">
<h1 id="플러그인"><a href="#플러그인" class="headerlink" title="플러그인"></a>플러그인</h1><p>Vuex 저장소는 각 변이에 대한 훅을 노출하는 <code>plugins</code> 옵션을 허용합니다. Vue
</summary>
<category term="Vuex" scheme="https://vue-guide.github.io/categories/Vuex/"/>
<category term="Vuex" scheme="https://vue-guide.github.io/tags/Vuex/"/>
</entry>
</feed>