v1.1.0 Released!

Author: Ken Berkeley

docs/_book/en/DIY.html

@@ -0,0 +1,23 @@
+# § Detailed
+
+It would be better for you to understand the structure of this Datatable before the detailed content.
+
+The source tree [`lib/`](https://github.com/OneWayTech/vue2-datatable/tree/master/lib) shown as below:
+
+```
+lib/
+ ├─ HeaderSettings/
+ │   ├─ ColumnGroup.vue
+ │   └─ index.vue
+ ├─ HeadSort.vue
+ ├─ LimitSelect.vue
+ ├─ MultiSelect.vue
+ ├─ Pagination.vue
+ └─ index.vue
+```
+
+Let's look at the structure of the advanced example (source - [`examples/src/Advanced/index.vue`](https://github.com/OneWayTech/vue2-datatable/blob/master/examples/src/Advanced/index.vue), demo - [examples#advanced](https://OneWayTech.github.io/vue2-datatable/examples/dist#advanced))
+
+<a href="images/structure.png" target="_blank">
+  <img src="images/structure.png" alt="Structure">
+</a>

docs/_book/en/detailed/README.md

@@ -146,7 +146,7 @@
                 <a href="./">
 
 
-                    Detailed
+                    Detailed (click me)
 
                 </a>
 
@@ -251,7 +251,33 @@
 
         </li>
 
-        <li class="chapter " data-level="1.6" >
+        <li class="chapter " data-level="1.6" data-path="../i18n.html">
+            
+                <a href="../i18n.html">
+            
+                    
+                    I18N
+            
+                </a>
+            
+
+            
+        </li>
+    
+        <li class="chapter " data-level="1.7" data-path="../DIY.html">
+            
+                <a href="../DIY.html">
+            
+                    
+                    DIY
+            
+                </a>
+            
+
+            
+        </li>
+    
+        <li class="chapter " data-level="1.8" >
 
                 <a target="_blank" href="https://github.com/OneWayTech/vue2-datatable/issues">
 
@@ -264,7 +290,7 @@
 
         </li>
 
-        <li class="chapter " data-level="1.7" >
+        <li class="chapter " data-level="1.9" >
 
                 <a target="_blank" href="https://github.com/OneWayTech/vue2-datatable/releases">
 
@@ -417,9 +443,9 @@ <h1 id="&#xA7;-props-of-datatable">&#xA7; <code>props</code> of Datatable</h1>
 </tr>
 <tr>
 <td>support-nested</td>
-<td>Should support nested components</td>
-<td>Boolean</td>
-<td>true / false</td>
+<td>Should support nested components (<code>accordion</code> mode is supported)</td>
+<td>Boolean / String</td>
+<td>true / false / &apos;accordion&apos;</td>
 <td>false</td>
 <td>N</td>
 </tr>
@@ -473,7 +499,7 @@ <h1 class="search-results-title">No results matching "<span class='search-query'
 
 
 
-                <a href="./" class="navigation navigation-prev " aria-label="Previous page: Detailed">
+                <a href="./" class="navigation navigation-prev " aria-label="Previous page: Detailed (click me)">
                     <i class="fa fa-angle-left"></i>
                 </a>
 
@@ -489,7 +515,7 @@ <h1 class="search-results-title">No results matching "<span class='search-query'
     <script>
         var gitbook = gitbook || [];
         gitbook.push(function() {
-            gitbook.page.hasChanged({"page":{"title":"props of Datatable","level":"1.5.1","depth":2,"next":{"title":":columns","level":"1.5.2","depth":2,"path":"detailed/props-columns.md","ref":"detailed/props-columns.md","articles":[]},"previous":{"title":"Detailed","level":"1.5","depth":1,"path":"detailed/README.md","ref":"detailed/README.md","articles":[{"title":"props of Datatable","level":"1.5.1","depth":2,"path":"detailed/datatable-props.md","ref":"detailed/datatable-props.md","articles":[]},{"title":":columns","level":"1.5.2","depth":2,"path":"detailed/props-columns.md","ref":"detailed/props-columns.md","articles":[]},{"title":":data","level":"1.5.3","depth":2,"path":"detailed/props-data.md","ref":"detailed/props-data.md","articles":[]},{"title":":query","level":"1.5.4","depth":2,"path":"detailed/props-query.md","ref":"detailed/props-query.md","articles":[]},{"title":":selection","level":"1.5.5","depth":2,"path":"detailed/props-selection.md","ref":"detailed/props-selection.md","articles":[]},{"title":":xprops","level":"1.5.6","depth":2,"path":"detailed/props-xprops.md","ref":"detailed/props-xprops.md","articles":[]},{"title":"Dynamic Components","level":"1.5.7","depth":2,"path":"detailed/dynamic-comps.md","ref":"detailed/dynamic-comps.md","articles":[]}]},"dir":"ltr"},"config":{"plugins":["edit-link","github","-sharing"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"edit-link":{"label":{"zh-cn":"编辑此页面","en":"Edit this page"},"base":"https://github.com/OneWayTech/vue2-datatable/edit/master/docs"},"github":{"url":"https://github.com/OneWayTech/vue2-datatable"},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"language":"en","gitbook":"*"},"file":{"path":"detailed/datatable-props.md","mtime":"2017-06-07T16:02:08.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-06-07T16:17:41.560Z"},"basePath":"..","book":{"language":"en"}});
+            gitbook.page.hasChanged({"page":{"title":"props of Datatable","level":"1.5.1","depth":2,"next":{"title":":columns","level":"1.5.2","depth":2,"path":"detailed/props-columns.md","ref":"detailed/props-columns.md","articles":[]},"previous":{"title":"Detailed (click me)","level":"1.5","depth":1,"path":"detailed/README.md","ref":"detailed/README.md","articles":[{"title":"props of Datatable","level":"1.5.1","depth":2,"path":"detailed/datatable-props.md","ref":"detailed/datatable-props.md","articles":[]},{"title":":columns","level":"1.5.2","depth":2,"path":"detailed/props-columns.md","ref":"detailed/props-columns.md","articles":[]},{"title":":data","level":"1.5.3","depth":2,"path":"detailed/props-data.md","ref":"detailed/props-data.md","articles":[]},{"title":":query","level":"1.5.4","depth":2,"path":"detailed/props-query.md","ref":"detailed/props-query.md","articles":[]},{"title":":selection","level":"1.5.5","depth":2,"path":"detailed/props-selection.md","ref":"detailed/props-selection.md","articles":[]},{"title":":xprops","level":"1.5.6","depth":2,"path":"detailed/props-xprops.md","ref":"detailed/props-xprops.md","articles":[]},{"title":"Dynamic Components","level":"1.5.7","depth":2,"path":"detailed/dynamic-comps.md","ref":"detailed/dynamic-comps.md","articles":[]}]},"dir":"ltr"},"config":{"plugins":["edit-link","github","-sharing"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"edit-link":{"label":{"zh-cn":"编辑此页面","en":"Edit this page"},"base":"https://github.com/OneWayTech/vue2-datatable/edit/master/docs"},"github":{"url":"https://github.com/OneWayTech/vue2-datatable"},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"language":"en","gitbook":"*"},"file":{"path":"detailed/datatable-props.md","mtime":"2017-07-12T08:25:28.882Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-07-12T10:19:54.330Z"},"basePath":"..","book":{"language":"en"}});
         });
     </script>
 </div>

docs/_book/en/detailed/datatable-props.html

@@ -0,0 +1,30 @@
+# § `props` of Datatable
+
+| prop | Desc | Type | Optional values | Default value | Required |
+|----------------|------------------------------------------------|---------|--------------|--------|----------|
+| columns | Defination of columns | Array | - | - | Y |
+| data | Table data of the current page (rows) | Array | - | - | Y |
+| total | Total number of records | Number | - | - | Y |
+| query | Query object | Object | - | - | Y |
+| selection | Container of multi-select | Array | - | - | N |
+| summary | Summary row | Object | - | - | N |
+| HeaderSettings | Should render HeaderSettings | Boolean | true / false | true | N |
+| Pagination | Should render pagination related | Boolean | true / false | true | N |
+| xprops | Container of extra props passed to dynamic components | Object | - | - | N |
+| support-backup | Should support backup of HeaderSettings | Boolean | true / false | false | N |
+| support-nested | Should support nested components (`accordion` mode is supported) | Boolean / String | true / false / 'accordion' | false | N |
+| table-bordered | Should add `.table-bordered` to `<table>` | Boolean | true / false | false | N |
+
+> The above is based on the source ([`lib/index.vue`](https://github.com/OneWayTech/vue2-datatable/blob/master/lib/index.vue)).  
+> By the way, the advanced example (source - [`examples/src/Advanced/index.vue`](https://github.com/OneWayTech/vue2-datatable/blob/master/examples/src/Advanced/index.vue), demo - [examples#advanced](https://OneWayTech.github.io/vue2-datatable/examples/dist#advanced))  
+> almost covers all the usages, which is highly recommended to study and imitate.
+
+In the following content, I would like to emphasize the props below:  
+
+* `columns`
+* `data`
+* `query`
+* `selection`
+* `summary`
+* `xprops`
+* Dynamic components（`thComp / tdComp / nested component`）

docs/_book/en/detailed/datatable-props.md

@@ -57,6 +57,8 @@
     <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
 
 
+    <link rel="next" href="../i18n.html" />
+    
 
     <link rel="prev" href="props-xprops.html" />
 
@@ -144,7 +146,7 @@
                 <a href="./">
 
 
-                    Detailed
+                    Detailed (click me)
 
                 </a>
 
@@ -249,7 +251,33 @@
 
         </li>
 
-        <li class="chapter " data-level="1.6" >
+        <li class="chapter " data-level="1.6" data-path="../i18n.html">
+            
+                <a href="../i18n.html">
+            
+                    
+                    I18N
+            
+                </a>
+            
+
+            
+        </li>
+    
+        <li class="chapter " data-level="1.7" data-path="../DIY.html">
+            
+                <a href="../DIY.html">
+            
+                    
+                    DIY
+            
+                </a>
+            
+
+            
+        </li>
+    
+        <li class="chapter " data-level="1.8" >
 
                 <a target="_blank" href="https://github.com/OneWayTech/vue2-datatable/issues">
 
@@ -262,7 +290,7 @@
 
         </li>
 
-        <li class="chapter " data-level="1.7" >
+        <li class="chapter " data-level="1.9" >
 
                 <a target="_blank" href="https://github.com/OneWayTech/vue2-datatable/releases">
 
@@ -477,19 +505,23 @@ <h1 class="search-results-title">No results matching "<span class='search-query'
 
 
 
-                <a href="props-xprops.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: :xprops">
+                <a href="props-xprops.html" class="navigation navigation-prev " aria-label="Previous page: :xprops">
                     <i class="fa fa-angle-left"></i>
                 </a>
 
 
+                <a href="../i18n.html" class="navigation navigation-next " aria-label="Next page: I18N">
+                    <i class="fa fa-angle-right"></i>
+                </a>
+                
 
 
     </div>
 
     <script>
         var gitbook = gitbook || [];
         gitbook.push(function() {
-            gitbook.page.hasChanged({"page":{"title":"Dynamic Components","level":"1.5.7","depth":2,"next":{"title":"Q & A (issues)","level":"1.6","depth":1,"url":"https://github.com/OneWayTech/vue2-datatable/issues","ref":"https://github.com/OneWayTech/vue2-datatable/issues","articles":[]},"previous":{"title":":xprops","level":"1.5.6","depth":2,"path":"detailed/props-xprops.md","ref":"detailed/props-xprops.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","github","-sharing"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"edit-link":{"label":{"zh-cn":"编辑此页面","en":"Edit this page"},"base":"https://github.com/OneWayTech/vue2-datatable/edit/master/docs"},"github":{"url":"https://github.com/OneWayTech/vue2-datatable"},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"language":"en","gitbook":"*"},"file":{"path":"detailed/dynamic-comps.md","mtime":"2017-06-07T16:02:08.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-06-07T16:17:41.560Z"},"basePath":"..","book":{"language":"en"}});
+            gitbook.page.hasChanged({"page":{"title":"Dynamic Components","level":"1.5.7","depth":2,"next":{"title":"I18N","level":"1.6","depth":1,"path":"i18n.md","ref":"i18n.md","articles":[]},"previous":{"title":":xprops","level":"1.5.6","depth":2,"path":"detailed/props-xprops.md","ref":"detailed/props-xprops.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","github","-sharing"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"edit-link":{"label":{"zh-cn":"编辑此页面","en":"Edit this page"},"base":"https://github.com/OneWayTech/vue2-datatable/edit/master/docs"},"github":{"url":"https://github.com/OneWayTech/vue2-datatable"},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"language":"en","gitbook":"*"},"file":{"path":"detailed/dynamic-comps.md","mtime":"2017-06-06T12:09:21.009Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-07-12T10:19:54.330Z"},"basePath":"..","book":{"language":"en"}});
         });
     </script>
 </div>

docs/_book/en/detailed/dynamic-comps.html

@@ -0,0 +1,65 @@
+# § Dynamic Components（`thComp / tdComp / nested component`）
+
+> The following code is excerpted from the source [`lib/index.vue`](https://github.com/OneWayTech/vue2-datatable/blob/master/lib/index.vue)
+
+## ⊙ `thComp`
+
+```html
+<!-- table head component (thComp) -->
+<component v-if="column.thComp"
+  :is="comp[column.thComp]"
+  :column="column"
+  :field="column.field"
+  :title="column.title"
+  v-bind="$props">
+</component>
+```
+
+| prop | Desc | Type |
+|-----------|------------------------|--------------------|
+| column | Defination of column | Object |
+| field | Field name | String / undefined |
+| title | Displayed title | String / undefined |
+| `...$props` | all the `props` from Datatable | (Spread) |
+
+## ⊙ `tdComp`
+
+```html
+<!-- table body component (tdComp) -->
+<component v-if="column.tdComp"
+  :is="comp[column.tdComp]"
+  :row="item"
+  :field="column.field"
+  :value="item[column.field]"
+  :nested="item.__nested__"
+  v-bind="$props">
+</component>
+```
+
+| prop | Desc | Type |
+|-----------|------------------------|--------------------|
+| row | Current row | Object |
+| field | Field name | String / undefined |
+| value | Value | Any |
+| nested | Controller of the related nested component（reference to `row.__nested__`） | Object / undefined |
+| `...$props` | all the `props` from Datatable | (Spread) |
+
+## ⊙ `nested component`
+
+```html
+<!-- nested component -->
+<component
+  :is="comp[item.__nested__.comp]"
+  :row="item"
+  :nested="item.__nested__"
+  v-bind="$props">
+</component>
+```
+
+| prop | Desc | Type |
+|-----------|------------------------|--------------------|
+| row | Current row | Object |
+| nested | Controller of the related nested component（reference to `row.__nested__`） | Object / undefined |
+| `...$props` | all the `props` from Datatable | (Spread) |
+
+> [`comps/`](https://github.com/OneWayTech/vue2-datatable/blob/master/examples/src/Advanced/comps) of the advanced example covers all the use cases, which is highly recommended to study and imitate.