VueQuintable

VueQuintable is a table wrapper for Vue.js. It is build with bootstrap 4.0. High configurable, easy to use, flexible and responsive.

Demo

Getting Started

These instructions will get you running VueQuintable for your project for development purposes.

Prerequisites

VueQuintable is a vue.js package and uses bootstrap by default. Please install both before using the package. If you want to use ajax functionalities please install axios as it is used by VueQuintable.

npm:

1npm install --save vue bootstrap-vue
2npm install --save axios

yarn:

1yarn add vue bootstrap-vue 
2yarn add axios

Installing

npm:

1npm install --save @quintet/vue-quintable

yarn:

1yarn add @quintet/vue-quintable

Integration

1import Vue from 'vue'
2
3//use bootstrap
4import BootstrapVue from 'bootstrap-vue'
5Vue.use(BootstrapVue)
6//use bootstrap css
7import 'bootstrap/dist/css/bootstrap.css'
8import 'bootstrap-vue/dist/bootstrap-vue.css'
9
10import "@quintet/vue-quintable/dist/vue-quintable.css"
11import VueTable from '@quintet/vue-quintable'
12Vue.use(VueTable);

Use directly in browser

You can either install VueQuintable via bower

1bower install --save https://github.com/sensetence/vue-quintable

or just download the source and include the scripts and styles in dist folder to use VueQuintable for your browser page.

1<script type="text/javascript" src="/path/to/vue/dist/vue.min.js"></script>
2
3<script type="text/javascript" src="/path/to/project/dist/vue-quintable.umd.min.js"></script>
4
5<link rel="stylesheet" href="/path/to/project/dist/vue-quintable.css"></link>

1Vue.use(window["vue-quintable"]);

Features

These points will convince you that VueQuintable is the last table plugin you will ever need

• Responsive columns which will be rendered as additional rows
• Pagination
• Sort/Multi-sort
• Search
• Custom Filters
• Recursive filter groups with relations
• Select rows
• Custom search keywords and filter values for rows
• Vue-binded values for columns and rows
• Nested VueQuintables
• Vue components inside tables
• Custom cell formatters

Slots

You can define some slots to customize the table as you want to.

• header
• footer
• no-results
• loading
• cell-complete
• cell-content
• generated-cell-complete
• generated-cell-content
• sticky-cell-complete
• sticky-cell-content

1<template v-slot:header>Your HTML-Code</template>
2
3<template v-slot:cell-content="{cell}">
4    <button>
5        {{cell.text}}
6    </button>
7</template>

Events

Add listeners for the following events to handle them as you want to.

• click:row | passes row as first parameter, triggered when row is clicked

• click:cell | passes cell as first parameter, triggered when cell is clicked

• expand:row | passes row as first parameter, triggered when row is expanded

• collapse:row | passes row as first parameter, triggered when row is collapsed

• filtered:rows | passes filtered rows as first parameter, triggered when filter or search query affect rows

• ajax:rows | passes an object with ajax rows and total count as first parameter, triggered when rows are updated from server

• ajax:error | passes an error as first parameter, triggered when an server error occurs while loading rows via ajax

• update:perPage | passes integer as first parameter, triggered when per page parameter changes

• update:page | passes integer as first parameter, triggered when page is changed

• update:search | passes string as first parameter, triggered when search query is entered

• update:sort | passes object of sort group as first parameter, triggered when sort order is active/changes

• component:event | generic event for passing data from child components

Configuration

The following will give you an overview how to configure the VueQuintable for your needs.

Table Properties

Parameter	Type	Required	Description
config	Object	yes	The table configuration object. See details below.
rows	Array	yes (if no ajax url is set)	Table rows containing all cells. See details below.
preSelectedRows	Array	no	Array of objects{key,value} to set selection of rows from outside. You have to set the key to an unique property of the row e.g. an id and the value to the actual properties' value of the row. If done so, the row will be (pre-) selected. Note: This won't work initially, for initial select use config.defaultSelected or row.selected properties
dynamicConfig	Boolean	no	If set to true the Table wont be re-initialized and re-rendered if some values inside the config property are changed. This is useful to dynamically set config values for columns
filters	Object	no	The active filters for displaying rows. This has to be an object with filter name as key and filter value as value. Additionally a set of operators can be passed. See example below.
filter-groups	Array	no	Filter groups with relations. See example below.
sort-order	Object	no	Set sorting values and order by default or on the fly. See examples below.
axios	Object	no	Pass a configured axios instance to be used for ajax functionalities. Only relevant if ajax is used. Recommendation: set it to the current time using new Date() for update
updated	Boolean|Date	no	Property to trigger reload on current page. Only relevant if ajax is used.
verbose	Boolean	no	Default is false. Set to true to see debug informations on developer tools in your Browser.

Property config properties

Key	Type	Required	Pre-condition	Description	Default	Example
columns	Array	yes	-	Contains the configuration for the table columns including headlines.	null	See below
hideEmptyColumns	Boolean	no	-	If set to true columns of visible rows which are empty for each row will be hidden. Will check text, html, component and quintable properties	false	true
ignoreSortEmptyColumns	String{"none"|"active"|"all"}	no	hideEmptyColumns enabled	Select if/how columns with sort enabled shall be hidden if they are empty for each row. "none": sorting columns keep always visible. "active": sorting columns will always keep visible if they are active. "all": empty sorting columns will be hidden as well	"none"	"all"
expandedAll	Boolean	no	Breakpoints for columns are set	If set to true, all columns will be expanded by default	false	true
hoverClass	Boolean|String	no	-	Class for rows on hover	"bg-muted"	"bg-success"
hideRowToggle	Boolean	no	Breakpoints for columns are set	If set to true, no plus symbols will be displayed for row toggle.	false	true
pagination	Boolean|Number	no	-	If set to true, the default page size will be 25.	false	5
pageRange	Number	no	pagination enabled	Displayed page range of pagination.	5	3
rowsSelect	Boolean	no	pagination enabled	If set to true, user will be allowed to set rows per page	false	true
disallowAllOption	Boolean	no	pagination enabled and rows select is enabled	If set to true, "all" option will not be displayed in rows per page select	false	true
rowsPlaceholder	String	no	pagination enabled and rows select is enabled	Text for rows per page selection	"Rows per page:"	"Rows:"
select	Boolean	no	-	If set to true rows can be selected by check boxes. Tables v-model can be used for selected row Array.	false	true
prettySelect	Boolean	no	select is enabled	If set to true, pretty checkboxes library will be used.	false	true
selectPosition	String{"pre"|"post"}	no	select is enabled	Position of the select check boxes, first or last column.	"post"	"pre"
selectAll	Boolean	no	select is enabled	If set to true, additional checkbox will appear to select all rows	false	true
selectAllRows	Boolean	no	select is enabled	If set to true, select all selects all rows allover the pages. Please keep in mind that this won't work with server side pagination.	false	true
defaultSelected	Boolean	no	select is enabled	If set to true, all rows will be selected initially.	false	true
search	Boolean	no	-	If set to true a filter search input will be displayed	false	true
searchLength	Number	no	search is enabled	Minimum length of query that triggers search.	1	3
searchPlaceholder	String	no	search is enabled	Placeholder if no search query is entered	"Search..."	"Search rows..."
emptyPlaceholder	String	no	search is enabled or filters are set	Placeholder if filtering rows has no results.	"No rows"	"No results"
filterRelation	String{"OR"|"AND"}	no	filters are set	Filter relation, if no filter group affected	"AND"	"OR"
filterGroupRelation	String{"OR"|"AND"}	no	filters are set	Default relation filter groups to each other	"AND"	"OR"
multiSort	Boolean	no	sort is enabled on at least one column	If set to true multi-key sorting is enabled	false	true
multiSortSelect	Boolean	no	sort is enabled on at least one column	If set to true user will be allowed to enable and disable multi sort	false	true
multiSortPlaceholder	String	no	sort is enabled on at least one column and multi sort select is enabled	Placeholder for multiple sort description	"Multiple sort"	"Toggle multiple"
pageSort	Boolean	no	sort is enabled on at least one column	If set to true sorting on current page enabled	false	true
pageSortSelect	Boolean	no	sort is enabled on at least one column	If set to true user will be allowed to enable and disable page sort	false	true
pageSortPlaceholder	String	no	sort is enabled on at least one column and page sort select is enabled	Placeholder for page sort description	"Page sort"	"Toggle page"
ajaxUrl	String|Boolean	no	-	If set ajax will be useed for search/filter/sort/pagination	false	"http://your.server.url/api/endpoint"

Property columns for property config properties

Key	Type	Options/Return	Pre-condition	Description
headline	String	-	-	Headline for column
title	String	-	-	Description, displayed on hover the headline
classes	String	-	-	Space separated css classes string. Will be applied for headlines, cells, generated rows and sticky rows.
hidden	Boolean	true|false	-	If set to true the column will not be displayed in any case. Highly recommended to use only when dynamicConfig is set to to true.
ignoreEmpty	Boolean	true|false	config property hideEmptyColumns enabled	The column will never be hidden automatically due to emptiness
sort	Boolean	true|false	-	If set to true, this column will be sortable
breakpoint	String	"xs"|"sm"|"md"|"lg"|"xl"|"all"	-	Bootstrap breakpoint from which descending the column will be displayed as additional row
showHeadlineBreakpoint	String	"xs"|"sm"|"md"|"lg"|"xl"|"all"	headline is set	Bootstrap breakpoint from which descending the columns headline will be shown
hideHeadlineBreakpoint	String	"xs"|"sm"|"md"|"lg"|"xl"|"all"	headline is set	Bootstrap breakpoint from which descending the columns headline will be hidden
align	String	"left"|"right"|"center"	-	Text alignment for whole column
alwaysExpanded	Boolean	true|false	breakpoint is set	If set to true, the additional columns row will be always expanded if the breakpoint is reached
sticky	Boolean	true|false	breakpoint is not set	If set to true, this column will be always displayed as additional row and will be expanded always
cellFormatter	Function	String|Object	-	Function for complex custom cell formatting. The cell will be passed as function parameter. Has to return a string handled as text or an object with String value and String type{"html","text"}

Property rows properties

Key	Type	Pre-condition	Description	Default
cells	Array	-	List of cells for the row	null
selected	Boolean	select is enabled	If set to true the row will be selected on default	false
disableSelect	Boolean	select is enabled	If set to true this row will be excluded from selection at all	false
expanded	Boolean	breakpoint of at least one column is affected	If set to true the row will be expanded on default	false
keywords	String[]	search is enabled	Additional keywords which will match a search query	null
classes	String	-	Additional CSS classes for row	null
filters	Object	filters are set	Filters with filter name(s) and value(s), which will match selected filter(s)	null
align	String{"left"|"right"|"center"}	-	Text alignment for whole row, this will be overwritten by columns align value	"left"

Property cells for property rows properties

Key	Type	Pre-condition	Description
text	String	non of the following are set: html, component, quintable	Content string
html	String	non of the following are set: text, component, quintable	HTML content string
component	String	non of the following are set: text, html, quintable	Custom component object, see code example below
quintable	String	non of the following are set: text, html, component	VueQuintable object component for nested table, see simple code example below
classes	String	-	Additional CSS classes for cell
align	String	-	Text alignment for whole column, this will overwrite columns and rows align values

Lets have a look on a example for rows and cells

1//Table with columns "Name","Age","Birth Place","Job"
2
3[
4    //simple row as array
5    [ 
6        {
7            text:"John Doe"
8        },
9        {
10            text:50
11        },
12        {
13            text:"New York"
14        },
15        {
16            text:"Trainee"
17        },
18    ],
19    //advances row as object
20    {
21    	cells:[
22            {
23                html:"<b>Max</b> Mustermann",
24                classes:"special-td",
25                align:"right",
26             },
27            {
28                component:{
29                    name:"age-component",
30                    props:{
31                        age:20,
32                    }
33                },
34            },
35            {
36                quintable: {
37                    tableClasses:"text-center",
38                    config: {
39                        columns: [
40                            {
41                                headline: "State of birth",
42                            }, {
43                                headline: "City of birth",
44                            }, {
45                                headline: "Time of birth",
46                            }
47                        ],
48                    },
49                    rows: [
50                        [
51                            {text: "Bavaria"}, 
52                            {text: "Augsburg"},
53                            {text: "10:10 AM"}
54                        ],
55                        [
56                            {text: "New York"}, 
57                            {text: "New York"}, 
58                            {text: "12:10 AM"}
59                        ],
60                        [
61                            {text: "Texas"}, 
62                            {text: "Houston"}, 
63                            {text: "09:12 PM"}
64                        ],        								
65                    ],
66            	},
67            },
68            {
69                text:"Trainee"
70            },
71		]
72    }
73]
74
75

Component Definition

To use a custom component inside a VueQuintable you have to define it as the following:

1<template>
2    <div @click="check">
3      Age: {{age}}
4    </div>
5</template>
6
7
8<script>
9
10    export default {
11        props:["age"],
12        methods: {
13            check() {
14                //emit the pre-defined event for component actions
15                //handled from VueQuintable by "component:event"
16                this.$emit("action",
17                    {
18                        age:this.age,
19                    }
20                )
21            }
22        }
23    }
24
25</script>
26

Import and use the Component in your Code:

1import TestComponent from "./components/TestComponent.vue"
2
3Vue.component(
4    "test-component",
5    TestComponent.default || TestComponent
6);

Property filters properties

Key	Type	Required	Description
values	Mixed|Array	Yes	Compare values. Can be single value or array of values which will match the filter values of rows.
operator	String	No	Operator for comparing. The defined operators are: equal, greater, less, greaterEqual, lessEqual, startsWith, endsWith, contains, notContains, matches
compare	Function	No	Custom compare function. See Below.

This example shows selected values for active, printable, first_name, middle_name, and last_name filters. Operators can be:

1{
2   active:true,
3   printable:false,
4   first_name:
5    {
6        operator:"contains",
7        values:["Jo","ja"],   
8    },
9    middle_name:
10    {
11        compare:"matches",
12        values:new RegExp("r.+a","g"),   
13    },
14    last_name:
15    {
16        compare:(value,rowValue)=>{
17        	return rowValue.indexOf(value) === 2;
18        },
19        values:"a",   
20    }
21   
22}

Property filter-groups properties

Key	Type	Description
items	Object[]	List that contains Object of filter names or nested groups related to the group
relation	String{"OR"|"AND"}	Relation between the items

This filter groups example will cause to show rows that have filter matching filter values for selected name OR active filter AND selected printable filter. This groups are infinitely nestable.

1[
2    {
3        items:[
4            {
5                items:[
6                    {
7                        name:"name"
8                    },
9                    {
10                        name:"active"
11                    }
12                ],
13                relation:"OR",
14            },
15            {
16                items:[
17                    {
18                        name:"printable"
19                    }
20                ],
21            }
22        ],
23        relation:"AND"
24    }
25],

Property sort-order properties

These examples depict a sorting ordered second column (index=1) before first column (index=0). You can use Objects to set the ascending or descending order optionally. The Default will be asc=true, column index starts on zero.

1//simple
2[
3   1,0
4]
5
6//advanced
7[
8    {
9        index:1,
10        asc:false
11    },
12    {
13        index:0,
14        asc:true
15    },
16]
17

Basic Example

A simple basic example to show the usage of VueQuintable. More examples are included in the project and can be started with:

1npm run start

1<template>
2	<VueQuintable :config="config" :rows="rows"></VueQuintable>
3</template>
4
5<script>
6
7    import VueQuintable from './components/VueQuintable.vue
8
9    ...
10 
11  	data() {
12        return {
13            config: {
14                columns: [
15                    {
16                        headline: "Name",
17                    }, {
18                        headline: "Age",
19                    }, {
20                        headline: "Birth Place",
21                        breakpoint: "md"
22                    }, {
23                        headline: "Job",
24                        sticky: true,
25                    }
26                ],
27            },
28
29            rows: [
30                [
31                    {
32                        text: "Mia Wong"
33                    },
34                    {
35                        text: 50
36                    },
37                    {
38                        text: "Beijing"
39                    },
40                    {
41                        text: "Trainee"
42                    },
43                ],
44                [
45                    {
46                        text: "Peter Stanbridge"
47                    },
48                    {
49                        text: 18
50                    },
51                    {
52                        text: "London"
53                    },
54                    {
55                        text: "Trainee"
56                    },
57                ],
58                [
59                    {
60                        text: "Natalie Lee-Walsh"
61                    },
62                    {
63                        text: 25
64                    },
65                    {
66                        text: "Dublin"
67                    },
68                    {
69                        text: "Trainee"
70                    },
71                ],
72            ],
73        }
74    }
75          
76  ...
77</script>

AJAX data example

1<template>
2
3...
4
5<VueQuintable :loading="loading" :config="remoteConfig" :rows="remoteRows" />
6
7...
8
9</template>
10
11<script>
12	import axios from 'axios'
13
14	...
15
16  	data(){
17        return {
18            loading:false,
19            remoteConfig:null,
20            remoteRows:null
21  		
22 	...
23 
24    mounted(){
25        this.loading = true;
26        axios.get("http://your.server.url/api/endpoint").then((response)=>{
27            this.remoteRows = response.data.rows;
28            this.remoteConfig = response.data.config;
29            this.loading = false;
30        });
31    }
32...
33
34</script>

The request for the ajax handling on server has got the following structure:

1{
2    //String search query
3    search:"some query",
4    //Object Filters, see above
5    filters:{},
6    //Number etries per page
7    perPage:12,
8    //Number current page, starting at 1
9    page:2,
10    //Object sorting columns and 
11    sort:{
12        //Array of sorting column indexes
13        indexes:this.currentSortIndexes,
14        //Object of column definitions keyed by column index
15        columns:this.sortingColumns,
16    },
17};

The response has to be the following structure:

1{
2	//Array of all rows, structure see above
3	rows:[]
4    //Number of all matching rows, without paging
5    all:240
6}

Good to know

• Links won't trigger expanded rows to collapse. Also you can prevent collapse parent row by define an element with the class "prevent-toggle"
• VueQuintable uses v-model for selected rows

Sensetence UG - Samuel Zeitler