link管理
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
高大的卤蛋 · Vue 3 & Pinia 状态管理（3） ...· 2 天前 · |
|
|
坚强的啄木鸟 · vue datepicker默认值 - ...· 昨天 · |
|
|
好帅的楼梯 · vue中element的DatePicker ...· 昨天 · |
|
|
绅士的大象 · vue element-ui ...· 昨天 · |
|
|
难过的打火机 · VUE自定义(有限)库存日历插件 - 刘家三胖 · 昨天 · |
|
|
才高八斗的饺子 · 迎战“五一”小长假——江苏备足文旅大餐，为提 ...· 2 月前 · |
|
|
胡子拉碴的小刀 · Microsoft ...· 3 月前 · |
|
|
私奔的牛腩 · C++__vs2017配置opencv_遇到 ...· 3 月前 · |
|
|
任性的沙发 · fine_conf_entity可视化配置- ...· 7 月前 · |
| 1 |
# Vue Tables 2
|
| 3 |
> Breaking change notice: As of version 1.2.0, multiple templates and\or themes are supported. If you were using the `customTemplate` option, please refer to the documentation below.
|
| 5 |
[
](
https://badge.fury.io/js/vue-tables-2
) [
](
https://github.com/matfish2/vue-tables-2/stargazers
) [
](
https://raw.githubusercontent.com/matfish2/vue-tables-2/master/LICENSE
) [
](
https://www.npmjs.com/package/vue-tables-2
) [
](
https://travis-ci.org/matfish2/vue-tables-2
)
|
| 7 |
[
Click here
](
https://jsfiddle.net/matfish2/jfa5t4sm/
) to see it in action and fiddle with the various [
options
](
#options
)
|
| 9 |
-
[
Usage
](
#usage
)
|
| 10 |
-
[
Dependencies
](
#dependencies
)
|
| 11 |
-
[
Installation
](
#installation
)
|
| 12 |
-
[
Client Side
](
#client-side
)
|
| 13 |
-
[
Server Side
](
#server-side
)
|
| 14 |
-
[
Implementations
](
#implementations
)
|
| 15 |
-
[
Templates
](
#templates
)
|
| 16 |
-
[
Scoped Slots
](
#scoped-slots
)
|
| 17 |
-
[
Virtual DOM Functions
](
#virtual-dom-functions
)
|
| 18 |
-
[
Vue Components
](
#vue-components
)
|
| 19 |
-
[
Child Rows
](
#child-rows
)
|
| 20 |
-
[
Methods
](
#methods
)
|
| 21 |
-
[
Events
](
#events
)
|
| 22 |
-
[
Custom Filters
](
#custom-filters
)
|
| 23 |
-
[
Client Side Filters
](
#client-side-filters
)
|
| 24 |
-
[
Server Side Filters
](
#server-side-filters
)
|
| 25 |
-
[
List Filters
](
#list-filters
)
|
| 26 |
-
[
Columns Visibility
](
#columns-visibility
)
|
| 27 |
-
[
Custom Sorting
](
#custom-sorting
)
|
| 28 |
-
[
Client Side Sorting
](
#client-side-sorting
)
|
| 29 |
-
[
Server Side Sorting
](
#server-side-sorting
)
|
| 30 |
-
[
Multiple Sorting
](
#multiple-sorting
)
|
| 31 |
-
[
Slots
](
#slots
)
|
| 32 |
-
[
Options
](
#options
)
|
| 33 |
-
[
VueJS 1
](
#vuejs-1
)
|
| 35 |
# Usage
|
| 37 |
## Dependencies
|
| 39 |
*
Vue.js (>=2.0)
|
| 40 |
*
Server Side: axios OR vue-resource (>=0.9.0) OR jQuery for the AJAX requests
|
| 42 |
## Compatibility
|
| 44 |
*
Vuex (>=2.0)
|
| 45 |
*
Bootstrap 3 / Bootstrap 4 / Bulma
|
| 47 |
## Installation
|
| 49 |
```bash
|
| 50 |
npm install vue-tables-2
|
| 51 |
```
|
| 53 |
Require the script:
|
| 55 |
```js
|
| 56 |
import {ServerTable, ClientTable, Event} from 'vue-tables-2';
|
| 57 |
```
|
| 59 |
### Register the component(s)
|
| 61 |
```js
|
| 62 |
Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);
|
| 63 |
```
|
| 65 |
Or/And:
|
| 67 |
```js
|
| 68 |
Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);
|
| 69 |
```
|
| 71 |
*
`useVuex`
is a boolean indicating whether to use
`vuex`
for state management, or manage state on the component itself.
|
| 72 |
If you set it to
`true`
you must add a
`name`
prop to your table, which will be used to register a module on your store.
|
| 73 |
Use
`vue-devtools`
to look under the hood and see the current state.
|
| 75 |
*
`theme`
Use this option to select a CSS framework. Options:'bootstrap3','bootstrap4','bulma'.
|
| 76 |
You can also pass you own theme. Use a file from the
`themes`
folder as boilerplate.
|
| 78 |
*
`template`
Use this option to select an HTML template. Currently supported: 'default', 'footerPagination'
|
| 79 |
You can also pass your own template. Use a file from the
`templates`
folder as boilerplate.
|
| 81 |
> Note: You may need to add a little styling of your own.
|
| 82 |
If you come up with some improvments to the templates or themes, which brings them closer to the optimum, you are welcome to send a PR.
|
| 84 |
> Note: The template is written using `jsx`, so you will need a [jsx compiler](https://github.com/vuejs/babel-plugin-transform-vue-jsx) to modify it (the package is using the compiled version under the `compiled` folder).
|
| 86 |
### Using Script Tag
|
| 88 |
If you are not using NPM you can also import the minified version found in
`dist/vue-tables-2.min.js`
.
|
| 89 |
Copy the file into your project and import it:
|
| 91 |
```html
|
| 92 |
<script src="/path/to/vue-tables-2.min.js"></script>
|
| 93 |
```
|
| 95 |
This will expose a global
`VueTables`
object containing
`ClientTable`
,
`ServerTable`
and
`Event`
as properties.
|
| 97 |
E.g:
|
| 99 |
```js
|
| 100 |
Vue.use(VueTables.ClientTable);
|
| 101 |
```
|
| 103 |
## Client Side
|
| 105 |
Add the following element to your page wherever you want it to render.
|
| 106 |
Make sure to wrap it with a parent element you can latch your vue instance into.
|
| 108 |
```html
|
| 109 |
<div id="people">
|
| 110 |
<v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table>
|
| 111 |
</div>
|
| 112 |
```
|
| 114 |
Create a new Vue instance (You can also nest it within other components). An example works best to illustrate the syntax:
|
| 116 |
```js
|
| 117 |
new Vue({
|
| 118 |
el: "#people",
|
| 119 |
data: {
|
| 120 |
columns: ['id', 'name', 'age'],
|
| 121 |
tableData: [
|
| 122 |
{ id: 1, name: "John", age: "20" },
|
| 123 |
{ id: 2, name: "Jane", age: "24" },
|
| 124 |
{ id: 3, name: "Susan", age: "16" },
|
| 125 |
{ id: 4, name: "Chris", age: "55" },
|
| 126 |
{ id: 5, name: "Dan", age: "40" }
|
| 127 |
],
|
| 128 |
options: {
|
| 129 |
// see the options API
|
| 130 |
}
|
| 131 |
}
|
| 132 |
});
|
| 133 |
```
|
| 135 |
You can access the filtered dataset at any given moment by fetching the
`filteredData`
computed property of the table, using
`ref`
as a pointer (
`this.$refs.myTable.filteredData`
);
|
| 137 |
> Important: when loading data asynchronously add a `v-if` conditional to the component along with some `loaded` flag, so it will only compile once the data is attached.
|
| 139 |
## Server side
|
| 141 |
```html
|
| 142 |
<div id="people">
|
| 143 |
<v-server-table url="/people" :columns="columns" :options="options"></v-server-table>
|
| 144 |
</div>
|
| 145 |
```
|
| 147 |
Javascript:
|
| 149 |
```js
|
| 150 |
new Vue({
|
| 151 |
el: "#people",
|
| 152 |
data: {
|
| 153 |
columns: ['id', 'name', 'age'],
|
| 154 |
options: {
|
| 155 |
// see the options API
|
| 156 |
}
|
| 157 |
}
|
| 158 |
});
|
| 159 |
```
|
| 161 |
All the data is passed in the following GET parameters:
|
| 162 |
*
`query`
,
|
| 163 |
*
`limit`
,
|
| 164 |
*
`page`
,
|
| 165 |
*
`orderBy`
,
|
| 166 |
*
`ascending`
,
|
| 167 |
*
`byColumn`
.
|
| 169 |
You need to return a JSON object with two properties:
|
| 170 |
*
`data`
:
`array`
- An array of row objects with identical keys.
|
| 171 |
*
`count`
:
`number`
- Total count before limit.
|
| 173 |
> Note: If you are calling a foreign API or simply want to use your own keys, refer to the `responseAdapter` option.
|
| 175 |
### Custom Request Function
|
| 177 |
by default the library supports
`JQuery`
,
`vue-resource`
and
`axios`
as ajax libraries.
|
| 178 |
If you wish to use a different library, or somehow alter the request (e.g add auth headers, or manipulate the data) use the
`requestFunction`
option. E.g:
|
| 180 |
```js
|
| 181 |
options: {
|
| 182 |
requestFunction: function (data) {
|
| 183 |
return axios.get(this.url, {
|
| 184 |
params: data
|
| 185 |
}).catch(function (e) {
|
| 186 |
this.dispatch('error', e);
|
| 187 |
}.bind(this));
|
| 188 |
}
|
| 189 |
}
|
| 190 |
```
|
| 192 |
### Implementations
|
| 194 |
I have included [
an Eloquent implementation
](
https://github.com/matfish2/vue-tables/tree/master/server/PHP
) for Laravel Users.
|
| 196 |
If you happen to write other implementations for PHP or other languages, a pull request would be most welcome, under the following guidelines:
|
| 198 |
1.
Include the class under
`./server/{language}`
.
|
| 199 |
1.
Name it according to convention:
`{concrete}VueTables`
.
|
| 200 |
1.
if this is the first implementation in this language add an interface similar to the one found in the PHP folder.
|
| 201 |
1.
Have it implement the interface.
|
| 202 |
1.
TEST IT.
|
| 204 |
# Templates
|
| 206 |
Templates allow you to wrap your cells with vue-compiled HTML. It can be used in any of the following ways:
|
| 208 |
## Scoped Slots
|
| 209 |
If you are using Vue 2.1.0 and above, you can use [
scoped slots
](
https://vuejs.org/v2/guide/components.html#Scoped-Slots
) to create templates:
|
| 211 |
```vue
|
| 212 |
<v-client-table :data="entries" :columns="['id', 'name' ,'age', 'edit']">
|
| 213 |
<a slot="edit" slot-scope="props" class="fa fa-edit" :href="edit(props.row.id)"></a>
|
| 214 |
</v-client-table>
|
| 215 |
```
|
| 217 |
Note: You can get the index of the current row relative to the entire data set using
`props.index`
|
| 219 |
## Virtual DOM Functions
|
| 221 |
The syntax for Virtual DOM function is similar to that of
`render`
functions, as it leverages the virtual DOM to bind the templates into the main table template.
|
| 223 |
If you choose this option, it is recommended to use JSX, which closely resembles HTML, to write the templates (To compile
`jsx`
you need to install the [
vue jsx transform
](
https://github.com/vuejs/babel-plugin-transform-vue-jsx
)).
|
| 225 |
E.g.:
|
| 227 |
```js
|
| 228 |
data: {
|
| 229 |
columns: ['erase'],
|
| 230 |
options: {
|
| 231 |
...
|
| 232 |
templates: {
|
| 233 |
erase: function (h, row, index) {
|
| 234 |
return <delete id = {row.id}>< /delete>
|
| 235 |
}
|
| 236 |
}
|
| 237 |
...
|
| 238 |
}
|
| 239 |
}
|
| 240 |
```
|
| 242 |
The first parameter is the
`h`
scope used to compile the element. It MUST be called
`h`
.
|
| 243 |
The second parameter gives you access to the row data.
|
| 244 |
In addition a
`this`
context will be available, which refers to the root vue instance. This allows you to call your own instance methods directly.
|
| 245 |
Note: when using a
`.vue`
file
`jsx`
must be imported from a dedicated
`.jsx`
file in order to compile correctly. E.g
|
| 247 |
edit.jsx
|
| 249 |
```js
|
| 250 |
export default function(h, row, index) {
|
| 251 |
return <a class='fa fa-edit' href={'#/' + row.id + '/edit'}></a>
|
| 252 |
}
|
| 253 |
```
|
| 255 |
app.vue
|
| 257 |
```html
|
| 258 |
<script>
|
| 259 |
import edit from './edit'
|
| 261 |
templates: {
|
| 262 |
edit
|
| 263 |
}
|
| 264 |
</script>
|
| 265 |
```
|
| 267 |
## Vue Components
|
| 268 |
Another option to for creating templates is to encapsulate the template within a component and pass the name. The component must have a
`data`
property, which will receive the row object. You can also add an optional
`index`
prop, to get the non-zero-based index of the current row relative to the entire dataset. E.g:
|
| 270 |
```js
|
| 271 |
Vue.component('delete', {
|
| 272 |
props: ['data', 'index'],
|
| 273 |
template: `<a class='delete' @click='erase'></a>`,
|
| 274 |
methods: {
|
| 275 |
erase() {
|
| 276 |
let id = this.data.id; // delete the item
|
| 277 |
}
|
| 278 |
}
|
| 279 |
});
|
| 280 |
```
|
| 282 |
```js
|
| 283 |
options: {
|
| 284 |
...
|
| 285 |
templates: {
|
| 286 |
erase: 'delete'
|
| 287 |
}
|
| 288 |
...
|
| 289 |
}
|
| 290 |
```
|
| 292 |
This method allows you to also use single page .vue files for displaying the template data
|
| 293 |
E.g:
|
| 294 |
edit.vue
|
| 296 |
```html
|
| 297 |
<template>
|
| 298 |
<a class="fa fa-edit" :href="edit(data.id)">Edit</a>
|
| 299 |
</template>
|
| 301 |
<script>
|
| 302 |
export default {
|
| 303 |
props: ['data', 'index'],
|
| 304 |
}
|
| 305 |
</script>
|
| 306 |
```
|
| 308 |
app.vue
|
| 310 |
```html
|
| 311 |
<script>
|
| 312 |
import edit from './edit'
|
| 314 |
templates: {
|
| 315 |
edit
|
| 316 |
}
|
| 317 |
</script>
|
| 318 |
```
|
| 320 |
**Important**
:
|
| 321 |
*
To use components in your templates they must be declared
**globally**
using
`Vue.component()`
.
|
| 322 |
*
Templates must be declared in the
`columns`
prop
|
| 324 |
> Note: Don't include HTML directly in your dataset, as it will be parsed as plain text.
|
| 326 |
# Child Rows
|
| 328 |
Child rows allow for a custom designed output area, namely a hidden child row underneath each row, whose content you are free to set yourself.
|
| 330 |
When using the
`childRow`
option you must pass a unqiue
`id`
property for each row, which is used to track the current state.
|
| 331 |
If your identifer key is not
`id`
, use the
`uniqueKey`
option to set it.
|
| 333 |
The syntax is identincal to that of templates:
|
| 335 |
Using Scoped Slots:
|
| 337 |
```vue
|
| 338 |
<template slot="child_row" scope="props">
|
| 339 |
<div><b>First name:</b> {{props.row.first_name}}</div>
|
| 340 |
<div><b>Last name:</b> {{props.row.last_name}}</div>
|
| 341 |
</template>
|
| 342 |
```
|
| 344 |
Using a function and (optional) JSX:
|
| 346 |
```js
|
| 347 |
options:{
|
| 348 |
...
|
| 349 |
childRow: function(h, row) {
|
| 350 |
return <div>My custom content for row {row.id}</div>
|
| 351 |
}
|
| 352 |
...
|
| 353 |
}
|
| 354 |
```
|
| 356 |
Using a component name or a
`.vue`
file: (See [
Templates
](
#templates
) above for a complete example)
|
| 358 |
```js
|
| 359 |
options:{
|
| 360 |
...
|
| 361 |
childRow: 'row-component'
|
| 362 |
...
|
| 363 |
}
|
| 364 |
```
|
| 366 |
When the plugin detects a
`childRow`
function it appends the child rows and prepends to each row an additional toggler column with a
`span`
you can design to your liking.
|
| 368 |
Example styling (also found in
`style.css`
):
|
| 369 |
```css
|
| 370 |
.VueTables__child-row-toggler {
|
| 371 |
width: 16px;
|
| 372 |
height: 16px;
|
| 373 |
line-height: 16px;
|
| 374 |
display: block;
|
| 375 |
margin: auto;
|
| 376 |
text-align: center;
|
| 377 |
}
|
| 379 |
.VueTables__child-row-toggler--closed::before {
|
| 380 |
content: "+";
|
| 381 |
}
|
| 383 |
.VueTables__child-row-toggler--open::before {
|
| 384 |
content: "-";
|
| 385 |
}
|
| 386 |
```
|
| 388 |
You can also trigger the child row toggler programmtically. E.g, to toggle the row with an id of 4:
|
| 390 |
```js
|
| 391 |
this.$refs.myTable.toggleChildRow(4); // replace myTable with your own ref
|
| 392 |
```
|
| 394 |
# Methods
|
| 396 |
Call methods on your instance using the [
`ref`
](
http://vuejs.org/api/#ref
) attribute.
|
| 398 |
*
`setPage(page)`
|
| 399 |
*
`setLimit(recordsPerPage)`
|
| 400 |
*
`setOrder(column, isAscending)`
|
| 401 |
*
`setFilter(query)`
-
`query`
should be a string, or an object if
`filterByColumn`
is set to
`true`
.
|
| 402 |
*
`refresh()`
Refresh the table. Server component only
|
| 403 |
*
`getOpenChildRows(rows = null)`
|
| 404 |
If no argument is supplied returns all open child row components in the page.
|
| 405 |
To limit the returned dataset you can pass the
`rows`
arguemnt, which should be an array of unique identifiers.
|
| 407 |
Note:
|
| 408 |
A. This method is only to be used when the child row is a component.
|
| 409 |
B. In order for this method to work you need to set the
`name`
property on your component to
`ChildRow`
|
| 411 |
### Events
|
| 413 |
Using Custom Events (For child-parent communication):
|
| 415 |
```html
|
| 416 |
<v-server-table :columns="columns" url="/getData" @loaded="onLoaded"></v-server-table>
|
| 417 |
```
|
| 419 |
*
Using the event bus:
|
| 421 |
```js
|
| 422 |
Event.$on('vue-tables.loaded', function (data) {
|
| 423 |
// Do something
|
| 424 |
});
|
| 425 |
```
|
| 427 |
Note: If you are using the bus and want the event to be "namespaced", so you can distinguish bewteen different tables on the same page, use the
`name`
prop.
|
| 428 |
The event name will then take the shape of
`vue-tables.tableName.eventName`
.
|
| 430 |
*
Using Vuex:
|
| 432 |
```js
|
| 433 |
mutations: {
|
| 434 |
['tableName/LOADED'](state, data) {
|
| 435 |
// Do something
|
| 436 |
}
|
| 437 |
}
|
| 438 |
```
|
| 440 |
*
`vue-tables.filter`
/
`tableName/FILTER`
|
| 442 |
Fires off when a filter is changed. Sends through the name and value in case of column filter, or just the value in case of the general filter
|
| 444 |
*
`vue-tables.filter::colName`
|
| 446 |
Same as above, only this one has the name attached to the event itself, and only sends through the value.
|
| 447 |
Releveant only for non-vuex tables with
`filterByColumn`
set to true.
|
| 449 |
*
`vue-tables.sorted / `
tableName/SORTED`
|
| 451 |
Fires off when the user sorts the table. Sends through the column and direction.
|
| 452 |
In case of multisorting (Shift+Click) an array will be sent sorted by precedence.
|
| 454 |
*
`vue-tables.loading`
/
`tableName/LOADING`
(server)
|
| 456 |
Fires off when a request is sent to the server. Sends through the request data.
|
| 458 |
*
`vue-tables.loaded`
/
`tableName/LOADED`
(server)
|
| 460 |
Fires off after the response data has been attached to the table. Sends through the response.
|
| 462 |
You can listen to those complementary events on a parent component and use them to add and remove a
*loading indicator*
, respectively.
|
| 464 |
*
`vue-tables.pagination`
/
`tableName/PAGINATION`
|
| 466 |
Fires off whenever the user changes a page. Send through the page number.
|
| 468 |
*
`vue-tables.limit`
/
`tableName/LIMIT`
|
| 470 |
Fires off when the per page limit is changed
|
| 472 |
*
`vue-tables.error`
/
`tableName/ERROR`
(server)
|
| 474 |
Fires off if the server returns an invalid code. Sends through the error
|
| 476 |
*
`vue-tables.row-click`
/
`tableName/ROW_CLICK`
|
| 478 |
Fires off after a row was clicked. sends through the row and the mouse event.
|
| 479 |
When using the client component, if you want to recieve the
*original*
row, so that it can be directly mutated, you must have a unique row identifier.
|
| 480 |
The key defaults to
`id`
, but can be changed using the
`uniqueKey`
option.
|
| 482 |
# Custom Filters
|
| 484 |
Custom filters allow you to integrate your own filters into the plugin using Vue's events system.
|
| 486 |
## Client Side Filters
|
| 488 |
1.
use the
`customFilters`
option to declare your filters, following this syntax:
|
| 490 |
```js
|
| 491 |
customFilters: [{
|
| 492 |
name: 'alphabet',
|
| 493 |
callback: function (row, query) {
|
| 494 |
return row.name[0] == query;
|
| 495 |
}
|
| 496 |
}]
|
| 497 |
```
|
| 499 |
1.
Using the event bus:
|
| 501 |
```js
|
| 502 |
Event.$emit('vue-tables.filter::alphabet', query);
|
| 503 |
```
|
| 505 |
1.
Using
`vuex`
:
|
| 507 |
```js
|
| 508 |
this.$store.commit('myTable/SET_CUSTOM_FILTER', {filter:'alphabet', value:query})
|
| 509 |
```
|
| 511 |
## Server Side Filters
|
| 513 |
A. use the
`customFilters`
option to declare your filters, following this syntax:
|
| 515 |
```js
|
| 516 |
customFilters: ['alphabet','age-range']
|
| 517 |
```
|
| 519 |
B. the same as in the client component.
|
| 521 |
# List Filters
|
| 523 |
When filtering by column (option
`filterByColumn:true`
), the
`listColumns`
option allows for filtering columns whose values are part of a list, using a select box instead of the default free-text filter.
|
| 525 |
For example:
|
| 527 |
```js
|
| 528 |
options: {
|
| 529 |
filterByColumn: true,
|
| 530 |
listColumns: {
|
| 531 |
animal: [{
|
| 532 |
id: 1,
|
| 533 |
text: 'Dog'
|
| 534 |
},
|
| 535 |
{
|
| 536 |
id: 2,
|
| 537 |
text: 'Cat',
|
| 538 |
hide:true
|
| 539 |
},
|
| 540 |
{
|
| 541 |
id: 3,
|
| 542 |
text: 'Tiger'
|
| 543 |
},
|
| 544 |
{
|
| 545 |
id: 4,
|
| 546 |
text: 'Bear'
|
| 547 |
}
|
| 548 |
]
|
| 549 |
}
|
| 550 |
}
|
| 551 |
```
|
| 553 |
> Note: The values of this column should correspond to the `id`'s passed to the list.
|
| 554 |
They will be automatically converted to their textual representation.
|
| 556 |
> Adding `hide:true` to an item, will exclude it from the options presented to the user
|
| 558 |
# Columns Visibility
|
| 560 |
If you would like to enable the user to control the columns' visibility set the
`columnsDropdown`
option to
`true`
.
|
| 561 |
This will add a dropdown button to the left of the per-page control. The drop down will contain a list of the columns with checkboxes to toggle visibility.
|
| 563 |
The
`columnsDropdown`
option can work in conjunction with
`columnsDisplay`
. The rule is that as long as the user hasn't toggled a column himself, the rules you have declared in
`columnsDisplay`
takes precedence. Once the user toggled a column, he is in charge of columns' visibility, and the settings of
`columnsDisplay`
are disregarded.
|
| 565 |
# Custom Sorting
|
| 567 |
## Client Side Sorting
|
| 569 |
Sometimes you may one to override the default sorting logic which is applied uniformly to all columns.
|
| 570 |
To do so use the
`customSorting`
option. This is an object that recieves custom logic for specific columns.
|
| 571 |
E.g, to sort the
`name`
column by the last character:
|
| 573 |
```js
|
| 574 |
customSorting: {
|
| 575 |
name: function (ascending) {
|
| 576 |
return function (a, b) {
|
| 577 |
var lastA = a.name[a.name.length - 1].toLowerCase();
|
| 578 |
var lastB = b.name[b.name.length - 1].toLowerCase();
|
| 580 |
if (ascending)
|
| 581 |
return lastA >= lastB ? 1 : -1;
|
| 583 |
return lastA <= lastB ? 1 : -1;
|
| 584 |
}
|
| 585 |
}
|
| 586 |
}
|
| 587 |
```
|
| 589 |
## Server Side Sorting
|
| 591 |
This depends entirely on your backend implemetation as the library sends the sorting direction trough the request.
|
| 593 |
# Multiple Sorting
|
| 595 |
Multiple sorting allows you to sort recursively by multiple columns.
|
| 596 |
Simply put, when the primary column (i.e the column the user is currently sorting) has two or more identical items, their order will be determined by a secondary column, and so on, until the list of columns is exhausted.
|
| 598 |
Example usage:
|
| 599 |
```js
|
| 600 |
{
|
| 601 |
...
|
| 602 |
multiSorting: {
|
| 603 |
name: [
|
| 604 |
{
|
| 605 |
column: 'age',
|
| 606 |
matchDir: false
|
| 607 |
},
|
| 608 |
{
|
| 609 |
column: 'birth_date',
|
| 610 |
matchDir: true
|
| 611 |
}
|
| 612 |
]
|
| 613 |
}
|
| 614 |
...
|
| 615 |
}
|
| 616 |
```
|
| 618 |
The above code means that when the user is sorting by
`name`
and identical names are compared, their order will be determined by the
`age`
column. If the ages are also identical the
`birth_date`
column will determine the order.
|
| 619 |
The
`matchDir`
property tells the plugin whether the secondary sorting should match the direction of the primary column (i.e ascending/descending), or not.
|
| 621 |
In addition to programmatically setting the sorting in advance, by default the user can also use Shift+Click to build his own sorting logic in real time.
|
| 622 |
To disable this option set
`clientMultiSorting`
to
`false`
.
|
| 624 |
On the server component this behaviour is disabled by default, because it requires addtional server logic to handle the request.
|
| 625 |
To enable it set
`serverMultiSorting`
to
`true`
. The request will then contain a
`multiSort`
array, if applicable.
|
| 627 |
# Slots
|
| 629 |
Slots allow you to insert you own custom HTML in predefined positions within the component:
|
| 631 |
*
`beforeTable`
: Before the table wrapper. After the controls row
|
| 632 |
*
`beforeFilter`
: Before the global filter (
`filterByColumn: false`
)
|
| 633 |
*
`afterFilter`
: After the global filter
|
| 634 |
*
`beforeLimit`
: Before the per page control
|
| 635 |
*
`afterLimit`
: After the per page control
|
| 636 |
*
`beforeFilters`
: Before the filters row (
`filterByColumn: true`
)
|
| 637 |
*
`afterFilters`
: After the filters row
|
| 638 |
*
`beforeBody`
: Before the
`<tbody>`
tag
|
| 639 |
*
`afterBody`
: After the
`<tbody>`
tag
|
| 640 |
*
`prependBody`
: Prepend to the
`<tbody>`
tag
|
| 641 |
*
`appendBody`
: Append to the
`<tbody>`
tag
|
| 644 |
In addition to these slots you can insert your own filter HTML in the filters row, or add content to the existing filter, e.g a button (When
`filterByColumn`
is set to
`true`
):
|
| 646 |
A. If you just want your own content make sure that the column is not filterable by omitting it from the
`filterable`
array.
|
| 647 |
Otherwise the slot content will be appended to the native filter.
|
| 649 |
B. Create a slot whose name is formatted
`filter__{column}`
(double underscore).
|
| 651 |
For example, to insert a checkbox on the
`id`
column instead of the normal input filter:
|
| 653 |
```js
|
| 654 |
{
|
| 655 |
filterable:["name","age"] // omit the `id` column
|
| 656 |
}
|
| 657 |
```
|
| 659 |
```html
|
| 660 |
<div slot="filter__id">
|
| 661 |
<input type="checkbox" class="form-control" v-model="allMarked" @change="markAll()">
|
| 662 |
</div>
|
| 663 |
```
|
| 665 |
# Options
|
| 667 |
Options are set in three layers, where the more particular overrides the more general.
|
| 669 |
1. Pre-defined component defaults.
|
| 670 |
2. Applicable user-defined defaults for the global Vue Instance. Passed as the second paramter to the `Use` statement.
|
| 671 |
3. Options for a single table, passed through the `options` prop.
|
| 673 |
Option | Type | Description | Default
|
| 674 |
-------|------|-------------|--------
|
| 675 |
childRow | Function| [See documentation](#child-rows) | `false`
|
| 676 |
childRowTogglerFirst | Boolean | Should the child row be positioned at the first column or the last one | `true`
|
| 677 |
clientMultiSorting | Boolean | Enable multiple columns sorting using Shift + Click on the client component | `true`
|
| 678 |
columnsClasses | Object | Add class(es) to the specified columns.<br> Takes key-value pairs, where the key is the column name and the value is a string of space-separated classes | `{}`
|
| 679 |
columnsDisplay | Object | Responsive display for the specified columns.<br><br> Columns will only be shown when the window width is within the defined limits. <br><br>Accepts key-value pairs of column name and device.<br><br> Possible values are `mobile` (x < 480), `mobileP` (x < 320), `mobileL` (320 <= x < 480), `tablet` (480 <= x < 1024), `tabletP` (480 <= x < 768), `tabletL` (768 <= x < 1024), `desktop` (x >= 1024).<br><br> All options can be preceded by the logical operators min,max, and not followed by an underscore.<br><br>For example, a column which is set to `not_mobile` will be shown when the width of the window is greater than or equal to 480px, while a column set to `max_tabletP` will only be shown when the width is under 768px | `{}`
|
| 680 |
columnsDropdown | Boolean | See [documentation](#columns-visibility) | `false`
|
| 681 |
customFilters | Array | See [documentation](#custom-filters) | `[]`
|
| 682 |
customSorting (client-side) | Object | See [documentation](#custom-sorting) | `{}`
|
| 683 |
dateColumns | Array | Use daterangepicker as a filter for the specified columns (when filterByColumn is set to true).<br><br>Dates should be passed as moment objects, or as strings in conjunction with the toMomentFormat option | `[]`
|
| 684 |
dateFormat (client-side) | String | Format to display date objects. Using [momentjs](https://momentjs.com/) | `DD/MM/YYYY`
|
| 685 |
datepickerOptions | Object | Options for the daterangepicker when using a date filter (see dateColumns) | `{ locale: { cancelLabel: 'Clear' } }`
|
| 686 |
debounce | Number | Number of idle milliseconds (no key stroke) to wait before sending a request. Used to detect when the user finished his query in order to avoid redundant requests (server) or rendering (client) | `500`
|
| 687 |
filterable | Array / Boolean | Filterable columns `true` - All columns. | Set to `false` or an `empty array` to hide the filter(s). Affects also the single filter mode (`filterByColumn:false`)
|
| 688 |
footerHeadings | Boolean | Display headings at the bottom of the table too | `false`
|
| 689 |
headings | Object | Table headings. | Can be either a string or a function, if you wish to inject vue-compiled HTML.<br>E.g: `function(h) { return <h2>Title</h2>}`<br>Note that this example uses jsx, and not HTML.<br>The `this` context inside the function refers to the direct parent of the table instance.<br> If you are using vue 2.1 and above you can also use scoped slots, naming the slot "h__{column}"<br>The default rule is to extract from the first row properties with the underscores become spaces and the first letter capitalized
|
| 690 |
groupBy (client-side) | String | Group rows by a common property. E.g, for a list of countries, group by the `continent` property | `false`
|
| 691 |
headingsTooltips | Object | Table headings tooltips. | Can be either a string or a function, if you wish to inject vue-compiled HTML. Renders as `title` attribute of `<th>`. <br>E.g: `function(h) { return 'Expanded Title'}`<br>The `this` context inside the function refers to the direct parent of the table instance.
|
| 692 |
highlightMatches | Boolean | Highlight matches | `false`
|
| 693 |
initFilters | Object | Set initial values for all filter types: generic, by column or custom.<br><br> Accepts an object of key-value pairs, where the key is one of the following: <br><br>a. "GENERIC" - for the generic filter<br>b. column name - for by column filters.<br>c. filter name - for custom filters. <br><br>In case of date filters the date range should be passed as an object comprised of start and end properties, each being a moment object. | `{}`
|
| 694 |
initialPage | Number | Set the initial page to be displayed when the table loads | 1
|
| 695 |
listColumns | Object | See [documentation](#list-filters) | {}
|
| 696 |
multiSorting (client-side) | Object | See [documentation](#multiple-sotring) | {}
|
| 697 |
orderBy.ascending | Boolean | initial order direction | `orderBy: { ascending:true }`
|
| 698 |
orderBy.column | String | initial column to sort by | Original dataset order
|
| 699 |
pagination.chunk | Number | maximum pages in a chunk of pagination | `pagination: { chunk:10 }`
|
| 700 |
pagination.dropdown | Boolean | use a dropdown select pagination next to the records-per-page list, instead of links at the bottom of the table. | `pagination: { dropdown:false }`
|
| 701 |
params (server-side) | Object | Additional parameters to send along with the request | `{}`
|
| 702 |
perPage | number | Initial records per page | `10`
|
| 703 |
perPageValues | Array | Records per page options | `[10,25,50,100]`
|
| 704 |
requestAdapter (server-side) | Function | Set a custom request format | `function(data) { return data; }`
|
| 705 |
requestFunction (server-side) | Function | Set a custom request function | See documentation
|
| 706 |
requestKeys (server-side) | Object | Set your own request keys | `{ query:'query', limit:'limit', orderBy:'orderBy', ascending:'ascending', page:'page', byColumn:'byColumn' }`
|
| 707 |
responseAdapter (server-side) | Function | Transform the server response to match the format expected by the client. This is especially useful when calling a foreign API, where you cannot control the response on the server-side | `function(resp) { return { data: resp.data, count: resp.count } }`
|
| 708 |
rowClassCallback | Function | Add dynamic classes to table rows.<br><br> E.g function(row) { return `row-${row.id}`} <br><br>This can be useful for manipulating the appearance of rows based on the data they contain | `false`
|
| 709 |
saveState | Boolean | Constantly save table state and reload it each time the component mounts. When setting it to true, use the `name` prop to set an identifier for the table | `false`
|
| 710 |
serverMultiSorting | Boolean | Enable multiple columns sorting using Shift + Click on the server component | `false`
|
| 711 |
skin | String | Space separated table styling classes | `table-striped table-bordered table-hover`
|
| 712 |
sortIcon | String | Sort icon classes | `{ base:'glyphicon', up:'glyphicon-chevron-up', down:'glyphicon-chevron-down', is:'glyphicon-sort' }`
|
| 713 |
sortable | Array | Sortable columns | All columns
|
| 714 |
sortingAlgorithm | Function | define your own sorting algorithm | `function (data, column) { return data.sort(this.getSortFn(column));}`
|
| 715 |
storage | String | Which persistance mechanism should be used when saveState is set to true: `local` - localStorage. `session` - sessionStorage | `local`
|
| 716 |
templates | Object | See [documentation](#templates) | {}
|
| 717 |
texts | Object | see the `texts` object in [defaults.js](https://github.com/matfish2/vue-tables-2/blob/master/lib/config/defaults.js)</code>
|
推荐文章