This repository has been archived by the owner on Apr 1, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 230
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Ken Berkeley
committed
Jul 12, 2017
1 parent
faf8a07
commit 92c1791
Showing
74 changed files
with
3,835 additions
and
269 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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`） |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.