From cb9c3233f3c9aa6ab7f6b3bd8a403f0cd0db5604 Mon Sep 17 00:00:00 2001 From: Rati Wannapanop Date: Fri, 1 Jun 2018 11:40:18 +0700 Subject: [PATCH] remove docs, will use separate repo instead --- docs/.nojekyll | 0 docs/API-vs-Data.md | 18 -- docs/Background.md | 22 -- docs/CSS-Styling.md | 126 -------- docs/Callbacks.md | 70 ----- docs/Data-Format-JSON.md | 104 ------- docs/Data-Transformation.md | 50 ---- docs/Detail-Row.md | 51 ---- docs/FAQ.md | 7 - docs/Fields-Definition.md | 173 ----------- docs/Filtering.md | 0 docs/Home.md | 38 --- docs/Overriding-Default-Query-String.md | 27 -- docs/Pagination.md | 25 -- docs/README.md | 104 ------- docs/Row-Identifier.md | 3 - docs/Sorting.md | 86 ------ docs/Special-Fields.md | 137 --------- docs/Vuetable-Computed.md | 60 ---- docs/Vuetable-Data.md | 61 ---- docs/Vuetable-Events.md | 149 ---------- docs/Vuetable-Methods.md | 174 ----------- docs/Vuetable-Properties.md | 376 ------------------------ docs/VuetablePagination.md | 9 - docs/VuetablePaginationDropdown.md | 31 -- docs/VuetablePaginationInfo.md | 25 -- docs/VuetablePaginationInfoMixin.md | 69 ----- docs/VuetablePaginationMixin.md | 114 ------- docs/_sidebar.md | 34 --- docs/index.html | 21 -- 30 files changed, 2164 deletions(-) delete mode 100644 docs/.nojekyll delete mode 100644 docs/API-vs-Data.md delete mode 100644 docs/Background.md delete mode 100644 docs/CSS-Styling.md delete mode 100644 docs/Callbacks.md delete mode 100644 docs/Data-Format-JSON.md delete mode 100644 docs/Data-Transformation.md delete mode 100644 docs/Detail-Row.md delete mode 100644 docs/FAQ.md delete mode 100644 docs/Fields-Definition.md delete mode 100644 docs/Filtering.md delete mode 100644 docs/Home.md delete mode 100644 docs/Overriding-Default-Query-String.md delete mode 100644 docs/Pagination.md delete mode 100644 docs/README.md delete mode 100644 docs/Row-Identifier.md delete mode 100644 docs/Sorting.md delete mode 100644 docs/Special-Fields.md delete mode 100644 docs/Vuetable-Computed.md delete mode 100644 docs/Vuetable-Data.md delete mode 100644 docs/Vuetable-Events.md delete mode 100644 docs/Vuetable-Methods.md delete mode 100644 docs/Vuetable-Properties.md delete mode 100644 docs/VuetablePagination.md delete mode 100644 docs/VuetablePaginationDropdown.md delete mode 100644 docs/VuetablePaginationInfo.md delete mode 100644 docs/VuetablePaginationInfoMixin.md delete mode 100644 docs/VuetablePaginationMixin.md delete mode 100644 docs/_sidebar.md delete mode 100644 docs/index.html diff --git a/docs/.nojekyll b/docs/.nojekyll deleted file mode 100644 index e69de29b..00000000 diff --git a/docs/API-vs-Data.md b/docs/API-vs-Data.md deleted file mode 100644 index 3526fee7..00000000 --- a/docs/API-vs-Data.md +++ /dev/null @@ -1,18 +0,0 @@ -# API mode vs. Data mode - -Despite designing to work with API from the beginning, in version 1.6, Vuetable can now work with local data. - -This can be done by specifying that you want to disable the API Mode by setting `:api-mode="false"` and supplying your own data via `:data` prop. But this will also make the server related functionality (like sorting, paging, and page sizing, etc.) stop working. - - - -## Note - -Vuetable is opinionated toward working with the API endpoints from the beginning. This is based solely on my experiences building applications either for desktop or for the web. - -I have a strong believe that this is the model for building app. The client side should handle most of the presentation that interacts with the user, while the server side should handle most of the logic behind the application, this also includes the database related functions. - -Most of the time, we have a very powerful and well developed database server on the server side where it can do an excellent and efficient tasks it was designed to do, like searching, sorting, and filtering of data. Another great benefit of this is that your app will also scale better instead of implementing the client side code to do these tasks. - - - diff --git a/docs/Background.md b/docs/Background.md deleted file mode 100644 index 8a671a4e..00000000 --- a/docs/Background.md +++ /dev/null @@ -1,22 +0,0 @@ -## A Background Story - -Vuetable was born out of a curiousity of learning more about Vue.js and turning a repeated task of creating a data table into a Vue component. - -Like many others, I feel that CRUD based system is easy to understand and implement. With that I usually break up things into modules. Each module will have its own functionality built around CRUD, which are -- index page -- listing all the paginated data relevant to that module -- view page -- showing a specific data record that might also allow deletion -- create page -- allow creating new data record -- edit page -- allow updating existing data record -- other suppporing pages - -Somehow, creating a index page for each module has become copying and pasting existing code from another module and making necessary changes to fit another module's needs. - -Not to mention all the API request stuffs that mostly looks and behaves the same from the backend. This became a boring stuff to do. - -And that's when the [first version](https://github.com/ratiw/vue-table/commit/3143385d718c67e266b02a001e7035cb1c0ffd71) of Vuetable was created. - -When Vue 2 was introduced, Vuetable was also revised to work with this version to take advantage of the Virtual DOM that makes it possible for Vuetable-2 to work with other browsers besides Chrome. - -With the help, the requests, and the suggestions from the community, Vuetable has grown in its features to where it is today. - - diff --git a/docs/CSS-Styling.md b/docs/CSS-Styling.md deleted file mode 100644 index 11e817e6..00000000 --- a/docs/CSS-Styling.md +++ /dev/null @@ -1,126 +0,0 @@ -# CSS Styling - -> __Note__ -> The name inside the square bracket is optional. It may or may not appear depending on the relevant condition - -# Vuetable - -```javascript -{ - tableClass: 'ui blue selectable celled stackable attached table', - loadingClass: 'loading', - ascendingIcon: 'blue chevron up icon', - descendingIcon: 'blue chevron down icon', - detailRowClass: 'vuetable-detail-row', - handleIcon: 'grey sidebar icon', - sortableIcon: '', // since v1.7 - ascendingClass: 'sorted-asc', // since v1.7 - descendingClass: 'sorted-desc' // since v1.7 -} -``` - -## Table `` - -```html -
-``` - -## Table Header Column `` - -### Fields -```html - -``` -### Special Fields - -- __sequence - ```html - - ``` - -- __checkbox - ```html - - ``` - -- __component - ```html - - ``` - -- __slot - ```html - - ``` - -## Table Column `` - -### Fields -```html - -``` - -### Special Fields - -- __sequence - ```html - - ``` - -- __handle - ```html - - ``` - -- __checkbox - ```html - - ``` - -- __component - ```html - - ``` - -- __slot - ```html - - ``` - -## Detail Row - -```html - -``` - -## Other Elements - -### # loadingClass - -### # ascendingIcon - -### # descendingIcon - -### # handleIcon - -## Pagination - -```javascript -{ - wrapperClass: 'ui right floated pagination menu', - activeClass: 'active large', - disabledClass: 'disabled', - pageClass: 'item', - linkClass: 'icon item', - paginationClass: 'ui bottom attached segment grid', - paginationInfoClass: 'left floated left aligned six wide column', - dropdownClass: 'ui search dropdown', - icons: { - first: 'angle double left icon', - prev: 'left chevron icon', - next: 'right chevron icon', - last: 'angle double right icon', - } -} -``` - diff --git a/docs/Callbacks.md b/docs/Callbacks.md deleted file mode 100644 index e0de91e6..00000000 --- a/docs/Callbacks.md +++ /dev/null @@ -1,70 +0,0 @@ -# Callbacks - -In Vuetable, each field can have an associated callback function that will allow you to format the value of the column for display. - -> __Note__ -> The name `callback` might be changed to `format` in the near future to make it really reflect what it does. - -You can define the callback function inside the field definition using the `callback` option by specifying either the name of the function to be called or the function reference. - -Here is the example of a field defining a callback function. -```javascript -// specifying the name of the function as string -{ - name: 'gender', - callback: 'gender' -} - -// specifying the function reference. -// in this case, function `gender` must be defined in the `methods` section. -{ - name: 'gender', - callback: gender -} -``` - -In this case, the field named `gender` has a callback function, which is coincidently named `gender` as well. Vuetable will automatically look for this callback function in its parent Vue.js instance. - -The callbacks are defined inside the Vue.js instance where Vuetable component is defined. - -Let's look at the `gender` callback function. -```javascript -new Vue({ - el: '#app', - methods: { - gender: function(value) { - return value == 'M' ? 'Male' : 'Female' - } - } -}) -``` - -Vuetable will automatically pass the value of that field to the callback function. The callback function can then work on the value, and the value returned from the callback will be used to display to the user. - -In this case, if the `value` that gets passed to `gender` callback is `M`, it will return `Male`. Vuetable will display `Male` for this field instead of `M`. - -#### Passing Additional Parameters to Callback function -Suppose you have a callback function to format the date value to be displayed in certain date format, but you also would like to be able to override that default date format as well. You can do so like this: -```javascript -new Vue({ - el: '#app', - columns: [ - { - name: 'birthdate', - callback: 'formatDate|D/MM/Y' - } - ], - methods: { - formatDate: function(value, fmt) { - if (value == null) return '' - fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt - return moment(value, 'YYYY-MM-DD').format(fmt) - } - } -}) -``` - -In this example, field `birthdate` has a callback named `formatDate`. The callback defines additional parameter using `|` character following the name of the callback function. - -When the `formatDate` callback is called the `value` of the field will be passed as well as the additional parameters. So, the callback function can use that additional parameters to decide what the return value should be based on those additional parameters. - diff --git a/docs/Data-Format-JSON.md b/docs/Data-Format-JSON.md deleted file mode 100644 index 3f57d15d..00000000 --- a/docs/Data-Format-JSON.md +++ /dev/null @@ -1,104 +0,0 @@ -# Data Format (JSON) - -In order for Vuetable to do its task, it needs to work with a certain JSON data structure. Here is the default data format that Vuetable expects: - -```json -{ - "links": { - "pagination": { - "total": 50, - "per_page": 15, - "current_page": 1, - "last_page": 4, - "next_page_url": "...", - "prev_page_url": "...", - "from": 1, - "to": 15, - } - }, - "data": [ - { - "id": 1, - "name": "xxxxxxxxx", - "nickname": "xxxxxxx", - "email": "xxx@xxx.xxx", - "birthdate": "xxxx-xx-xx", - "gender": "X", - "group_id": 1, - }, - . - . - . - { - "id": 50, - "name": "xxxxxxxxx", - "nickname": "xxxxxxx", - "email": "xxx@xxx.xxx", - "birthdate": "xxxx-xx-xx", - "gender": "X", - "group_id": 3, - } - ] -} -``` - -Mostly, it looks for two pieces of information; the array of data, the pagination information. - -It uses two keys (`data-path` and `pagination-path`) to look into those data to extract the information it is needed. - -- `data-path` points to the array of data -- `pagination-path` points to the pagination information - -In the example above, the `data-path` is `data` and the `pagination-path` is `links.pagination`, which are the default value that Vuetable uses if none is provided. - -If you're familiar with [Laravel](https://laravel.com), you would know that Laravel automatically convert the query data to JSON format when Eloquent objects are returned from application's routes or controllers. And if you use `paginate()` function, the result would look something like this. - -```json -{ - "total": 50, - "per_page": 15, - "current_page": 1, - "last_page": 4, - "next_page_url": "...", - "prev_page_url": "...", - "from": 1, - "to": 15, - "data": [ - { - "id": 1, - "name": "xxxxxxxxx", - "nickname": "xxxxxxx", - "email": "xxx@xxx.xxx", - "birthdate": "xxxx-xx-xx", - "gender": "X", - "group_id": 1, - }, - . - . - . - { - "id": 50, - "name": "xxxxxxxxx", - "nickname": "xxxxxxx", - "email": "xxx@xxx.xxx", - "birthdate": "xxxx-xx-xx", - "gender": "X", - "group_id": 3, - } - ] -} -``` - -In this case, you just specify values for `data-path` and `pagination-path` like so -```html -
- -
-``` - -This tells Vuetable that the data is in the path named `data` inside the JSON structure returned from the server, and the pagination information is in the root of the JSON structure. diff --git a/docs/Data-Transformation.md b/docs/Data-Transformation.md deleted file mode 100644 index 8046cc4d..00000000 --- a/docs/Data-Transformation.md +++ /dev/null @@ -1,50 +0,0 @@ -# Data Transformation - -If the data you're working with is not in the default format that Vuetable uses, you can setup a `transform()` method, which accept response `data` as the argument, to transform it to the format that vuetable can work with. - -To setup the data transformation function, just create a `transform` method in the parent instance of Vuetable like so, - -```javascript -new Vue({ - el: '#app', - data: { - //... - }, - methods: { - transform: function(data) { - var transformed = {} - - transformed.pagination = { - total: data.total, - per_page: data.per_page, - current_page: data.current_page, - last_page: data.last_page, - next_page_url: data.next_page_url, - prev_page_url: data.prev_page_url, - from: data.from, - to: data.to - } - - transformed.mydata = [] - - for (var i=0; i < data.length; i++) { - transformed.mydata.push({ - id: data[i].id, - fullname: data[i].name, - email: data[i].email - }) - } - return transformed - } - } -}) -``` - -```html - -``` diff --git a/docs/Detail-Row.md b/docs/Detail-Row.md deleted file mode 100644 index 05440c7e..00000000 --- a/docs/Detail-Row.md +++ /dev/null @@ -1,51 +0,0 @@ -# Detail Row - -Detail row is the additional row hidden underneath each data row in the table. When you want to only display relevant data for each row, but also would like to display additional information when needed, Detail Row would be a great help. - -In order to use Detail row, you will need to create a component and register it using `Vue.component` helper. Then, you can use `detail-row-component` property to specify the name of your detail row component. - -Your detail row component should define the following two properties: -- `row-data` -- the current row data will be passed to -- `row-index` -- the current row index will be passed to - -Example: -```javascript -//.. -props: { - rowData: { - type: Object, - required: true - }, - rowIndex: { - type: Number - }, -} -``` - -## How Vuetable track the state of each Detail Row - -Each detail row can be shown or hidden independently. So Vuetable needs a way to track the state of each detail row to update the UI accordingly. - -In order to do this, it is required that each data row must be uniquely identifiable. If your data contains an `id` column (which can uniquely identify each row), then you don't have to do anything else. Because, by default, Vuetable uses the `id` as the default one. See [Row Identifier](Row Identifier) for more detail. - -But if your data use (or has) different column name that can uniquely identify each row, you can specify that in the `track-by` property. - -For example, your data uses `uuid` instead of `id` column, you can tell Vuetable to use it. -```html - -``` - -There are a number of methods that you can use to manipulate the detail row. Each of them requires a [row identifier](Row-Identifier) as an only parameter. -- isVisibleDetailRow -- showDetailRow -- hideDetailRow -- toggleDetailRow - -To call those methods, you can use `ref` tag, like so, -```javascript -this.$refs.vuetable.toggleDetailRow(rowId) -``` diff --git a/docs/FAQ.md b/docs/FAQ.md deleted file mode 100644 index f8b447bf..00000000 --- a/docs/FAQ.md +++ /dev/null @@ -1,7 +0,0 @@ -## FAQ -- [Background](Background) -- API mode vs. Data mode -- Why my data does not show up? -- Why the pagination does not show anything? -- How to specify column width? -- Can Vuetable do the data grouping? diff --git a/docs/Fields-Definition.md b/docs/Fields-Definition.md deleted file mode 100644 index 2eb90250..00000000 --- a/docs/Fields-Definition.md +++ /dev/null @@ -1,173 +0,0 @@ -Fields can be defined as simpl array of string, array of object, or the mix. - -- Fields defined as simple array - - ```javascript - let columns = ['name', 'email', 'birthdate', 'gender'] - ``` - -- Fields defined as array of object - ```javascript - let columns = [ - { - name: 'name', - sortField: 'name' - }, - { - name: 'email', - title: 'Email Address' - }, - { - name: 'birthdate', - sortField: 'birthdate', - titleClass: 'center aligned', - dataClass: 'center aligned', - callback: 'formatDate|D/MM/Y' - }, - { - name: 'gender', - sortField: 'gender', - titleClass: 'center aligned', - dataClass: 'center aligned', - callback: 'gender' - }, - ] - ``` - -- Fields defined as array of the mix - ```javascript - let columns = [ - 'name', - 'email', - { - name: 'birthdate', - sortField: 'birthdate', - titleClass: 'center aligned', - dataClass: 'center aligned', - callback: 'formatDate|D/MM/Y' - }, - { - name: 'gender', - sortField: 'gender', - titleClass: 'center aligned', - dataClass: 'center aligned', - callback: 'gender' - }, - //... - ] - ``` - - The difference is that if you defined a field as simple array of string. Vuetable will only display it as-is - without any sorting or formatting options. Vuetable will convert the simple field definition - to field object with only `name` property. - - ```javascript - let columns = ['name'] - // will be converted to this - // let columns = [ { name: 'name' } ] - ``` - -## Field options -### # name - -Name of the data field to be display. - -### # sortField - -Usually, it will be the same as `name` option. But you can specify different value if -you use different field name when querying data on the serve side, e.g. firstname. - -If specified, the field will be marked as sortable. `vuetable` will display appropriate -clickable icon after the field title. `vuetable` will also make a new request to the server -with the `sort=` query string appended. - -### # title - -If you would like to specify the title yourself, you can put it in here. Otherwise, `vuetable` -will use the `name` option instead. - -You can even put the icon class in the title, see example below -```javascript -//.. example using Semantic UI icon class -{ - name: 'birthdate', - title: ' Birthdate' -} -// -``` - -_New feature (after v1.6.5)_ -You can also define `title` as a function that returns a string. Vuetable will use that returned string to render the title of the column. -```javascript -//.. example using Semantic UI icon class -{ - name: 'birthdate', - title: () => ' Birthdate' -} -// -``` - -This allow total flexibility and make it possible to make use of external i18n library. - -### # titleClass - -The css class you would like to apply for the title of this field. - -### # dataClass - -The css class you would like to apply for the data of this field. - -### # callback - -The name of the callback function to be called to allow formatting of the value -to be displayed. See [Callback](Callbacks) section for more info. - -### # visible - -Whether this field should be visible or hidden when rendering the table. - -## Nested JSON Data -If the JSON data structure contains nested objects, eg: -```json -{ - "links": { - "pagination": { - "per_page": 15, - } - }, - "data": [ - { - "id": 1, - "name": "xxxxxxxxx", - "email": "xxx@xxx.xxx", - "group_id": 1, - "address" { - "street_address":"123 abc place", - "city":"townsville", - "province":"Harbor", - "country":"Antegria" - } - } - . - . - . - { - "id": 50, - "name": "xxxxxxxxx", - "email": "xxx@xxx.xxx", - "group_id": 3, - "address" { - "street_address":"456 xyz street", - "city":"cityville", - "province":"Portia", - "country":"Norland" - } - } - ] -} -``` -In this case, the column names of nested objects can be specified in the following format: - -```javascript -let columns = ['name', 'email', 'address.city', 'address.country'] -``` diff --git a/docs/Filtering.md b/docs/Filtering.md deleted file mode 100644 index e69de29b..00000000 diff --git a/docs/Home.md b/docs/Home.md deleted file mode 100644 index 56d58539..00000000 --- a/docs/Home.md +++ /dev/null @@ -1,38 +0,0 @@ -## Vuetable-2 : datatable simplify! - -_Still A Work in Progress_ - -### Table of Contents - -### Vuetable -- [Fields Definition](Fields-Definition) -- [Callback / Formatter](Callbacks) -- [Special Fields](Special-Fields) -- [Row Identifier](Row-Identifier) -- [Data Format (JSON)](Data-Format-(JSON)) -- [Sorting](Sorting) -- [Overriding Default Query String](Overriding-Default-Query-String) -- [Data Transformation](Data-Transformation) -- [Pagination](Pagination) -- [Detail Row](Detail-Row) -- [CSS Styling](CSS-Styling) -- [Tutorial](https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/README.md) -- [FAQ](FAQ) - -### Components API -- Vuetable - + [Properties](Vuetable-Properties) - + [Computed properties](Vuetable-Computed) - + [Data](Vuetable-Data) - + [Methods](Vuetable-Methods) - + [Events](Vuetable-Events) - -- [VuetablePagination](VuetablePagination) - -- [VuetablePaginationMixin](VuetablePaginationMixin) - -- [VuetablePaginationDropdown](VuetablePaginationDropdown) - -- [VuetablePaginationInfo](VuetablePaginationInfo) - -- [VuetablePaginationInfoMixin](VuetablePaginationInfoMixin) diff --git a/docs/Overriding-Default-Query-String.md b/docs/Overriding-Default-Query-String.md deleted file mode 100644 index 684ae935..00000000 --- a/docs/Overriding-Default-Query-String.md +++ /dev/null @@ -1,27 +0,0 @@ -# Overriding Default Query String - -By default, Vuetable uses the following key in the query string that will be sent to the server. -- `sort` -- its value will contain the requested sort order -- `page` -- its value will contain the requested page number -- `per_page` -- its value will contain the requested records per page - -If you're making your own API backend, you can just use this default. - -But if you're using someone's else API or you already have your own existing API that do not correspond to this. You can just tell Vuetable how what key it should be using instead by supplying it via `query-params` property. - -Here is the default value of `query-params` property. -```javascript -{ - sort: 'sort', - page: 'page', - perPage: 'per_page' -} -``` - -Suppose your API uses `sort_order`, `page_no`, and `page_size`, you can easily tell Vuetable to use them like so, -```html - -``` diff --git a/docs/Pagination.md b/docs/Pagination.md deleted file mode 100644 index c9bf1187..00000000 --- a/docs/Pagination.md +++ /dev/null @@ -1,25 +0,0 @@ -# Pagination - -Vuetable comes ready with two pagination components and a pagination information component which you can extend to easily build your own. -- [VuetablePagination](VuetablePagination) -- [VuetablePaginationDropdown](VuetablePaginationDropDown) -- [VuetablePaginationInfo](VuetablePaginationInfo) - -You can see the usage from the [lesson 7](https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/lesson-07.md) of the tutorial. - -## VuetablePagination - -This is a sliding pagination port from [Laravel](https://laravel.com). - -By default, it will render 5 sliding pages and navigation buttons for first page, previous page, next page, and last page. The number of sliding pages will also be even number with the current displayed page being in the center. - -The number of sliding pages can be configured via `on-each-side` prop and will be calculated using this formula. -``` -number of sliding pages = onEachSide * 2 +1 -``` - -## VuetablePaginationDropdown - -It was designed to take up less space as all the pages will be put inside a dropdown for the user to select and jump to the selected page. - -Vuetable provides a `VautablePaginationMixin` and `VuetablePaginationInfoMixin` to help creating custom pagination component an easy task. Please see the source code as it is very straight forward, but you will need some knowledge about Vue.js. diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index aaa13015..00000000 --- a/docs/README.md +++ /dev/null @@ -1,104 +0,0 @@ -[![npm](https://img.shields.io/npm/v/vuetable-2.svg)](https://www.npmjs.com/package/vuetable-2) -[![npm](https://img.shields.io/npm/l/vuetable-2.svg?maxAge=2592000)]() - -# Vuetable-2 - data table simplify! - -### Vuetable-2 works with Vue 2.x, vuetable is for Vue 1.x - -If you're looking for the version that's working with Vue 1.x, please go to [`vuetable`](https://github.com/ratiw/vue-table) repo. - ---- - -### Documentation and Tutorial - -Documentation is still under development, but you can view it at [https://ratiw.github.io/vuetable-2](https://ratiw.github.io/vuetable-2). Thanks to @cristijora for the help. - -Meanwhile, check out -- the [Tutorial](https://github.com/ratiw/vuetable-2-tutorial/wiki) -with follow-along project [here](https://github.com/ratiw/vuetable-2-tutorial). It should be enough to get you started. - -- [Sample project](https://github.com/ratiw/vuetable-2-with-laravel-5.4) using Vuetable-2 with Laravel 5.4 and Laravel-Mix - -If you've been using Vuetable for Vue 1.x before, checkout [what's changed](https://github.com/ratiw/vuetable-2/blob/master/changes.md) for info on changes from Vuetable for Vue 1.x and the [upgrade guide](https://github.com/ratiw/vuetable-2/blob/master/upgrade-guide.md) on how you could upgrade from Vuetable for Vue 1.x. - -You can now make use of Vue's scoped slot using the new `__slot` special field, thanks to @sjmarve. That means you are able to define action buttons per instance of a data table without depending on a globally defined component. - -Use scoped slot in parent when defining the actions [Vue Doc for scopped Slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) - -e.g. -```html - -``` - -the onClick function can now be defined in the parent and the parent has Access to rowData and rowIndex via props. :) - -The original functionality still works - -# Breaking Changes -## v1.6.0 -- The `icons` prop of VuetablePagination is now moved into the `css` prop object. See this [codepen](https://codepen.io/ratiw/pen/GmJayw). - -# Example Code -- Clone the project -- Go into the cloned directory -- `npm install` -- `npm run dev` -- Open browser to `http://localhost:8080` - -# Usage -## NPM - -```shell -npm install vuetable-2 --save-dev -``` - -## Javascript via CDN -Thanks to @cristijora for providing helps on this. -```html -// vuetable-2 dependencies - - -// vuetable-2 - -Vue.use(Vuetable) -``` -This is demonstrated in this [jsfiddle](http://jsfiddle.net/CristiJ/z11fe07p/1318/). - -The `.use` from above will register all the components globally. -```javascript -function install(Vue){ - Vue.component("vuetable", Vuetable); - Vue.component("vuetable-pagination", VueTablePaginationInfo); - Vue.component("vuetable-pagination-dropdown", VueTablePaginationDropDown); - Vue.component("vuetable-pagination-info", VueTablePaginationInfo); -} -``` - -Also you have the ability to access certain components if you need them: -```javascript -VueTable: VueTable.default/VueTable.VueTable, -VueTablePagination: VueTable.VueTablePagination, -VueTablePaginationInfo: VueTable.VueTablePaginationInfo, -VueTablePaginationDropdown: VueTable.VueTablePaginationDropdown -``` - - -# Contributions -Any contribution to the code (via pull request would be nice) or any part of the documentation and any idea and/or suggestion are very welcome. - -> __Note__ -> For any bug fix, the PR should be forked from the `master` branch. And for any suggestion or additional feature, the PR should be forked from the `develop` branch, where it can be integrated and rolled out in the next release. -> -> If you are not sure, please ask by openning a new issue. - -However, please do not feel bad if your pull requests or contributions do not get merged or implemented into Vuetable. - -Your contributions can, not only help make Vuetable better, but also push it away from what I intend to use it for. I just hope that you find it useful for your use or learn something useful from its source code. But remember, you can always fork it to make it work the way you want. - -# License -Vuetable is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT). diff --git a/docs/Row-Identifier.md b/docs/Row-Identifier.md deleted file mode 100644 index c85bbfbf..00000000 --- a/docs/Row-Identifier.md +++ /dev/null @@ -1,3 +0,0 @@ -Normally, this is the `id` column value of the data/table structure. It is used to uniquely identify a specific row of data in the dataset. - -If you data structure uses different column, you can use `track-by` prop to specify it. \ No newline at end of file diff --git a/docs/Sorting.md b/docs/Sorting.md deleted file mode 100644 index 573867cc..00000000 --- a/docs/Sorting.md +++ /dev/null @@ -1,86 +0,0 @@ -# Sorting - -> __Note__ -> This works in ApiMode only! - -If your API endpoint supports sorting, Vuetable can also automatically interact with it when you specify which column in the data is sortable. - -To specify that a particular column is sortable, you add `sortField` option to the field definition of that column. - -```javascript -{ - name: 'email', - sortField: 'email' -} -``` - -The sortable column will be rendered with `.sortable` CSS class in the `` and it will respond to the click to toggle between -- setting the column as sort order if it was not the current sort order. -- toggle between ascending and descending if it is the current sort order. - -What it does is Vuetable will send a new request to the server endpoint with `sort` parameter specifying which `sortOrder.field` and which `sortOrder.direction` it expects from the server. - -Here is the sample sort parameter in the query string. -```json - http://api.example.com/users?sort=email|asc -``` -where, `sort=email|asc` is the `sort` parameter constructed from the default sort order field `email` and the defualt sort direction `asc`. They are concatenated by a pipe character (`|`). - -If your API endpoint uses different construct, you can override this behavior by supplying your own function to construct the sort parameter. See below for more info. - -### Initial Sorting Order - -To provide initial sorting order, use `sort-order` prop to specify the default sorting column. - -```html - -``` -```javascript -new Vue({ - //... - data: { - //... - sortOrder: [ - { - field: 'email', - direction: 'asc' - } - ] - } -}) -``` - -### Multi-column Sorting - -Multi-column sorting can be enabled by setting `multi-sort` prop value to `true`. - -Once enabled, the user can use Alt+Click (Option+Click on mac) to work with multi-column sorting feature. If you would like to use other key than the `alt`, use `multi-sort-key` prop to specify one of the following value -- `alt` -- Alt / Option -- `ctrl` -- Ctrl / Control -- `meta` -- Window / Command -- `shift` -- Shift - -### Overriding the Sort Query String - -You can override how the sort parameter in the query string is constructed by defining a method named 'getSortParam()' in your main vue instance. - -When Vuetable needs to make a request to the server, it will first check if this method is existed in its parent. If so, it will call this method, passing `sortOrder` prop to it, and will use whatever returned from the method to build the `sort` query string to be sent to the server. - -```javascript -// If -// sortOrder = [ -// { field: "gender", direction: "desc"}, -// { field: "name", direction: "asc"}, -// ] -// This will return -// '-gender,name' -// -getSortParam: function(sortOrder) { - return sortOrder.map(function(sort) { - return (sort.direction === 'desc' ? '+' : '') + sort.field - }).join(',') -} -``` diff --git a/docs/Special-Fields.md b/docs/Special-Fields.md deleted file mode 100644 index 7b08369d..00000000 --- a/docs/Special-Fields.md +++ /dev/null @@ -1,137 +0,0 @@ -## Special Fields - -Special fields are predefined field for specific purpose and their names are always started with double underscore characters `__`. - -Vuetable currently have the following special fields -- [__sequence](#-__sequence) -- [__handle](#-__handle) -- [__checkbox](#-__checkbox) -- [__component](#-__component) -- [__slot](#-__slot) - -You can see the usage of these special fields in the [Vuetable-2 Tutorial - Using special fields](https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/lesson-11.md). - -#### # __sequence - -If you would like to display the sequence number of the records based on the pagination information, you can do that using __sequence special field. - -> __Note__ -> __sequence special field only work in API Mode (`:api-mode="true"`) as it -> requires pagination information to work correctly. - -The generated HTML output will be like this -```html - - ... - - - - ... - -``` - -#### # __handle - -This special field can be used to display CSS-class icon. - -This allow you to use external library like [Sortable.js]() with Vuetable. - -The generated HTML output will be like this -```html - - -``` - -The `css.handleIcon` can be overriden using `css` prop. - -See also: [`css`]() - -#### # __checkbox - -Events emitted -- `vuetable:checkbox-toggled` -- when the user check/uncheck the checkbox in each row -- `vuetable:checkbox-toggled-all` -- when the user check/uncheck the checkbox on the table header - -The `__checkbox` special field will display checkbox column for each row and also on the header row to allow select/unselect all functionality. - -In order for Vuetable to keep track of the checkbox state of each data row. By default, `__checkbox` will use `id` field as [row identifier]() as it usually unique for each row. That also means your data will have to have `id` column. - -But if you do not have `id` column in your data structure, or you want to use another available field that could also uniquely identify each data row, you can use `track-by` prop to specify it. - -For example, if you want to use `item_code` field as you row identifier, you can do so like this. -```html - -``` - -The row identifier of the selected row will be store in [`selectedTo`]() prop. If you `ref` to define reference as the above code, you can access it using using Vue's `refs` property. -```javascript -this.$refs.vuetable.selectedTo -``` - -The generated HTML output will be like this -```html - - ... - - - - -``` - -See also: -- [Row Identifier]() -- [`selectedTo` prop]() -- [`vuetable:checkbox-toggled` event]() -- [`vuetable:checkbox-toggled-all` event]() - -#### # __component:<name> - -The `__component` special field allow you to create a component to handle the display of the row data as you want. - -`` is the name of the component registered globally using `Vue.component` that will be used to handle the rendering of the column data. - -Vuetable will pass 3 props to the component -- `row-data` -- the data of the current row being rendered -- `row-index` -- the current row index -- `row-field` -- the current `sortField` in field definition - -You can see a sample use of `__component` special field in the [Vuetable-2 Tutorial -- Using special fields](https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/lesson-11.md) - -The generated HTML output will be like this -```html - - ... - -... - - ...component code.. - -``` - - -#### # __slot:<name> - -The `__slot` special field allows you to use Vue's scoped slot inside Vuetable. - -> [Scoped Slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) is availble in Vue 2.1.0 onward. Please make sure you use at least the specified version of Vue.js. - -Vuetable will pass 3 props to the slot -- `row-data` -- the data of the current row being rendered -- `row-index` -- the current row index -- `row-field` -- the current `sortField` in field definition - -You can see a sample use of `__slot` special field in the [Vuetable-2 Tutorial -- Using special fields](https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/lesson-11.md) - -The generated HTML output will be like this -```html - - ... - -... - - ... - -``` diff --git a/docs/Vuetable-Computed.md b/docs/Vuetable-Computed.md deleted file mode 100644 index 4b0b2d2e..00000000 --- a/docs/Vuetable-Computed.md +++ /dev/null @@ -1,60 +0,0 @@ -## Vuetable - Computed Properties - -- [blankRows](#-blankrows) -- [countTableData](#-counttabledata) -- [countVisibleFields](#-countvisiblefields) -- [displayEmptyDataRow](#-displayemptydatarow) -- [isApiMode](#-isapimode) -- [isDataMode](#-isdatamode) -- [lessThanMinRows](#-lessthanminrows) -- [useDetailRow](#-usedetailrow) - -### # countTableData -- return: _Number_ -- description - - Return the number of rows for the current data or zero (0) if the `tableData` is `null`. - -### # countVisibleFields -- return: _Number_ -- description - - Return the number of visible fields in the table by checking the field's `visible` option. - -### # displayEmptyDataRow -- return: _Boolean_ -- description - - Determine if Vuetable should display empty data row message. - -### # lessThanMinRows -- return: _Boolean_ -- description - - Determine if the number of data rows available is less than the number specified in `min-rows` prop. - -### # blankRows -- return: _Number_ -- description - - Return the number of blank rows that Vuetable needs to render. If the number of row data is greater than - or equal to `min-rows`, it returns 0. - -### # useDetailRow -- return: _Boolean_ -- description - - Determine if detail row should be rendered by inspecting the availability of the data and various properties. - -### # isApiMode -- return: _Boolean_ -- description - - Determine if Vuetable is currently in API mode. - -### # isDataMode -- return: _Boolean_ -- description - - Determine if Vuetable is currently in Data mode. - \ No newline at end of file diff --git a/docs/Vuetable-Data.md b/docs/Vuetable-Data.md deleted file mode 100644 index 348dcf7d..00000000 --- a/docs/Vuetable-Data.md +++ /dev/null @@ -1,61 +0,0 @@ -## Vuetable - Data - -- [eventPrefix](#-eventprefix) -- [tableFields](#-tablefields) -- [tableData](#-tabledata) -- [tablePagination](#-tablepagination) -- [currentPage](#-currentpage) -- [selectedTo](#-selectedto) -- [visibleDetailRows](#-visibledetailrows) - -### # eventPrefix -- type: _String_ -- default: `vuetable:` -- description - - The event prefix that Vuetable is going to use when emitting the event. - -### # tableFields -- type: _Array_ -- default: `[]` _(empty array)_ -- description - - The normalized version of fields definition. This is done during the `created` hook. - -### # tableData -- type: _Array_ -- default: `null` -- description - - In `api-mode`, this stores the data that returned from the server after the sucessful AJAX request. Otherwise, - it stores the data assigned to via `data` prop or `setData` method. Vuetable always use `tableData` for table - rendering. - -### # tablePagination -- type: _Object_ -- default: `null` -- description - - If the data returned from the server contains pagination information specified in the `pagination-path`, this is where it gets stored. - -### # currentPage -- type: _Number_ -- default: `1` -- description - - Vuetable use this to keep track of the current page being diplayed. - -### # selectedTo -- type: _Array_ -- default: `[]` _(empty array)_ -- description - - When `__checkbox` field option is used and the user selected/unselected any checkbox, its row indentifier is either stored in or remove from here. The row identifier can be specified using `track-by` option. - -### # visibleDetailRows -- type: _Array_ -- default: `[]` _(empty array)_ -- description - - This stores the row identifier of any row where its detail row is visible. - diff --git a/docs/Vuetable-Events.md b/docs/Vuetable-Events.md deleted file mode 100644 index e8707cba..00000000 --- a/docs/Vuetable-Events.md +++ /dev/null @@ -1,149 +0,0 @@ -## Vuetable - Events - -- [vuetable:initialized](#-vuetableinitialized) -- [vuetable:pagination-data](#-vuetablepagination-data) -- [vuetable:loading](#-vuetableloading) -- [vuetable:load-success](#-vuetableload-success) -- [vuetable:load-error](#-vuetableload-error) -- [vuetable:loaded](#-vuetableloaded) -- [vuetable:row-changed](#-vuetablerow-changed) -- [vuetable:row-clicked](#-vuetablerow-clicked) -- [vuetable:row-dblclicked](#-vuetablerow-dblclicked) -- [vuetable:cell-clicked](#-vuetablecell-clicked) -- [vuetable:cell-dblclicked](#-vuetablecell-dblclicked) -- [vuetable:cell-rightclicked](#-vuetablecell-rightclicked) -- [vuetable:detail-row-clicked](#-vuetabledetail-row-clicked) -- [vuetable:checkbox-toggled](#-vuetablecheckbox-toggled) -- [vuetable:checkbox-toggled-all](#-vuetablecheckbox-toggled-all) -- [vuetable:data-reset](#-vuetabledata-reset) - -### # vuetable:initialized -- payload: - - tableFields: _Array_ -- the normalized fields definition -- description - - This event will be fired after the fields definition have been normalized during the `created` lifecycle hook. - -### # vuetable:pagination-data -- payload: - - tablePagination: _Object_ -- pagination information -- description - - This event will be fired when the data has sucessfully been retrieved from the server and there is pagination information available. - -### # vuetable:loading -- payload: _none_ -- description - - This event will be fired before Vuetable starts to request the data from the server. This is useful for triggering the display of loading image. - -### # vuetable:load-success -- payload: - - response: _Object_ -- the response returned from the server -- description - - This event will be fired when the data was successfully loaded from the server. - -### # vuetable:load-error -- payload: - - response: _Object_ -- the response returned from the server -- description - - This event will be fired when up the data cannot be retrieved from the server or the server responses with an error. - -### # vuetable:loaded -- payload: _none_ -- description - - This event will be fired after Vuetable got response back from the server. This event does not indicate whether the request was successful or failed. It just indicates that the request is finished and it got the response back. - - This is useful for ending/hiding the loading image. - -### # vuetable:row-changed -- payload: - - dataItem: _Object_ -- the current data item -- description - - This event will be fired when Vuetable loops through the data during table row rendering. This will be useful if you want to do some processing with the data, e.g. summing up the values. - - > __Important!__ - > Please note that you MUST NOT change the pass-in data item or try to update any instance data during this event, or it will cause "indefinite update loop". The only way to work inside this event is to use the variable define outside of Vue.js instance - - -### # vuetable:row-clicked -- payload: - - dataItem: _Object_ -- the current data item - - event: _Event_ -- the MouseObject event -- description - - This event will be fired when the user clicked on any column in the row. You can use the pass-in event object to target the DOM element that you want to manipulate. The pass-in data item argument is the actual data that Vuetable received from the server and it is reactived. Which means if you changed its value, the data displayed in the table will also be changed. - - > Changing the pass-in data in this event will not cause "indefinite update loop" However, the change only affects the current displaying data. It does not change anything on the server side. - -### # vuetable:row-dblclicked -- payload: - - dataItem: _Object_ -- the current data item - - event: _Event_ -- the MouseObject event -- description - - This event will be fired when the user "double-clicked" on any column in the row. You can use the pass-in event object to target the DOM element that you want to manipulate. The pass-in data item argument is the actual data that Vuetable received from the server and it is reactived. Which means if you changed its value, the data displayed in the table will also be changed. - - > Changing the pass-in data in this event will not cause "indefinite update loop" However, the change only affects the current displaying data. It does not change anything on the server side. - -### # vuetable:cell-rightclicked -- payload: - - dataItem: _Object_ -- the current data item - - field: _Object_ -- the field object that causes this event - - event: _Event_ -- the MouseObject event -- description - - This event will be fired when a cell in the table body has been right-clicked. - -### # vuetable:cell-clicked -- payload: - - dataItem: _Object_ -- the current data item - - field: _Object_ -- the field object that causes this event - - event: _Event_ -- the MouseObject event -- description - - This event will be fired when a cell in the tabel body has been clicked. - - - -### # vuetable:cell-dblclicked -- payload: - - dataItem: _Object_ -- the current data item - - field: _Object_ -- the field object that causes this event - - event: _Event_ -- the MouseObject event -- description - - This event will be fired when a cell in the table body has been double-clicked. - -### # vuetable:detail-row-clicked -- payload: - - dataItem: _Object_ -- the current data item - - event: _Event_ -- the MouseObject event -- description - - This event will be fired when an area of detail row has been clicked. - -### # vuetable:checkbox-toggled -- payload: - - isChecked: _Boolean_ -- the state of the checkbox - - dataItem: _Object_ -- the current data item -- description - - This event will be fired whenever the checkbox has been toggled. - -### # vuetable:checkbox-toggled-all -- payload: - - isChecked: _Boolean_ -- the state of the checkbox -- description - - This event will be fired when the select-all checkbox has been toggled. - -### # vuetable:data-reset -- payload: _none_ -- description - - This event will be fired as a result from calling `resetData` method to clear in `tableData` and `tablePagination`. diff --git a/docs/Vuetable-Methods.md b/docs/Vuetable-Methods.md deleted file mode 100644 index 61c7f145..00000000 --- a/docs/Vuetable-Methods.md +++ /dev/null @@ -1,174 +0,0 @@ -## Vuetable - Methods - -### fields related -- [normalizeFields](#-normalizeFields) -- [showField](#-showfield) -- [hideField](#-hidefield) -- [toggleField](#-togglefield) - -### data related -- [setData](#-setdata) -- [reload](#-reload) -- [refresh](#-refresh) -- [resetData](#-resetdata) -- [transform](#-transform) - -### pagination related -- [gotoPreviousPage](#-gotopreviouspage) -- [gotoNextPage](#-gotonextpage) -- [gotoPage](#-gotopage) -- [changePage](#-changepage) - -### detail row related -- [isVisibleDetailRow](#-isvisibledetailrow) -- [showDetailRow](#-showdetailrow) -- [hideDetailRow](#-hidedetailrow) -- [toggleDetailRow](#-toggledetailrow) - -### # normalizeFields -- params: _none_ -- description - - Parse `fields` definition to field objects usable by Vuetable. This method is called automatically "once" during - the `created` life cycle hook. - - If you dynamically change the `fields` prop, you will need to manually call `normalizeFields` method to properly - parse the `fields` definition as Vuetable will not be able to pickup the change and will not work as expected. - -### # setData -- params: - - data: _Array_ | _Object_ -- description - - You can use this method to manually set the data that Vuetable will be used for table rendering instead of requesting data from the server. - - If the `data` parameter is of type Array, Vuetable will use those array as the data to render the table. - - If the `data` parameter is of type Object, it must be conform to the [Data Structure](#) that Vuetable expects (e.g. contains both data and pagination information). - - > __Note__ - > The method will automatically set `api-mode` to `false`. - -### # reload -- params: _none_ -- description - - Force Vuetable to reload the data from the server using the current value of parameters. However, the page number will not be reset. - -### # refresh -- params: _none_ -- description - - Force Vuetable to reload the data from the server and the page number will be reset to 1. It's the same as using goto-page page event to load page 1. - -### # resetData -- params: _none_ -- description - - This will set `tableData` and `tablePagination` to `null` resulting in not displaying any data in the table (as there is no data to display). This method will also fire `vuetable:data-reset` event which can be captured to force update pagination component accordingly. - -### # transform -- params: - - data: _Array_ -- must return: _Array_ -- description - - In case, the data returned from the server is not in the format that Vuetable expected, you can define `transform` method on the main Vue instance - and Vuetable will automatically called it with the data from the server. - - The `transform` method must return the array of data that Vuetable expected. - - See also: Data Format (JSON) - -### # gotoPreviousPage -- params: _none_ -- description - - __** API Mode Only **__ - - This method will automatically request the previous page of data from the server. - -### # gotoNextPage -- params: _none_ -- description - - __** API Mode Only **__ - - This method will automatically request the next page of data from the server. - -### # gotoPage -- params: - - page: _Number_ -- description - - __** API Mode Only **__ - - This method will automatically request the specified page of data from the server. - -### # changePage -- params: - - page: _String_, _Number_ -- description - - __** API Mode Only **__ - - This method will automatically request the specified page of data from the server. You can either pass in the page number, or 'prev' string for previous page, or 'next' string for next page. - -### # isVisibleDetailRow -- params: - - rowId: _RowIdentifier_ -- description - - Determine if the detail row of the given row identifier is marked as visible. - - See also: [Row Identifier](Row-Identifier) - -### # showDetailRow -- params: - - rowId: _RowIdentifier_ -- description - - Force displaying the detail row of the given row. - - See also: [Row Identifier](Row-Identifier) - -### # hideDetailRow -- params: - - rowId: _RowIdentifier_ -- description - - Force hiding the detail row of the given row. - - See also: [Row Identifier](Row-Identifier) - -### # toggleDetailRow -- params: - - rowId: _RowIdentifier_ -- description - - Toggle the display of the detail row of the given row. - - See also: [Row Identifier](Row-Identifier) - -### # showField -- params: - - index: _Number_ -- description - - Force displaying the specified field. - -### # hideField -- params: - - index: _Number_ -- description - - Force hiding the specified field. - -### # toggleField -- params: - - index: _Number_ -- description - - Toggle display of the specified field. - - diff --git a/docs/Vuetable-Properties.md b/docs/Vuetable-Properties.md deleted file mode 100644 index c2f40e8d..00000000 --- a/docs/Vuetable-Properties.md +++ /dev/null @@ -1,376 +0,0 @@ -## Vuetable - Properties - -- [append-params](#-append-params) -- [api-mode](#-api-mode) -- [api-url](#-api-url) -- [css](#-css) -- [data](#-data) -- data-manager -- [data-path](#-data-path) -- data-total -- [detail-row-component](#-detail-row-component) -- [detail-row-transition](#-detail-row-transition) -- [fields](#-fields) -- [http-fetch](#-http-fetch) -- [http-options](#-http-options) -- [http-method](#-http-method) -- [initial-page](#-initial-page) -- [load-on-start](#-load-on-start) -- [min-rows](#-min-rows) -- [multi-sort](#-multi-sort) -- [multi-sort-key](#-multi-sort-key) -- [no-data-template](#-no-data-template) -- [pagination-path](#-pagination-path) -- [per-page](#-per-page) -- [query-params](#-query-params) -- [reactive-api-url](#-reactive-api-url) -- [render-icon](#-render-icon) -- [row-class](#-row-class) -- [sort-order](#-sort-order) -- [track-by](#-track-by) - -### # api-mode -- type: _Boolean_ -- default: `true` -- description - - By default, Vuetable will load the data from and send the request to the API endpoint specified in `api-url`. If you prefer to - supply your own data instead of automatically requesting the data from server, you have to set `api-mode` to `false`. Then, pass - the data via `data` prop. - - Please note that disabling `api-mode` (by setting it to `false`) will also **disable** pagination, sorting, and filtering functions. - - > __Note__ - > Setting `api-mode` to `false` is not recommended. It will not scale well when you have to handle a large dataset - > yourself instead of letting database manager handles it for you. - -### # api-url -- works in `api-mode` only -- type: _String_ -- default: `''` _(empty string)_ -- description - - The URL of the api endpoint that Vuetable will interact with. If the API supports sorting, filtering, pagination of the data, - Vuetable can automatically append appropriate information to the server via query string. - -### # reactive-api-url -- works in `api-mode` only -- type: _Boolean_ -- default: `true` -- description - - Tells Vuetable whether it should watch for the change in `api-url` prop and refresh the data automatically. - -### # fields -- type: _Array_ -- default: _none_ -- required: _true_ -- description - - Array of field definition that Vuetable will be used to map to the data structure in order to render the table for presentation. - -### # data -- type: _Array_ | _Object_ -- default: `null` -- description - - The data that Vuetable will be used to render the table when `api-mode` is set to `false`. - - __New in v1.7__ - You can utilize the pagination functionality of Vuetable if the `data` you supplied is an object that has data structure as described in [Data Format](https://github.com/ratiw/vuetable-2/wiki/Data-Format-(JSON)). - - > __Note__ - > The prop only works when `api-mode` is `false`. - -### # data-manager (v1.7) -- type: _Function_ -- default: `null` -- description - - [TODO] - - > __Note__ - > The prop only works when `api-mode` is `false`. - -### # data-path -- works in `api-mode` only -- type: _String_ -- default: `data` -- description - - The path inside the data structure that actually contains the data. If the data is at the root of the structure, set - this prop to empty string, e.g. `data-path=""`. - -### # data-total (v1.7) -- type: _Number_ -- default: -- description - - [TODO] - - > __Note__ - > The prop only works when `api-mode` is `false`. - -### # pagination-path -- works in `api-mode` only -- type: _String_ -- default: `links.pagination` -- description - - The pagination path inside the data structure that contains the pagination information. If the your data from the server - does not have pagination information, you should set the prop to empty string, e.g. `pagination-path=""`, to suppress - Vuetable warning. - -### # load-on-start -- works in `api-mode` only -- type: _Boolean_ -- default: `true` -- required: _true_ -- description - - Whether Vuetable should immediately load the data from the server. - -### # append-params -- works in `api-mode` only -- type: _Object_ -- default: `{}` _(empty object)_ -- description - - Additional parameters that Vuetable should append to the query string when requesting data from the server. - - See also: [Appending Other Parameters to the Query String](#) - -### # query-params -- works in `api-mode` only -- type: _Object_ -- default: - ``` - { - sort: 'sort', - page: 'page', - perPage: 'per_page' - } - ``` -- description - - The text to be used as keys in query string that will be sent to the server. If your API endpoint uses different keys, you can - specified them via this prop. - - See also: [Sorting, Paging, and Page Sizing of Data](#) - -### # http-fetch (v1.7) -- works in `api-mode` only -- type: _Function_ -- default: `null` -- description: - - Allow specifying external http request function to fetch the data via AJAX. If `null`, Vuetable will fallback to using `axios` internally. - - If specified, Vuetable will call the given function passing `apiUrl` and already constructed `httpOptions` to the function. - - Vuetable would expect the given function to make an AJAX call to the `apiUrl` with the `httpOptions` and return a [_Promise_](https://developer.mozilla.org/th/docs/Web/JavaScript/Reference/Global_Objects/Promise). Vuetable would then handle the success or failure of the AJAX call after the Promise has been resolved. - - See `loadData` and `fetch` methods in `Vuetable.vue` source code if you're confused. - - Here's an example using `vue-resource` - ```javascript - //... - myFetch(apiUrl, httpOptions) { - return Vue.$http.get(apiUrl, httpOptions) - }, - //... - ``` - -### # http-options -- works in `api-mode` only -- type: _Object_ -- default: `{}` _(empty object)_ -- description - - Allow passing additional options to the server during AJAX call. Internally, Vuetable uses [`axios`](https://github.com/mzabriskie/axios) - to handle AJAX request. - -### # http-method -- works in `api-mode` only -- type: _String_ -- default: `get` -- description - - Only support `get` or `post` method. Please note that it must be the __lowercase__ string. - -### # track-by -- type: _String_ -- default: `id` -- description - - The key that uses to unqiuely identified each row in the data array to help track the state of detail row and checkbox - features of Vuetable. This is necessary for the detail row and checkbox features to function correctly. - - For detail row feature, whenever the user click to expand the detail row, Vuetable will insert the `id` of that row into - its internal array (`visibleDetailRows`). And when that detail row is hidden, the `id` of that detail row is removed from - the array. - - For checkbox feature, when the user select (checked) a row, Vuetable will insert the `id` of the row into its internal - array (`selectedTo`). And when that row is unselected (unchecked), the `id` of that row is removed from the array. - - See also: [`visibleDetailRows`](#), and [`selectedTo`](#) - -### # show-sort-icons -- type: _Boolean_ -- default: `true` -- description - - Tells Vuetable whether or not icons should be added to `th` elements whenever a given column is used to sort. - -### # sort-order -- works in `api-mode` only -- type: _Array_ -- default: `[]` _(empty array)_ -- description - - The default sort order that Vuetable should use when requesting the data from server. - -### # multi-sort -- works in `api-mode` only -- type: _Boolean_ -- default: `false` -- description - - Enable multiple sort columns interaction. - -### # multi-sort-key -- works in `api-mode` only -- type: _String_ -- default: `alt` -- possible values: `alt`, `ctrl`, `shift`, `meta` -- description - - The key to trigger sort colum adding/subtracting when multi-sort is enabled. - -### # per-page -- works in `api-mode` only -- type: _Number_ -- default: `10` -- description - - The number of data to be requested per page. - -### # initial-page (since v1.7) -- works in `api-mode` only -- type: _Number_ -- default: `1` -- description - - The initial page number of data to be requested on the first time. - -### # css -- type: _Object_ -- default: - ``` - { - tableClass: 'ui blue selectable celled stackable attached table', - loadingClass: 'loading', - ascendingIcon: 'blue chevron up icon', - descendingIcon: 'blue chevron down icon', - detailRowClass: 'vuetable-detail-row', - handleIcon: 'grey sidebar icon', - sortableIcon: '' // since v1.7 - } - ``` -- description - - This is where you should override the CSS classes that Vuetable uses to render HTML table that should help you style the table - to your needs. - - See also: [CSS Styling](#) - -### # render-icon -- type: _Function_ -- default: `null` -- description - - By default, Vuetable uses `` tag to render icon according to Semantic UI CSS. But you can override this by providing your own icon rendering callback function via this `render-icon` property. - - The following icon rendering in Vuetable will use this provided callback instead of the default one if provided. - - sort icon on the table header `` - - handle icon of the table column `` - - The callback will receive two parameters. - 1) the array of CSS `classes` - 2) the optional string `options` expected to be appended to the tag - - See example below: - ```vue - - ``` - ```javascript - //... - methods: { - renderBootstrapIcon (classes, options) { - return `` - } - } - ``` - -### # min-rows -- type: _Number_ -- default: `0` -- description - - The minimum number of rows that should be displayed when rendering the table. - - If the number of row available is less than the number specified in `min-rows` prop, Vuetable will render empty table rows to - satisfy that minimum rows. - - > __Note__ - > The prop only works when `api-mode` is `false`. - -### # row-class -- type: _String_, _Function_ -- default: `''` _(empty string)_ -- description - - The CSS class name that will be applied to each table row. - - If `row-class` prop refers to a method, Vuetable will automatically call the given method on each row, passing the row data and row index to it. Vuetable will then use the returned string from the given method as CSS class for that row. - - Here is the example on using a method to return the row class for styling. - ```vue - - - ``` - -### # detail-row-component -- type: _String_ -- default: `''` _(empty string)_ -- description - - A component name to be used as the content of detail row to be displayed underneath the current row. - -### # detail-row-transition -- type: _String_ -- default: `''` _(empty string)_ -- description - - The CSS class to apply to detail row during transition. - -### # no-data-template -- type: _String_ -- default: `''` _(empty string)_ -- description - - Template when there are no records in the table. Inserted into table cell `td` diff --git a/docs/VuetablePagination.md b/docs/VuetablePagination.md deleted file mode 100644 index 11f8ccb5..00000000 --- a/docs/VuetablePagination.md +++ /dev/null @@ -1,9 +0,0 @@ -## VuetablePagination - -This component contains only the template and utilizes what are available in `VuetablePaginationMixin`. - -You can use this component as a guide to create your own pagination component without having to implement additional properties or methods. If needed, you can always add properties and/or methods like `VuetablePaginationDropdown` did. - -### Uses -- [VuetablePaginationMixin](VuetablePaginationMixin) - diff --git a/docs/VuetablePaginationDropdown.md b/docs/VuetablePaginationDropdown.md deleted file mode 100644 index 4f664a8b..00000000 --- a/docs/VuetablePaginationDropdown.md +++ /dev/null @@ -1,31 +0,0 @@ -## VuetablePaginationDropdown - -`VuetablePaginationDropdown` uses `VuetablePaginationMixin`, so all properties, computed properties, methods, and events in `VuetablePaginationMixin` are also available in this class. - -### Uses -- [VuetablePaginationMixin](VuetablePaginationMixin) - -### Properties -#### # page-text -- type: _String_ -- default: `Page` -- description - - The text to be displayed in the select page dropdown. - -### Methods -No additional methods - -### Events - -#### # vuetable-pagination:change-page -- See [VuetablePaginationMixin](VuetablePaginationMixin#-vuetable-paginationchange-page) - -#### # vuetable-pagination:pagination-data -- type: _listen_ -- params: - - tablePagination: _Object_ -- pagination information -- description: - - This event will have pagination information in its payload that will be used for rendering of pagination component. - \ No newline at end of file diff --git a/docs/VuetablePaginationInfo.md b/docs/VuetablePaginationInfo.md deleted file mode 100644 index 4a1f1e49..00000000 --- a/docs/VuetablePaginationInfo.md +++ /dev/null @@ -1,25 +0,0 @@ -## VuetablePaginationInfo - Properties - -### Uses -- [VuetablePaginationInfoMixin](VuetablePaginationInfoMixin) - -### Properties - -_None_ - -### Computed - -_None_ - -### Data - -_None_ - -### Methods - -_None_ - -### Events - -_None_ - diff --git a/docs/VuetablePaginationInfoMixin.md b/docs/VuetablePaginationInfoMixin.md deleted file mode 100644 index 72479a88..00000000 --- a/docs/VuetablePaginationInfoMixin.md +++ /dev/null @@ -1,69 +0,0 @@ -## VuetablePaginationInfoMixin - -### Properties - -#### # css -- type: _Object_ -- default: - ``` - { - infoClass: 'left floated left aligned six wide column' - } - ``` -- description: - - The `css` property holds most of the CSS classes that VuetablePaginationInfo uses in its template. - -#### # info-template -- type: _String_ -- default: `Displaying {from} to {to} of {total} items` -- description: - - The template string to be used to display the pagination information. - - Available placeholders - - {from} the starting record number displayed - - {to} the ending record number displayed - - {total} the total number of records available - -#### # no-data-template -- type: _Object_ -- default: `No relevant data` -- description: - - The template string to be showned when there is no data to display. - -### Data - -#### # tablePagination -- type: _Object_ -- default: `null` - - The pagination information received from Vuetable. - -### Computed - -#### # paginationInfo -- params: _none_ -- return: _String_ - - The actual pagination information to be displayed after replacing all the placeholders with corresponding values. - -### Methods - -#### # setPaginationData -- params: - - tablePagination: _Object_ -- pagination information -- description - - Setting the `tablePagination` data to be used when rendering pagination component. - -#### # resetData -- params: _none_ -- description - - This method will set `tablePagination` to null. - -### Events - -_None_ diff --git a/docs/VuetablePaginationMixin.md b/docs/VuetablePaginationMixin.md deleted file mode 100644 index a928a5e8..00000000 --- a/docs/VuetablePaginationMixin.md +++ /dev/null @@ -1,114 +0,0 @@ -## VuetablePaginationMixin - -This mixin provides sliding style pagination functionality where the current page (when not at the first or last position) is always in the middle of pagination list. - -### Properties - -#### # css -- type: _Object_ -- default: - ```javascript - { - wrapperClass: 'ui right floated pagination menu', - activeClass: 'active large', - disabledClass: 'disabled', - pageClass: 'item', - linkClass: 'icon item', - paginationClass: 'ui bottom attached segment grid', - paginationInfoClass: 'left floated left aligned six wide column', - dropdownClass: 'ui search dropdown', - icons: { - first: 'angle double left icon', - prev: 'left chevron icon', - next: 'right chevron icon', - last: 'angle double right icon', - } - } - ``` -- description - - The `css` property holds most of the CSS classes that VuetablePagination uses in its template. - -#### # on-each-side -- type: _Number_ -- default: `2` -- description - - The value of this property specifies the slide size on each side of the center. - -### Computed - -#### # totalPage -- return: _Number_ -- description - - The total number of available pages. This value is taken from the `last_page` field of pagination information. - -#### # isOnFirstPage -- return: _Boolean_ -- description - - Returns `true` if the current page number is the first page; otherwise, returns `false`. - -#### # isOnLastPage -- return: _Boolean_ -- description - - Returns `true` if the current page number is the last page; otherwise, returns `false`. - -#### # notEnoughPages -- return: _Boolean_ -- description - - Determine if the total number of pages is enough to be displayed without sliding. - -#### # windowSize -- return: _Number_ -- description - - The size of the sliding window calculating from `on-each-side` * 2 + 1. - -#### # windowStart -- return: _Number_ -- description - - Return the first page number to be shown on the leftmost. - -### Data -#### # tablePagination -- type: _Object_ -- default: `null` - - The pagination information received from Vuetable. - -### Methods - -#### # isCurrentPage -- params: - - page: _Number_ -- description - - Determine if the given page number is the current page. - -#### # setPaginationData -- params: - - tablePagination: _Object_ -- pagination information -- description - - Setting the `tablePagination` data to be used when rendering pagination component. - -#### # resetData -- params: _none_ -- description - - This method will set `tablePagination` to null. - -### Events - -#### # vuetable-pagination:change-page -- type: _emit_ -- payload: - - page: _Number_, _String_ -- description: - - This event was fired when the user clicks on any pagination item requesting data for that given page number. diff --git a/docs/_sidebar.md b/docs/_sidebar.md deleted file mode 100644 index ddfa9e70..00000000 --- a/docs/_sidebar.md +++ /dev/null @@ -1,34 +0,0 @@ - - -- Vuetable - - [Fields Definition](Fields-Definition) - - [Callback / Formatter](Callbacks) - - [Special Fields](Special-Fields) - - [Row Identifier](Row-Identifier) - - [Data Format JSON](Data-Format-JSON) - - [Sorting](Sorting) - - [Overriding Default Query String](Overriding-Default-Query-String) - - [Data Transformation](Data-Transformation) - - [Pagination](Pagination) - - [Detail Row](Detail-Row) - - [CSS Styling](CSS-Styling) - - [Tutorial](https://github.com/ratiw/vuetable-2-tutorial/wiki) - - [FAQ](FAQ) - -- Components API - - Vuetable - + [Properties](Vuetable-Properties) - + [Computed properties](Vuetable-Computed) - + [Data](Vuetable-Data) - + [Methods](Vuetable-Methods) - + [Events](Vuetable-Events) - - - [VuetablePagination](VuetablePagination) - - - [VuetablePaginationMixin](VuetablePaginationMixin) - - - [VuetablePaginationDropdown](VuetablePaginationDropdown) - - - [VuetablePaginationInfo](VuetablePaginationInfo) - - - [VuetablePaginationInfoMixin](VuetablePaginationInfoMixin) diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 2618fb0d..00000000 --- a/docs/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - Document - - - - - -
- - - -