94 | ```
95 |
96 | ## Other Elements
97 |
98 | ### # loadingClass
99 |
100 | ### # ascendingIcon
101 |
102 | ### # descendingIcon
103 |
104 | ### # handleIcon
105 |
106 | ## Pagination
107 |
108 | ```javascript
109 | {
110 | wrapperClass: 'ui right floated pagination menu',
111 | activeClass: 'active large',
112 | disabledClass: 'disabled',
113 | pageClass: 'item',
114 | linkClass: 'icon item',
115 | paginationClass: 'ui bottom attached segment grid',
116 | paginationInfoClass: 'left floated left aligned six wide column',
117 | dropdownClass: 'ui search dropdown',
118 | icons: {
119 | first: 'angle double left icon',
120 | prev: 'left chevron icon',
121 | next: 'right chevron icon',
122 | last: 'angle double right icon',
123 | }
124 | }
125 | ```
126 |
127 |
--------------------------------------------------------------------------------
/docs/Callbacks.md:
--------------------------------------------------------------------------------
1 | # Callbacks
2 |
3 | In Vuetable, each field can have an associated callback function that will allow you to format the value of the column for display.
4 |
5 | > __Note__
6 | > The name `callback` might be changed to `format` in the near future to make it really reflect what it does.
7 |
8 | 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.
9 |
10 | Here is the example of a field defining a callback function.
11 | ```javascript
12 | // specifying the name of the function as string
13 | {
14 | name: 'gender',
15 | callback: 'gender'
16 | }
17 |
18 | // specifying the function reference.
19 | // in this case, function `gender` must be defined in the `methods` section.
20 | {
21 | name: 'gender',
22 | callback: gender
23 | }
24 | ```
25 |
26 | 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.
27 |
28 | The callbacks are defined inside the Vue.js instance where Vuetable component is defined.
29 |
30 | Let's look at the `gender` callback function.
31 | ```javascript
32 | new Vue({
33 | el: '#app',
34 | methods: {
35 | gender: function(value) {
36 | return value == 'M' ? 'Male' : 'Female'
37 | }
38 | }
39 | })
40 | ```
41 |
42 | 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.
43 |
44 | 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`.
45 |
46 | #### Passing Additional Parameters to Callback function
47 | 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:
48 | ```javascript
49 | new Vue({
50 | el: '#app',
51 | columns: [
52 | {
53 | name: 'birthdate',
54 | callback: 'formatDate|D/MM/Y'
55 | }
56 | ],
57 | methods: {
58 | formatDate: function(value, fmt) {
59 | if (value == null) return ''
60 | fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt
61 | return moment(value, 'YYYY-MM-DD').format(fmt)
62 | }
63 | }
64 | })
65 | ```
66 |
67 | In this example, field `birthdate` has a callback named `formatDate`. The callback defines additional parameter using `|` character following the name of the callback function.
68 |
69 | 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.
70 |
71 |
--------------------------------------------------------------------------------
/docs/Data-Format-JSON.md:
--------------------------------------------------------------------------------
1 | # Data Format (JSON)
2 |
3 | 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:
4 |
5 | ```json
6 | {
7 | "links": {
8 | "pagination": {
9 | "total": 50,
10 | "per_page": 15,
11 | "current_page": 1,
12 | "last_page": 4,
13 | "next_page_url": "...",
14 | "prev_page_url": "...",
15 | "from": 1,
16 | "to": 15,
17 | }
18 | },
19 | "data": [
20 | {
21 | "id": 1,
22 | "name": "xxxxxxxxx",
23 | "nickname": "xxxxxxx",
24 | "email": "xxx@xxx.xxx",
25 | "birthdate": "xxxx-xx-xx",
26 | "gender": "X",
27 | "group_id": 1,
28 | },
29 | .
30 | .
31 | .
32 | {
33 | "id": 50,
34 | "name": "xxxxxxxxx",
35 | "nickname": "xxxxxxx",
36 | "email": "xxx@xxx.xxx",
37 | "birthdate": "xxxx-xx-xx",
38 | "gender": "X",
39 | "group_id": 3,
40 | }
41 | ]
42 | }
43 | ```
44 |
45 | Mostly, it looks for two pieces of information; the array of data, the pagination information.
46 |
47 | It uses two keys (`data-path` and `pagination-path`) to look into those data to extract the information it is needed.
48 |
49 | - `data-path` points to the array of data
50 | - `pagination-path` points to the pagination information
51 |
52 | 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.
53 |
54 | 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.
55 |
56 | ```json
57 | {
58 | "total": 50,
59 | "per_page": 15,
60 | "current_page": 1,
61 | "last_page": 4,
62 | "next_page_url": "...",
63 | "prev_page_url": "...",
64 | "from": 1,
65 | "to": 15,
66 | "data": [
67 | {
68 | "id": 1,
69 | "name": "xxxxxxxxx",
70 | "nickname": "xxxxxxx",
71 | "email": "xxx@xxx.xxx",
72 | "birthdate": "xxxx-xx-xx",
73 | "gender": "X",
74 | "group_id": 1,
75 | },
76 | .
77 | .
78 | .
79 | {
80 | "id": 50,
81 | "name": "xxxxxxxxx",
82 | "nickname": "xxxxxxx",
83 | "email": "xxx@xxx.xxx",
84 | "birthdate": "xxxx-xx-xx",
85 | "gender": "X",
86 | "group_id": 3,
87 | }
88 | ]
89 | }
90 | ```
91 |
92 | In this case, you just specify values for `data-path` and `pagination-path` like so
93 | ```html
94 |
95 |
101 |
102 | ```
103 |
104 | 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.
105 |
--------------------------------------------------------------------------------
/docs/Data-Transformation.md:
--------------------------------------------------------------------------------
1 | # Data Transformation
2 |
3 | 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.
4 |
5 | To setup the data transformation function, just create a `transform` method in the parent instance of Vuetable like so,
6 |
7 | ```javascript
8 | new Vue({
9 | el: '#app',
10 | data: {
11 | //...
12 | },
13 | methods: {
14 | transform: function(data) {
15 | var transformed = {}
16 |
17 | transformed.pagination = {
18 | total: data.total,
19 | per_page: data.per_page,
20 | current_page: data.current_page,
21 | last_page: data.last_page,
22 | next_page_url: data.next_page_url,
23 | prev_page_url: data.prev_page_url,
24 | from: data.from,
25 | to: data.to
26 | }
27 |
28 | transformed.mydata = []
29 |
30 | for (var i=0; i < data.length; i++) {
31 | transformed.mydata.push({
32 | id: data[i].id,
33 | fullname: data[i].name,
34 | email: data[i].email
35 | })
36 | }
37 |
38 | return transformed
39 | }
40 | }
41 | })
42 | ```
43 |
44 | ```html
45 |
51 | ```
52 |
--------------------------------------------------------------------------------
/docs/Detail-Row.md:
--------------------------------------------------------------------------------
1 | # Detail Row
2 |
3 | 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.
4 |
5 | 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.
6 |
7 | Your detail row component should define the following two properties:
8 | - `row-data` -- the current row data will be passed to
9 | - `row-index` -- the current row index will be passed to
10 |
11 | Example:
12 | ```javascript
13 | //..
14 | props: {
15 | rowData: {
16 | type: Object,
17 | required: true
18 | },
19 | rowIndex: {
20 | type: Number
21 | },
22 | }
23 | ```
24 |
25 | ## How Vuetable track the state of each Detail Row
26 |
27 | 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.
28 |
29 | 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.
30 |
31 | 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.
32 |
33 | For example, your data uses `uuid` instead of `id` column, you can tell Vuetable to use it.
34 | ```html
35 |
40 | ```
41 |
42 | 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.
43 | - isVisibleDetailRow
44 | - showDetailRow
45 | - hideDetailRow
46 | - toggleDetailRow
47 |
48 | To call those methods, you can use `ref` tag, like so,
49 | ```javascript
50 | this.$refs.vuetable.toggleDetailRow(rowId)
51 | ```
52 |
--------------------------------------------------------------------------------
/docs/FAQ.md:
--------------------------------------------------------------------------------
1 | ## FAQ
2 | - [Background](Background)
3 | - API mode vs. Data mode
4 | - Why my data does not show up?
5 | - Why the pagination does not show anything?
6 | - How to specify column width?
7 | - Can Vuetable do the data grouping?
8 |
--------------------------------------------------------------------------------
/docs/Fields-Definition.md:
--------------------------------------------------------------------------------
1 | Fields can be defined as simpl array of string, array of object, or the mix.
2 |
3 | - Fields defined as simple array
4 |
5 | ```javascript
6 | let columns = ['name', 'email', 'birthdate', 'gender']
7 | ```
8 |
9 | - Fields defined as array of object
10 | ```javascript
11 | let columns = [
12 | {
13 | name: 'name',
14 | sortField: 'name'
15 | },
16 | {
17 | name: 'email',
18 | title: 'Email Address'
19 | },
20 | {
21 | name: 'birthdate',
22 | sortField: 'birthdate',
23 | titleClass: 'center aligned',
24 | dataClass: 'center aligned',
25 | callback: 'formatDate|D/MM/Y'
26 | },
27 | {
28 | name: 'gender',
29 | sortField: 'gender',
30 | titleClass: 'center aligned',
31 | dataClass: 'center aligned',
32 | callback: 'gender'
33 | },
34 | ]
35 | ```
36 |
37 | - Fields defined as array of the mix
38 | ```javascript
39 | let columns = [
40 | 'name',
41 | 'email',
42 | {
43 | name: 'birthdate',
44 | sortField: 'birthdate',
45 | titleClass: 'center aligned',
46 | dataClass: 'center aligned',
47 | callback: 'formatDate|D/MM/Y'
48 | },
49 | {
50 | name: 'gender',
51 | sortField: 'gender',
52 | titleClass: 'center aligned',
53 | dataClass: 'center aligned',
54 | callback: 'gender'
55 | },
56 | //...
57 | ]
58 | ```
59 |
60 | The difference is that if you defined a field as simple array of string. Vuetable will only display it as-is
61 | without any sorting or formatting options. Vuetable will convert the simple field definition
62 | to field object with only `name` property.
63 |
64 | ```javascript
65 | let columns = ['name']
66 | // will be converted to this
67 | // let columns = [ { name: 'name' } ]
68 | ```
69 |
70 | ## Field options
71 |
72 | Available options
73 | - [name](#-name)
74 | - [sortField](#-sortField)
75 | - [title](#-title)
76 | - [titleClass](#-titleClass)
77 | - [dataClass](#-dataClass)
78 | - [callback](#-callback)
79 | - [visible](#-visible)
80 | - [width](#-width)
81 |
82 | ### # name
83 | - type: _String_
84 |
85 | Name of the data field to be display.
86 |
87 | ### # sortField
88 | - type: _String_
89 |
90 | Usually, it will be the same as `name` option. But you can specify different value if
91 | you use different field name when querying data on the serve side, e.g. firstname.
92 |
93 | If specified, the field will be marked as sortable. `vuetable` will display appropriate
94 | clickable icon after the field title. `vuetable` will also make a new request to the server
95 | with the `sort=` query string appended.
96 |
97 | ### # title
98 | - type: [_String_, _Function_]
99 |
100 | If you would like to specify the title yourself, you can put it in here. Otherwise, `vuetable`
101 | will use the `name` option instead.
102 |
103 | You can even put the icon class in the title, see example below
104 | ```javascript
105 | //.. example using Semantic UI icon class
106 | {
107 | name: 'birthdate',
108 | title: ' Birthdate'
109 | }
110 | //
111 | ```
112 |
113 | _New feature (after v1.6.5)_
114 | 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.
115 | ```javascript
116 | //.. example using Semantic UI icon class
117 | {
118 | name: 'birthdate',
119 | title: () => ' Birthdate'
120 | }
121 | //
122 | ```
123 |
124 | This allow total flexibility and make it possible to make use of external i18n library.
125 |
126 | ### # titleClass
127 | - type: _String_
128 |
129 | The css class you would like to apply for the title of this field.
130 |
131 | ### # dataClass
132 | - type: _String_
133 |
134 | The css class you would like to apply for the data of this field.
135 |
136 | ### # callback
137 | - type: [_String_, _Function_]
138 |
139 | The name of the callback function to be called to allow formatting of the value
140 | to be displayed. See [Callback](Callbacks) section for more info.
141 |
142 | ### # visible
143 | - type: _Boolean_
144 |
145 | Whether this field should be visible or hidden when rendering the table.
146 |
147 | ### # width _(since v1.7)_
148 | - type: _String_
149 |
150 | Specify the width of the column as string, e.g. `600px`. See [Fixed Header](Fixed-Header) section for more info.
151 |
152 |
153 | ## Nested JSON Data
154 | If the JSON data structure contains nested objects, eg:
155 | ```json
156 | {
157 | "links": {
158 | "pagination": {
159 | "per_page": 15,
160 | }
161 | },
162 | "data": [
163 | {
164 | "id": 1,
165 | "name": "xxxxxxxxx",
166 | "email": "xxx@xxx.xxx",
167 | "group_id": 1,
168 | "address" {
169 | "street_address":"123 abc place",
170 | "city":"townsville",
171 | "province":"Harbor",
172 | "country":"Antegria"
173 | }
174 | }
175 | .
176 | .
177 | .
178 | {
179 | "id": 50,
180 | "name": "xxxxxxxxx",
181 | "email": "xxx@xxx.xxx",
182 | "group_id": 3,
183 | "address" {
184 | "street_address":"456 xyz street",
185 | "city":"cityville",
186 | "province":"Portia",
187 | "country":"Norland"
188 | }
189 | }
190 | ]
191 | }
192 | ```
193 | In this case, the column names of nested objects can be specified in the following format:
194 |
195 | ```javascript
196 | let columns = ['name', 'email', 'address.city', 'address.country']
197 | ```
198 |
--------------------------------------------------------------------------------
/docs/Filtering.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ratiw/vuetable-2/1f01bcf540e3c799dd4fe4d064c9af45784ca481/docs/Filtering.md
--------------------------------------------------------------------------------
/docs/Fixed-Header.md:
--------------------------------------------------------------------------------
1 | # Fixed Header _(since v1.7)_
2 |
3 | Vuetable is now able to fixed the table header, so that when the table data height is more than the specified table height, the table body can be scrolled.
4 |
5 | This is mostly useful if you're using Vuetable in Data mode, where you manually supply the data to Vuetable instead of let Vuetable handle the API data request to the server side, or you need to limit the height of the table to a certain value.
6 |
7 | To enable fixed header, you have to specify the height of the table via [`table-height`](Vuetable-Properties#-table-height) prop.
8 |
9 | By default, `table-height` value is `null` so it shouldn't affect any previous code in ealier version.
10 |
11 | Once fixed header has been enabled, you can "disable" it by setting `table-height` prop to `null`.
12 |
13 | The `width` option has been added to [Fields definition](Fields-Definition) options, to allow specifying width for each column table. This is go well with the fixed header. So, you will definitely want to add `width` option to all your field definition.
14 |
15 | You can find the example in the `main.js` file in the `src` direction.
16 |
17 |
18 |
--------------------------------------------------------------------------------
/docs/Home.md:
--------------------------------------------------------------------------------
1 | ## Vuetable-2 : datatable simplify!
2 |
3 | _Still A Work in Progress_
4 |
5 | ### Table of Contents
6 |
7 | ### Vuetable
8 | - [Fields Definition](Fields-Definition)
9 | - [Callback / Formatter](Callbacks)
10 | - [Special Fields](Special-Fields)
11 | - [Row Identifier](Row-Identifier)
12 | - [Data Format (JSON)](Data-Format-(JSON))
13 | - [Sorting](Sorting)
14 | - [Overriding Default Query String](Overriding-Default-Query-String)
15 | - [Data Transformation](Data-Transformation)
16 | - [Pagination](Pagination)
17 | - [Detail Row](Detail-Row)
18 | - [Fixed Header](Fixed-Header)
19 | - [CSS Styling](CSS-Styling)
20 | - [Tutorial](https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/README.md)
21 | - [FAQ](FAQ)
22 |
23 | ### Components API
24 | - Vuetable
25 | + [Properties](Vuetable-Properties)
26 | + [Computed properties](Vuetable-Computed)
27 | + [Data](Vuetable-Data)
28 | + [Methods](Vuetable-Methods)
29 | + [Events](Vuetable-Events)
30 |
31 | - [VuetablePagination](VuetablePagination)
32 |
33 | - [VuetablePaginationMixin](VuetablePaginationMixin)
34 |
35 | - [VuetablePaginationDropdown](VuetablePaginationDropdown)
36 |
37 | - [VuetablePaginationInfo](VuetablePaginationInfo)
38 |
39 | - [VuetablePaginationInfoMixin](VuetablePaginationInfoMixin)
40 |
--------------------------------------------------------------------------------
/docs/Overriding-Default-Query-String.md:
--------------------------------------------------------------------------------
1 | # Overriding Default Query String
2 |
3 | By default, Vuetable uses the following key in the query string that will be sent to the server.
4 | - `sort` -- its value will contain the requested sort order
5 | - `page` -- its value will contain the requested page number
6 | - `per_page` -- its value will contain the requested records per page
7 |
8 | If you're making your own API backend, you can just use this default.
9 |
10 | 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.
11 |
12 | Here is the default value of `query-params` property.
13 | ```javascript
14 | {
15 | sort: 'sort',
16 | page: 'page',
17 | perPage: 'per_page'
18 | }
19 | ```
20 |
21 | Suppose your API uses `sort_order`, `page_no`, and `page_size`, you can easily tell Vuetable to use them like so,
22 | ```html
23 |
27 | ```
28 |
--------------------------------------------------------------------------------
/docs/Pagination.md:
--------------------------------------------------------------------------------
1 | # Pagination
2 |
3 | Vuetable comes ready with two pagination components and a pagination information component which you can extend to easily build your own.
4 | - [VuetablePagination](VuetablePagination)
5 | - [VuetablePaginationDropdown](VuetablePaginationDropDown)
6 | - [VuetablePaginationInfo](VuetablePaginationInfo)
7 |
8 | 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.
9 |
10 | ## VuetablePagination
11 |
12 | This is a sliding pagination port from [Laravel](https://laravel.com).
13 |
14 | 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.
15 |
16 | The number of sliding pages can be configured via `on-each-side` prop and will be calculated using this formula.
17 | ```
18 | number of sliding pages = onEachSide * 2 +1
19 | ```
20 |
21 | ## VuetablePaginationDropdown
22 |
23 | 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.
24 |
25 | 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.
26 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | [](https://www.npmjs.com/package/vuetable-2)
2 | []()
3 |
4 | # Vuetable-2 - data table simplify!
5 |
6 | ### Vuetable-2 works with Vue 2.x, vuetable is for Vue 1.x
7 |
8 | 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.
9 |
10 | ---
11 |
12 | ### Documentation and Tutorial
13 |
14 | 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.
15 |
16 | Meanwhile, check out
17 | - the [Tutorial](https://github.com/ratiw/vuetable-2-tutorial/wiki)
18 | with follow-along project [here](https://github.com/ratiw/vuetable-2-tutorial). It should be enough to get you started.
19 |
20 | - [Sample project](https://github.com/ratiw/vuetable-2-with-laravel-5.4) using Vuetable-2 with Laravel 5.4 and Laravel-Mix
21 |
22 | 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.
23 |
24 | 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.
25 |
26 | Use scoped slot in parent when defining the actions [Vue Doc for scopped Slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots)
27 |
28 | e.g.
29 | ```html
30 |
31 |
32 |
33 |
34 |
35 |
36 | ```
37 |
38 | the onClick function can now be defined in the parent and the parent has Access to rowData and rowIndex via props. :)
39 |
40 | The original functionality still works
41 |
42 | # Breaking Changes
43 | ## v1.6.0
44 | - The `icons` prop of VuetablePagination is now moved into the `css` prop object. See this [codepen](https://codepen.io/ratiw/pen/GmJayw).
45 |
46 | # Example Code
47 | - Clone the project
48 | - Go into the cloned directory
49 | - `npm install`
50 | - `npm run dev`
51 | - Open browser to `http://localhost:8080`
52 |
53 | # Usage
54 | ## NPM
55 |
56 | ```shell
57 | npm install vuetable-2 --save-dev
58 | ```
59 |
60 | ## Javascript via CDN
61 | Thanks to @cristijora for providing helps on this.
62 | ```html
63 | // vuetable-2 dependencies
64 |
65 |
66 | // vuetable-2
67 |
68 | Vue.use(Vuetable)
69 | ```
70 | This is demonstrated in this [jsfiddle](http://jsfiddle.net/CristiJ/z11fe07p/1318/).
71 |
72 | The `.use` from above will register all the components globally.
73 | ```javascript
74 | function install(Vue){
75 | Vue.component("vuetable", Vuetable);
76 | Vue.component("vuetable-pagination", VueTablePaginationInfo);
77 | Vue.component("vuetable-pagination-dropdown", VueTablePaginationDropDown);
78 | Vue.component("vuetable-pagination-info", VueTablePaginationInfo);
79 | }
80 | ```
81 |
82 | Also you have the ability to access certain components if you need them:
83 | ```javascript
84 | VueTable: VueTable.default/VueTable.VueTable,
85 | VueTablePagination: VueTable.VueTablePagination,
86 | VueTablePaginationInfo: VueTable.VueTablePaginationInfo,
87 | VueTablePaginationDropdown: VueTable.VueTablePaginationDropdown
88 | ```
89 |
90 |
91 | # Contributions
92 | 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.
93 |
94 | > __Note__
95 | > 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.
96 | >
97 | > If you are not sure, please ask by openning a new issue.
98 |
99 | However, please do not feel bad if your pull requests or contributions do not get merged or implemented into Vuetable.
100 |
101 | 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.
102 |
103 | # License
104 | Vuetable is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
105 |
--------------------------------------------------------------------------------
/docs/Row-Identifier.md:
--------------------------------------------------------------------------------
1 | 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.
2 |
3 | If you data structure uses different column, you can use `track-by` prop to specify it.
--------------------------------------------------------------------------------
/docs/Sorting.md:
--------------------------------------------------------------------------------
1 | # Sorting
2 |
3 | > __Note__
4 | > This works in ApiMode only!
5 |
6 | If your API endpoint supports sorting, Vuetable can also automatically interact with it when you specify which column in the data is sortable.
7 |
8 | To specify that a particular column is sortable, you add `sortField` option to the field definition of that column.
9 |
10 | ```javascript
11 | {
12 | name: 'email',
13 | sortField: 'email'
14 | }
15 | ```
16 |
17 | The sortable column will be rendered with `.sortable` CSS class in the `
` and it will respond to the click to toggle between
18 | - setting the column as sort order if it was not the current sort order.
19 | - toggle between ascending and descending if it is the current sort order.
20 |
21 | 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.
22 |
23 | Here is the sample sort parameter in the query string.
24 | ```json
25 | http://api.example.com/users?sort=email|asc
26 | ```
27 | 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 (`|`).
28 |
29 | 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.
30 |
31 | ### Initial Sorting Order
32 |
33 | To provide initial sorting order, use `sort-order` prop to specify the default sorting column.
34 |
35 | ```html
36 |
40 | ```
41 | ```javascript
42 | new Vue({
43 | //...
44 | data: {
45 | //...
46 | sortOrder: [
47 | {
48 | field: 'email',
49 | direction: 'asc'
50 | }
51 | ]
52 | }
53 | })
54 | ```
55 |
56 | ### Multi-column Sorting
57 |
58 | Multi-column sorting can be enabled by setting `multi-sort` prop value to `true`.
59 |
60 | 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
61 | - `alt` -- Alt / Option
62 | - `ctrl` -- Ctrl / Control
63 | - `meta` -- Window / Command
64 | - `shift` -- Shift
65 |
66 | ### Overriding the Sort Query String
67 |
68 | You can override how the sort parameter in the query string is constructed by defining a method named 'getSortParam()' in your main vue instance.
69 |
70 | 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.
71 |
72 | ```javascript
73 | // If
74 | // sortOrder = [
75 | // { field: "gender", direction: "desc"},
76 | // { field: "name", direction: "asc"},
77 | // ]
78 | // This will return
79 | // '-gender,name'
80 | //
81 | getSortParam: function(sortOrder) {
82 | return sortOrder.map(function(sort) {
83 | return (sort.direction === 'desc' ? '-' : '') + sort.field
84 | }).join(',')
85 | }
86 | ```
87 |
--------------------------------------------------------------------------------
/docs/Special-Fields.md:
--------------------------------------------------------------------------------
1 | ## Special Fields
2 |
3 | Special fields are predefined field for specific purpose and their names are always started with double underscore characters `__`.
4 |
5 | Vuetable currently have the following special fields
6 | - [__sequence](#-__sequence)
7 | - [__handle](#-__handle)
8 | - [__checkbox](#-__checkbox)
9 | - [__component](#-__componentltnamegt)
10 | - [__slot](#-__slotltnamegt)
11 |
12 | 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).
13 |
14 | #### # __sequence
15 |
16 | 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.
17 |
18 | > __Note__
19 | > __sequence special field only work in API Mode (`:api-mode="true"`) as it
20 | > requires pagination information to work correctly.
21 |
22 | The generated HTML output will be like this
23 | ```html
24 |
25 | ...
26 |
27 |
28 |
29 | ...
30 |
31 | ```
32 |
33 | #### # __handle
34 |
35 | This special field can be used to display CSS-class icon.
36 |
37 | This allow you to use external library like [Sortable.js]() with Vuetable.
38 |
39 | The generated HTML output will be like this
40 | ```html
41 |
42 |
44 | ```
45 |
46 | The `css.handleIcon` can be overriden using `css` prop.
47 |
48 | See also: [`css`]()
49 |
50 | #### # __checkbox
51 |
52 | Events emitted
53 | - `vuetable:checkbox-toggled` -- when the user check/uncheck the checkbox in each row
54 | - `vuetable:checkbox-toggled-all` -- when the user check/uncheck the checkbox on the table header
55 |
56 | The `__checkbox` special field will display checkbox column for each row and also on the header row to allow select/unselect all functionality.
57 |
58 | 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.
59 |
60 | 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.
61 |
62 | For example, if you want to use `item_code` field as you row identifier, you can do so like this.
63 | ```html
64 |
67 | ```
68 |
69 | 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.
70 | ```javascript
71 | this.$refs.vuetable.selectedTo
72 | ```
73 |
74 | The generated HTML output will be like this
75 | ```html
76 |
77 | ...
78 |
79 |
80 |
81 |
82 | ```
83 |
84 | See also:
85 | - [Row Identifier]()
86 | - [`selectedTo` prop]()
87 | - [`vuetable:checkbox-toggled` event]()
88 | - [`vuetable:checkbox-toggled-all` event]()
89 |
90 | #### # __component:<name>
91 |
92 | The `__component` special field allow you to create a component to handle the display of the row data as you want.
93 |
94 | `` is the name of the component registered globally using `Vue.component` that will be used to handle the rendering of the column data.
95 |
96 | Vuetable will pass 3 props to the component
97 | - `row-data` -- the data of the current row being rendered
98 | - `row-index` -- the current row index
99 | - `row-field` -- the current `sortField` in field definition
100 |
101 | 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/wiki/lesson-11)
102 |
103 | The generated HTML output will be like this
104 | ```html
105 |
106 | ...
107 |
108 | ...
109 |
110 | ...component code..
111 |
112 | ```
113 |
114 |
115 | #### # __slot:<name>
116 |
117 | The `__slot` special field allows you to use Vue's scoped slot inside Vuetable.
118 |
119 | > [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.
120 |
121 | Vuetable will pass 3 props to the slot
122 | - `row-data` -- the data of the current row being rendered
123 | - `row-index` -- the current row index
124 | - `row-field` -- the current `sortField` in field definition
125 |
126 | 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)
127 |
128 | The generated HTML output will be like this
129 | ```html
130 |
131 | ...
132 |
133 | ...
134 |
135 | ...
136 |
137 | ```
138 |
--------------------------------------------------------------------------------
/docs/Vuetable-Computed.md:
--------------------------------------------------------------------------------
1 | ## Vuetable - Computed Properties
2 |
3 | - [blankRows](#-blankrows)
4 | - [countTableData](#-counttabledata)
5 | - [countVisibleFields](#-countvisiblefields)
6 | - [displayEmptyDataRow](#-displayemptydatarow)
7 | - [isApiMode](#-isapimode)
8 | - [isDataMode](#-isdatamode)
9 | - [lessThanMinRows](#-lessthanminrows)
10 | - [useDetailRow](#-usedetailrow)
11 |
12 | ### # countTableData
13 | - return: _Number_
14 | - description
15 |
16 | Return the number of rows for the current data or zero (0) if the `tableData` is `null`.
17 |
18 | ### # countVisibleFields
19 | - return: _Number_
20 | - description
21 |
22 | Return the number of visible fields in the table by checking the field's `visible` option.
23 |
24 | ### # displayEmptyDataRow
25 | - return: _Boolean_
26 | - description
27 |
28 | Determine if Vuetable should display empty data row message.
29 |
30 | ### # lessThanMinRows
31 | - return: _Boolean_
32 | - description
33 |
34 | Determine if the number of data rows available is less than the number specified in `min-rows` prop.
35 |
36 | ### # blankRows
37 | - return: _Number_
38 | - description
39 |
40 | Return the number of blank rows that Vuetable needs to render. If the number of row data is greater than
41 | or equal to `min-rows`, it returns 0.
42 |
43 | ### # useDetailRow
44 | - return: _Boolean_
45 | - description
46 |
47 | Determine if detail row should be rendered by inspecting the availability of the data and various properties.
48 |
49 | ### # isApiMode
50 | - return: _Boolean_
51 | - description
52 |
53 | Determine if Vuetable is currently in API mode.
54 |
55 | ### # isDataMode
56 | - return: _Boolean_
57 | - description
58 |
59 | Determine if Vuetable is currently in Data mode.
60 |
--------------------------------------------------------------------------------
/docs/Vuetable-Data.md:
--------------------------------------------------------------------------------
1 | ## Vuetable - Data
2 |
3 | - [eventPrefix](#-eventprefix)
4 | - [tableFields](#-tablefields)
5 | - [tableData](#-tabledata)
6 | - [tablePagination](#-tablepagination)
7 | - [currentPage](#-currentpage)
8 | - [selectedTo](#-selectedto)
9 | - [visibleDetailRows](#-visibledetailrows)
10 |
11 | ### # eventPrefix
12 | - type: _String_
13 | - default: `vuetable:`
14 | - description
15 |
16 | The event prefix that Vuetable is going to use when emitting the event.
17 |
18 | ### # tableFields
19 | - type: _Array_
20 | - default: `[]` _(empty array)_
21 | - description
22 |
23 | The normalized version of fields definition. This is done during the `created` hook.
24 |
25 | ### # tableData
26 | - type: _Array_
27 | - default: `null`
28 | - description
29 |
30 | In `api-mode`, this stores the data that returned from the server after the sucessful AJAX request. Otherwise,
31 | it stores the data assigned to via `data` prop or `setData` method. Vuetable always use `tableData` for table
32 | rendering.
33 |
34 | ### # tablePagination
35 | - type: _Object_
36 | - default: `null`
37 | - description
38 |
39 | If the data returned from the server contains pagination information specified in the `pagination-path`, this is where it gets stored.
40 |
41 | ### # currentPage
42 | - type: _Number_
43 | - default: `1`
44 | - description
45 |
46 | Vuetable use this to keep track of the current page being diplayed.
47 |
48 | ### # selectedTo
49 | - type: _Array_
50 | - default: `[]` _(empty array)_
51 | - description
52 |
53 | 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.
54 |
55 | ### # visibleDetailRows
56 | - type: _Array_
57 | - default: `[]` _(empty array)_
58 | - description
59 |
60 | This stores the row identifier of any row where its detail row is visible.
61 |
62 |
--------------------------------------------------------------------------------
/docs/Vuetable-Events.md:
--------------------------------------------------------------------------------
1 | ## Vuetable - Events
2 |
3 | - [vuetable:initialized](#-vuetableinitialized)
4 | - [vuetable:pagination-data](#-vuetablepagination-data)
5 | - [vuetable:loading](#-vuetableloading)
6 | - [vuetable:load-success](#-vuetableload-success)
7 | - [vuetable:load-error](#-vuetableload-error)
8 | - [vuetable:loaded](#-vuetableloaded)
9 | - [vuetable:row-changed](#-vuetablerow-changed)
10 | - [vuetable:row-clicked](#-vuetablerow-clicked)
11 | - [vuetable:row-dblclicked](#-vuetablerow-dblclicked)
12 | - [vuetable:cell-clicked](#-vuetablecell-clicked)
13 | - [vuetable:cell-dblclicked](#-vuetablecell-dblclicked)
14 | - [vuetable:cell-rightclicked](#-vuetablecell-rightclicked)
15 | - [vuetable:detail-row-clicked](#-vuetabledetail-row-clicked)
16 | - [vuetable:checkbox-toggled](#-vuetablecheckbox-toggled)
17 | - [vuetable:checkbox-toggled-all](#-vuetablecheckbox-toggled-all)
18 | - [vuetable:data-reset](#-vuetabledata-reset)
19 |
20 | ### # vuetable:initialized
21 | - payload:
22 | - tableFields: _Array_ -- the normalized fields definition
23 | - description
24 |
25 | This event will be fired after the fields definition have been normalized during the `created` lifecycle hook.
26 |
27 | ### # vuetable:pagination-data
28 | - payload:
29 | - tablePagination: _Object_ -- pagination information
30 | - description
31 |
32 | This event will be fired when the data has sucessfully been retrieved from the server and there is pagination information available.
33 |
34 | ### # vuetable:loading
35 | - payload: _none_
36 | - description
37 |
38 | 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.
39 |
40 | ### # vuetable:load-success
41 | - payload:
42 | - response: _Object_ -- the response returned from the server
43 | - description
44 |
45 | This event will be fired when the data was successfully loaded from the server.
46 |
47 | ### # vuetable:load-error
48 | - payload:
49 | - response: _Object_ -- the response returned from the server
50 | - description
51 |
52 | This event will be fired when up the data cannot be retrieved from the server or the server responses with an error.
53 |
54 | ### # vuetable:loaded
55 | - payload: _none_
56 | - description
57 |
58 | 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.
59 |
60 | This is useful for ending/hiding the loading image.
61 |
62 | ### # vuetable:row-changed
63 | - payload:
64 | - dataItem: _Object_ -- the current data item
65 | - description
66 |
67 | 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.
68 |
69 | > __Important!__
70 | > 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
71 |
72 |
73 | ### # vuetable:row-clicked
74 | - payload:
75 | - dataItem: _Object_ -- the current data item
76 | - event: _Event_ -- the MouseObject event
77 | - description
78 |
79 | 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.
80 |
81 | > 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.
82 |
83 | ### # vuetable:row-dblclicked
84 | - payload:
85 | - dataItem: _Object_ -- the current data item
86 | - event: _Event_ -- the MouseObject event
87 | - description
88 |
89 | 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.
90 |
91 | > 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.
92 |
93 | ### # vuetable:cell-clicked
94 | - payload:
95 | - dataItem: _Object_ -- the current data item
96 | - field: _Object_ -- the field object that causes this event
97 | - event: _Event_ -- the MouseObject event
98 | - description
99 |
100 | This event will be fired when a cell in the tabel body has been clicked.
101 |
102 |
103 |
104 | ### # vuetable:cell-dblclicked
105 | - payload:
106 | - dataItem: _Object_ -- the current data item
107 | - field: _Object_ -- the field object that causes this event
108 | - event: _Event_ -- the MouseObject event
109 | - description
110 |
111 | This event will be fired when a cell in the table body has been double-clicked.
112 |
113 | ### # vuetable:cell-rightclicked
114 | - payload:
115 | - dataItem: _Object_ -- the current data item
116 | - field: _Object_ -- the field object that causes this event
117 | - event: _Event_ -- the MouseObject event
118 | - description
119 |
120 | This event will be fired when a cell in the table body has been right-clicked.
121 |
122 | ### # vuetable:detail-row-clicked
123 | - payload:
124 | - dataItem: _Object_ -- the current data item
125 | - event: _Event_ -- the MouseObject event
126 | - description
127 |
128 | This event will be fired when an area of detail row has been clicked.
129 |
130 | ### # vuetable:checkbox-toggled
131 | - payload:
132 | - isChecked: _Boolean_ -- the state of the checkbox
133 | - dataItem: _Object_ -- the current data item
134 | - description
135 |
136 | This event will be fired whenever the checkbox has been toggled.
137 |
138 | ### # vuetable:checkbox-toggled-all
139 | - payload:
140 | - isChecked: _Boolean_ -- the state of the checkbox
141 | - description
142 |
143 | This event will be fired when the select-all checkbox has been toggled.
144 |
145 | ### # vuetable:data-reset
146 | - payload: _none_
147 | - description
148 |
149 | This event will be fired as a result from calling `resetData` method to clear in `tableData` and `tablePagination`.
150 |
--------------------------------------------------------------------------------
/docs/Vuetable-Methods.md:
--------------------------------------------------------------------------------
1 | ## Vuetable - Methods
2 |
3 | ### fields related
4 | - [normalizeFields](#-normalizeFields)
5 | - [showField](#-showfield)
6 | - [hideField](#-hidefield)
7 | - [toggleField](#-togglefield)
8 |
9 | ### data related
10 | - [setData](#-setdata)
11 | - [reload](#-reload)
12 | - [refresh](#-refresh)
13 | - [resetData](#-resetdata)
14 | - [transform](#-transform)
15 |
16 | ### pagination related
17 | - [gotoPreviousPage](#-gotopreviouspage)
18 | - [gotoNextPage](#-gotonextpage)
19 | - [gotoPage](#-gotopage)
20 | - [changePage](#-changepage)
21 |
22 | ### detail row related
23 | - [isVisibleDetailRow](#-isvisibledetailrow)
24 | - [showDetailRow](#-showdetailrow)
25 | - [hideDetailRow](#-hidedetailrow)
26 | - [toggleDetailRow](#-toggledetailrow)
27 |
28 | ### # normalizeFields
29 | - params: _none_
30 | - description
31 |
32 | Parse `fields` definition to field objects usable by Vuetable. This method is called automatically "once" during
33 | the `created` life cycle hook.
34 |
35 | If you dynamically change the `fields` prop, you will need to manually call `normalizeFields` method to properly
36 | parse the `fields` definition as Vuetable will not be able to pickup the change and will not work as expected.
37 |
38 | ### # setData
39 | - params:
40 | - data: _Array_ | _Object_
41 | - description
42 |
43 | 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.
44 |
45 | If the `data` parameter is of type Array, Vuetable will use those array as the data to render the table.
46 |
47 | 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).
48 |
49 | > __Note__
50 | > The method will automatically set `api-mode` to `false`.
51 |
52 | ### # reload
53 | - params: _none_
54 | - description
55 |
56 | Force Vuetable to reload the data from the server using the current value of parameters. However, the page number will not be reset.
57 |
58 | ### # refresh
59 | - params: _none_
60 | - description
61 |
62 | 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.
63 |
64 | ### # resetData
65 | - params: _none_
66 | - description
67 |
68 | 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.
69 |
70 | ### # transform
71 | - params:
72 | - data: _Array_
73 | - must return: _Array_
74 | - description
75 |
76 | 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
77 | and Vuetable will automatically called it with the data from the server.
78 |
79 | The `transform` method must return the array of data that Vuetable expected.
80 |
81 | See also: Data Format (JSON)
82 |
83 | ### # gotoPreviousPage
84 | - params: _none_
85 | - description
86 |
87 | __** API Mode Only **__
88 |
89 | This method will automatically request the previous page of data from the server.
90 |
91 | ### # gotoNextPage
92 | - params: _none_
93 | - description
94 |
95 | __** API Mode Only **__
96 |
97 | This method will automatically request the next page of data from the server.
98 |
99 | ### # gotoPage
100 | - params:
101 | - page: _Number_
102 | - description
103 |
104 | __** API Mode Only **__
105 |
106 | This method will automatically request the specified page of data from the server.
107 |
108 | ### # changePage
109 | - params:
110 | - page: _String_, _Number_
111 | - description
112 |
113 | __** API Mode Only **__
114 |
115 | 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.
116 |
117 | ### # isVisibleDetailRow
118 | - params:
119 | - rowId: _RowIdentifier_
120 | - description
121 |
122 | Determine if the detail row of the given row identifier is marked as visible.
123 |
124 | See also: [Row Identifier](Row-Identifier)
125 |
126 | ### # showDetailRow
127 | - params:
128 | - rowId: _RowIdentifier_
129 | - description
130 |
131 | Force displaying the detail row of the given row.
132 |
133 | See also: [Row Identifier](Row-Identifier)
134 |
135 | ### # hideDetailRow
136 | - params:
137 | - rowId: _RowIdentifier_
138 | - description
139 |
140 | Force hiding the detail row of the given row.
141 |
142 | See also: [Row Identifier](Row-Identifier)
143 |
144 | ### # toggleDetailRow
145 | - params:
146 | - rowId: _RowIdentifier_
147 | - description
148 |
149 | Toggle the display of the detail row of the given row.
150 |
151 | See also: [Row Identifier](Row-Identifier)
152 |
153 | ### # showField
154 | - params:
155 | - index: _Number_
156 | - description
157 |
158 | Force displaying the specified field.
159 |
160 | ### # hideField
161 | - params:
162 | - index: _Number_
163 | - description
164 |
165 | Force hiding the specified field.
166 |
167 | ### # toggleField
168 | - params:
169 | - index: _Number_
170 | - description
171 |
172 | Toggle display of the specified field.
173 |
174 |
175 |
--------------------------------------------------------------------------------
/docs/Vuetable-Properties.md:
--------------------------------------------------------------------------------
1 | ## Vuetable - Properties
2 |
3 | - [append-params](#-append-params)
4 | - [api-mode](#-api-mode)
5 | - [api-url](#-api-url)
6 | - [css](#-css)
7 | - [data](#-data)
8 | - data-manager
9 | - [data-path](#-data-path)
10 | - data-total
11 | - [detail-row-component](#-detail-row-component)
12 | - [detail-row-transition](#-detail-row-transition)
13 | - [fields](#-fields)
14 | - [http-fetch](#-http-fetch)
15 | - [http-options](#-http-options)
16 | - [http-method](#-http-method)
17 | - [initial-page](#-initial-page)
18 | - [load-on-start](#-load-on-start)
19 | - [min-rows](#-min-rows)
20 | - [multi-sort](#-multi-sort)
21 | - [multi-sort-key](#-multi-sort-key)
22 | - [no-data-template](#-no-data-template)
23 | - [pagination-path](#-pagination-path)
24 | - [per-page](#-per-page)
25 | - [query-params](#-query-params)
26 | - [reactive-api-url](#-reactive-api-url)
27 | - [render-icon](#-render-icon)
28 | - [row-class](#-row-class)
29 | - [show-sort-icons](#-show-sort-icons)
30 | - [sort-order](#-sort-order)
31 | - [table-height](#-table-height)
32 | - [track-by](#-track-by)
33 |
34 | ### # api-mode
35 | - type: _Boolean_
36 | - default: `true`
37 | - description
38 |
39 | By default, Vuetable will load the data from and send the request to the API endpoint specified in `api-url`. If you prefer to
40 | supply your own data instead of automatically requesting the data from server, you have to set `api-mode` to `false`. Then, pass
41 | the data via `data` prop.
42 |
43 | Please note that disabling `api-mode` (by setting it to `false`) will also **disable** pagination, sorting, and filtering functions.
44 |
45 | > __Note__
46 | > Setting `api-mode` to `false` is not recommended. It will not scale well when you have to handle a large dataset
47 | > yourself instead of letting database manager handles it for you.
48 |
49 | ### # api-url
50 | - works in `api-mode` only
51 | - type: _String_
52 | - default: `''` _(empty string)_
53 | - description
54 |
55 | The URL of the api endpoint that Vuetable will interact with. If the API supports sorting, filtering, pagination of the data,
56 | Vuetable can automatically append appropriate information to the server via query string.
57 |
58 | ### # reactive-api-url
59 | - works in `api-mode` only
60 | - type: _Boolean_
61 | - default: `true`
62 | - description
63 |
64 | Tells Vuetable whether it should watch for the change in `api-url` prop and refresh the data automatically.
65 |
66 | ### # fields
67 | - type: _Array_
68 | - default: _none_
69 | - required: _true_
70 | - description
71 |
72 | Array of field definition that Vuetable will be used to map to the data structure in order to render the table for presentation.
73 |
74 | ### # data
75 | - type: _Array_ | _Object_
76 | - default: `null`
77 | - description
78 |
79 | The data that Vuetable will be used to render the table when `api-mode` is set to `false`.
80 |
81 | __New in v1.7__
82 | 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)).
83 |
84 | > __Note__
85 | > The prop only works when `api-mode` is `false`.
86 |
87 | ### # data-manager (v1.7)
88 | - type: _Function_
89 | - default: `null`
90 | - description
91 |
92 | [TODO]
93 |
94 | > __Note__
95 | > The prop only works when `api-mode` is `false`.
96 |
97 | ### # data-path
98 | - works in `api-mode` only
99 | - type: _String_
100 | - default: `data`
101 | - description
102 |
103 | The path inside the data structure that actually contains the data. If the data is at the root of the structure, set
104 | this prop to empty string, e.g. `data-path=""`.
105 |
106 | ### # data-total (v1.7)
107 | - type: _Number_
108 | - default:
109 | - description
110 |
111 | [TODO]
112 |
113 | > __Note__
114 | > The prop only works when `api-mode` is `false`.
115 |
116 | ### # pagination-path
117 | - works in `api-mode` only
118 | - type: _String_
119 | - default: `links.pagination`
120 | - description
121 |
122 | The pagination path inside the data structure that contains the pagination information. If the your data from the server
123 | does not have pagination information, you should set the prop to empty string, e.g. `pagination-path=""`, to suppress
124 | Vuetable warning.
125 |
126 | ### # load-on-start
127 | - works in `api-mode` only
128 | - type: _Boolean_
129 | - default: `true`
130 | - required: _true_
131 | - description
132 |
133 | Whether Vuetable should immediately load the data from the server.
134 |
135 | ### # append-params
136 | - works in `api-mode` only
137 | - type: _Object_
138 | - default: `{}` _(empty object)_
139 | - description
140 |
141 | Additional parameters that Vuetable should append to the query string when requesting data from the server.
142 |
143 | See also: [Appending Other Parameters to the Query String](#)
144 |
145 | ### # query-params
146 | - works in `api-mode` only
147 | - type: _Object_
148 | - default:
149 | ```
150 | {
151 | sort: 'sort',
152 | page: 'page',
153 | perPage: 'per_page'
154 | }
155 | ```
156 | - description
157 |
158 | 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
159 | specified them via this prop.
160 |
161 | See also: [Sorting, Paging, and Page Sizing of Data](#)
162 |
163 | ### # http-fetch (v1.7)
164 | - works in `api-mode` only
165 | - type: _Function_
166 | - default: `null`
167 | - description:
168 |
169 | Allow specifying external http request function to fetch the data via AJAX. If `null`, Vuetable will fallback to using `axios` internally.
170 |
171 | If specified, Vuetable will call the given function passing `apiUrl` and already constructed `httpOptions` to the function.
172 |
173 | 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.
174 |
175 | See `loadData` and `fetch` methods in `Vuetable.vue` source code if you're confused.
176 |
177 | Here's an example using `vue-resource`
178 | ```javascript
179 | //...
180 | myFetch(apiUrl, httpOptions) {
181 | return Vue.$http.get(apiUrl, httpOptions)
182 | },
183 | //...
184 | ```
185 |
186 | ### # http-options
187 | - works in `api-mode` only
188 | - type: _Object_
189 | - default: `{}` _(empty object)_
190 | - description
191 |
192 | Allow passing additional options to the server during AJAX call. Internally, Vuetable uses [`axios`](https://github.com/mzabriskie/axios)
193 | to handle AJAX request.
194 |
195 | ### # http-method
196 | - works in `api-mode` only
197 | - type: _String_
198 | - default: `get`
199 | - description
200 |
201 | Only support `get` or `post` method. Please note that it must be the __lowercase__ string.
202 |
203 | ### # track-by
204 | - type: _String_
205 | - default: `id`
206 | - description
207 |
208 | The key that uses to unqiuely identified each row in the data array to help track the state of detail row and checkbox
209 | features of Vuetable. This is necessary for the detail row and checkbox features to function correctly.
210 |
211 | For detail row feature, whenever the user click to expand the detail row, Vuetable will insert the `id` of that row into
212 | its internal array (`visibleDetailRows`). And when that detail row is hidden, the `id` of that detail row is removed from
213 | the array.
214 |
215 | For checkbox feature, when the user select (checked) a row, Vuetable will insert the `id` of the row into its internal
216 | array (`selectedTo`). And when that row is unselected (unchecked), the `id` of that row is removed from the array.
217 |
218 | See also: [`visibleDetailRows`](#), and [`selectedTo`](#)
219 |
220 | ### # show-sort-icons
221 | - type: _Boolean_
222 | - default: `true`
223 | - description
224 |
225 | Tells Vuetable whether or not icons should be added to `th` elements whenever a given column is used to sort.
226 |
227 | ### # sort-order
228 | - works in `api-mode` only
229 | - type: _Array_
230 | - default: `[]` _(empty array)_
231 | - description
232 |
233 | The default sort order that Vuetable should use when requesting the data from server.
234 |
235 | ### # multi-sort
236 | - works in `api-mode` only
237 | - type: _Boolean_
238 | - default: `false`
239 | - description
240 |
241 | Enable multiple sort columns interaction.
242 |
243 | ### # multi-sort-key
244 | - works in `api-mode` only
245 | - type: _String_
246 | - default: `alt`
247 | - possible values: `alt`, `ctrl`, `shift`, `meta`
248 | - description
249 |
250 | The key to trigger sort colum adding/subtracting when multi-sort is enabled.
251 |
252 | ### # per-page
253 | - works in `api-mode` only
254 | - type: _Number_
255 | - default: `10`
256 | - description
257 |
258 | The number of data to be requested per page.
259 |
260 | ### # initial-page (since v1.7)
261 | - works in `api-mode` only
262 | - type: _Number_
263 | - default: `1`
264 | - description
265 |
266 | The initial page number of data to be requested on the first time.
267 |
268 | ### # css
269 | - type: _Object_
270 | - default:
271 | ```
272 | {
273 | tableClass: 'ui blue selectable celled stackable attached table',
274 | loadingClass: 'loading',
275 | ascendingIcon: 'blue chevron up icon',
276 | descendingIcon: 'blue chevron down icon',
277 | detailRowClass: 'vuetable-detail-row',
278 | handleIcon: 'grey sidebar icon',
279 | sortableIcon: '' // since v1.7
280 | }
281 | ```
282 | - description
283 |
284 | This is where you should override the CSS classes that Vuetable uses to render HTML table that should help you style the table
285 | to your needs.
286 |
287 | See also: [CSS Styling](#)
288 |
289 | ### # render-icon
290 | - type: _Function_
291 | - default: `null`
292 | - description
293 |
294 | 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.
295 |
296 | The following icon rendering in Vuetable will use this provided callback instead of the default one if provided.
297 | - sort icon on the table header `
`
298 | - handle icon of the table column `
`
299 |
300 | The callback will receive two parameters.
301 | 1) the array of CSS `classes`
302 | 2) the optional string `options` expected to be appended to the tag
303 |
304 | See example below:
305 | ```vue
306 |
310 | ```
311 | ```javascript
312 | //...
313 | methods: {
314 | renderBootstrapIcon (classes, options) {
315 | return ``
316 | }
317 | }
318 | ```
319 |
320 | ### # min-rows
321 | - type: _Number_
322 | - default: `0`
323 | - description
324 |
325 | The minimum number of rows that should be displayed when rendering the table.
326 |
327 | If the number of row available is less than the number specified in `min-rows` prop, Vuetable will render empty table rows to
328 | satisfy that minimum rows.
329 |
330 | > __Note__
331 | > The prop only works when `api-mode` is `false`.
332 |
333 | ### # row-class
334 | - type: _String_, _Function_
335 | - default: `''` _(empty string)_
336 | - description
337 |
338 | The CSS class name that will be applied to each table row.
339 |
340 | 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.
341 |
342 | Here is the example on using a method to return the row class for styling.
343 | ```vue
344 |
345 |
346 | :row-class="onRowClass"
347 | >
348 |
349 |
357 | ```
358 |
359 | ### # detail-row-component
360 | - type: _String_
361 | - default: `''` _(empty string)_
362 | - description
363 |
364 | A component name to be used as the content of detail row to be displayed underneath the current row.
365 |
366 | ### # detail-row-transition
367 | - type: _String_
368 | - default: `''` _(empty string)_
369 | - description
370 |
371 | The CSS class to apply to detail row during transition.
372 |
373 | ### # no-data-template
374 | - type: _String_
375 | - default: `''` _(empty string)_
376 | - description
377 |
378 | Template when there are no records in the table. Inserted into table cell `td`
379 |
380 | ### # table-height
381 | - type: _String_
382 | - default: `null`
383 | - description
384 |
385 | When set will enable Vuetable to generate Fixed Header table where if the table body's rows exceeding the specified table height, the table body will be scrollable but the table will stay fixed at the top.
386 |
387 | The fixed header is another HTML table which contain only the header, so table with fixed header should specify width for each column in the [fields definition].
388 |
389 | To disable fixed header, just set `table-height` prop to `null`.
390 |
391 | - see also: [Fixed Header](Fixed-Header)
392 |
--------------------------------------------------------------------------------
/docs/VuetablePagination.md:
--------------------------------------------------------------------------------
1 | ## VuetablePagination
2 |
3 | This component contains only the template and utilizes what are available in `VuetablePaginationMixin`.
4 |
5 | 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.
6 |
7 | ### Uses
8 | - [VuetablePaginationMixin](VuetablePaginationMixin)
9 |
10 |
--------------------------------------------------------------------------------
/docs/VuetablePaginationDropdown.md:
--------------------------------------------------------------------------------
1 | ## VuetablePaginationDropdown
2 |
3 | `VuetablePaginationDropdown` uses `VuetablePaginationMixin`, so all properties, computed properties, methods, and events in `VuetablePaginationMixin` are also available in this class.
4 |
5 | ### Uses
6 | - [VuetablePaginationMixin](VuetablePaginationMixin)
7 |
8 | ### Properties
9 | #### # page-text
10 | - type: _String_
11 | - default: `Page`
12 | - description
13 |
14 | The text to be displayed in the select page dropdown.
15 |
16 | ### Methods
17 | No additional methods
18 |
19 | ### Events
20 |
21 | #### # vuetable-pagination:change-page
22 | - See [VuetablePaginationMixin](VuetablePaginationMixin#-vuetable-paginationchange-page)
23 |
24 | #### # vuetable-pagination:pagination-data
25 | - type: _listen_
26 | - params:
27 | - tablePagination: _Object_ -- pagination information
28 | - description:
29 |
30 | This event will have pagination information in its payload that will be used for rendering of pagination component.
31 |
--------------------------------------------------------------------------------
/docs/VuetablePaginationInfo.md:
--------------------------------------------------------------------------------
1 | ## VuetablePaginationInfo - Properties
2 |
3 | ### Uses
4 | - [VuetablePaginationInfoMixin](VuetablePaginationInfoMixin)
5 |
6 | ### Properties
7 |
8 | _None_
9 |
10 | ### Computed
11 |
12 | _None_
13 |
14 | ### Data
15 |
16 | _None_
17 |
18 | ### Methods
19 |
20 | _None_
21 |
22 | ### Events
23 |
24 | _None_
25 |
26 |
--------------------------------------------------------------------------------
/docs/VuetablePaginationInfoMixin.md:
--------------------------------------------------------------------------------
1 | ## VuetablePaginationInfoMixin
2 |
3 | ### Properties
4 |
5 | #### # css
6 | - type: _Object_
7 | - default:
8 | ```
9 | {
10 | infoClass: 'left floated left aligned six wide column'
11 | }
12 | ```
13 | - description:
14 |
15 | The `css` property holds most of the CSS classes that VuetablePaginationInfo uses in its template.
16 |
17 | #### # info-template
18 | - type: _String_
19 | - default: `Displaying {from} to {to} of {total} items`
20 | - description:
21 |
22 | The template string to be used to display the pagination information.
23 |
24 | Available placeholders
25 | - {from} the starting record number displayed
26 | - {to} the ending record number displayed
27 | - {total} the total number of records available
28 |
29 | #### # no-data-template
30 | - type: _Object_
31 | - default: `No relevant data`
32 | - description:
33 |
34 | The template string to be showned when there is no data to display.
35 |
36 | ### Data
37 |
38 | #### # tablePagination
39 | - type: _Object_
40 | - default: `null`
41 |
42 | The pagination information received from Vuetable.
43 |
44 | ### Computed
45 |
46 | #### # paginationInfo
47 | - params: _none_
48 | - return: _String_
49 |
50 | The actual pagination information to be displayed after replacing all the placeholders with corresponding values.
51 |
52 | ### Methods
53 |
54 | #### # setPaginationData
55 | - params:
56 | - tablePagination: _Object_ -- pagination information
57 | - description
58 |
59 | Setting the `tablePagination` data to be used when rendering pagination component.
60 |
61 | #### # resetData
62 | - params: _none_
63 | - description
64 |
65 | This method will set `tablePagination` to null.
66 |
67 | ### Events
68 |
69 | _None_
70 |
--------------------------------------------------------------------------------
/docs/VuetablePaginationMixin.md:
--------------------------------------------------------------------------------
1 | ## VuetablePaginationMixin
2 |
3 | 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.
4 |
5 | ### Properties
6 |
7 | #### # css
8 | - type: _Object_
9 | - default:
10 | ```javascript
11 | {
12 | wrapperClass: 'ui right floated pagination menu',
13 | activeClass: 'active large',
14 | disabledClass: 'disabled',
15 | pageClass: 'item',
16 | linkClass: 'icon item',
17 | paginationClass: 'ui bottom attached segment grid',
18 | paginationInfoClass: 'left floated left aligned six wide column',
19 | dropdownClass: 'ui search dropdown',
20 | icons: {
21 | first: 'angle double left icon',
22 | prev: 'left chevron icon',
23 | next: 'right chevron icon',
24 | last: 'angle double right icon',
25 | }
26 | }
27 | ```
28 | - description
29 |
30 | The `css` property holds most of the CSS classes that VuetablePagination uses in its template.
31 |
32 | #### # on-each-side
33 | - type: _Number_
34 | - default: `2`
35 | - description
36 |
37 | The value of this property specifies the slide size on each side of the center.
38 |
39 | ### Computed
40 |
41 | #### # totalPage
42 | - return: _Number_
43 | - description
44 |
45 | The total number of available pages. This value is taken from the `last_page` field of pagination information.
46 |
47 | #### # isOnFirstPage
48 | - return: _Boolean_
49 | - description
50 |
51 | Returns `true` if the current page number is the first page; otherwise, returns `false`.
52 |
53 | #### # isOnLastPage
54 | - return: _Boolean_
55 | - description
56 |
57 | Returns `true` if the current page number is the last page; otherwise, returns `false`.
58 |
59 | #### # notEnoughPages
60 | - return: _Boolean_
61 | - description
62 |
63 | Determine if the total number of pages is enough to be displayed without sliding.
64 |
65 | #### # windowSize
66 | - return: _Number_
67 | - description
68 |
69 | The size of the sliding window calculating from `on-each-side` * 2 + 1.
70 |
71 | #### # windowStart
72 | - return: _Number_
73 | - description
74 |
75 | Return the first page number to be shown on the leftmost.
76 |
77 | ### Data
78 | #### # tablePagination
79 | - type: _Object_
80 | - default: `null`
81 |
82 | The pagination information received from Vuetable.
83 |
84 | ### Methods
85 |
86 | #### # isCurrentPage
87 | - params:
88 | - page: _Number_
89 | - description
90 |
91 | Determine if the given page number is the current page.
92 |
93 | #### # setPaginationData
94 | - params:
95 | - tablePagination: _Object_ -- pagination information
96 | - description
97 |
98 | Setting the `tablePagination` data to be used when rendering pagination component.
99 |
100 | #### # resetData
101 | - params: _none_
102 | - description
103 |
104 | This method will set `tablePagination` to null.
105 |
106 | ### Events
107 |
108 | #### # vuetable-pagination:change-page
109 | - type: _emit_
110 | - payload:
111 | - page: _Number_, _String_
112 | - description:
113 |
114 | This event was fired when the user clicks on any pagination item requesting data for that given page number.
115 |
--------------------------------------------------------------------------------
/docs/_sidebar.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | - Vuetable
4 | - [Fields Definition](Fields-Definition)
5 | - [Callback / Formatter](Callbacks)
6 | - [Special Fields](Special-Fields)
7 | - [Row Identifier](Row-Identifier)
8 | - [Data Format JSON](Data-Format-JSON)
9 | - [Sorting](Sorting)
10 | - [Overriding Default Query String](Overriding-Default-Query-String)
11 | - [Data Transformation](Data-Transformation)
12 | - [Pagination](Pagination)
13 | - [Detail Row](Detail-Row)
14 | - [Fixed Header](Fixed-Header)
15 | - [CSS Styling](CSS-Styling)
16 | - [Tutorial](https://github.com/ratiw/vuetable-2-tutorial/wiki)
17 | - [FAQ](FAQ)
18 |
19 | - Components API
20 | - Vuetable
21 | + [Properties](Vuetable-Properties)
22 | + [Computed properties](Vuetable-Computed)
23 | + [Data](Vuetable-Data)
24 | + [Methods](Vuetable-Methods)
25 | + [Events](Vuetable-Events)
26 |
27 | - [VuetablePagination](VuetablePagination)
28 |
29 | - [VuetablePaginationMixin](VuetablePaginationMixin)
30 |
31 | - [VuetablePaginationDropdown](VuetablePaginationDropdown)
32 |
33 | - [VuetablePaginationInfo](VuetablePaginationInfo)
34 |
35 | - [VuetablePaginationInfoMixin](VuetablePaginationInfoMixin)
36 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | vue2
8 |
9 |
10 |
68 |
69 |
70 |
71 |
72 |