A High Configurable And Flexible Table Wrapper Using Vue And Bootstrap

VueQuintable

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

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:

npm install --save axios

yarn:

yarn add axios

Installing

npm:

npm install --save bootstrap
npm install --save @popperjs/core
npm install --save @quintet/vue-quintable

yarn:

yarn add bootstrap
yarn add @popperjs/core
yarn add @quintet/vue-quintable

Integration

import Vue from 'vue'

//use bootstrap
import 'bootstrap/dist/css/bootstrap.css'

import "@quintet/vue-quintable/dist/vue-quintable.css"
import VueTable from '@quintet/vue-quintable'
Vue.use(VueTable);

Use directly in browser

You can either install VueQuintable via bower

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

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

<script type="text/javascript" src="/path/to/vue/dist/vue.min.js"></script>

<script type="text/javascript" src="/path/to/project/dist/vue-quintable.umd.min.js"></script>

<link rel="stylesheet" href="/path/to/project/dist/vue-quintable.css"></link>

Vue.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

<template v-slot:header>Your HTML-Code</template>

<template v-slot:cell-content="{cell}">
    <button>
        {{cell.text}}
    </button>
</template>

If you want to use slots in nested table you should use the identifier option for the nested table. If done so (e.g. "nested-identifier") you can use slots like the following:

<template v-slot:cell-content-nested-identifier="{cell}">
    <button>
        {{cell.text}}
    </button>
</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

Property config properties

Property columns for property config properties

Property rows properties

Property cells for property rows properties

Lets have a look on a example for rows and cells

//Table with columns "Name","Age","Birth Place","Job"

[
    //simple row as array
    [ 
        {
            text:"John Doe"
        },
        {
            text:50
        },
        {
            text:"New York"
        },
        {
            text:"Trainee"
        },
    ],
    //advances row as object
    {
    	cells:[
            {
                html:"<b>Max</b> Mustermann",
                classes:"special-td",
                align:"end",
             },
            {
                component:{
                    name:"age-component",
                    props:{
                        age:20,
                    }
                },
            },
            {
                quintable: {
                    tableClasses:"text-center",
                    config: {
                        columns: [
                            {
                                headline: "State of birth",
                            }, {
                                headline: "City of birth",
                            }, {
                                headline: "Time of birth",
                            }
                        ],
                    },
                    rows: [
                        [
                            {text: "Bavaria"}, 
                            {text: "Augsburg"},
                            {text: "10:10 AM"}
                        ],
                        [
                            {text: "New York"}, 
                            {text: "New York"}, 
                            {text: "12:10 AM"}
                        ],
                        [
                            {text: "Texas"}, 
                            {text: "Houston"}, 
                            {text: "09:12 PM"}
                        ],        								
                    ],
            	},
            },
            {
                text:"Trainee"
            },
		]
    }
]

Component Definition

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

<template>
    <div @click="check">
      Age: {{age}}
    </div>
</template>


<script>

    export default {
        props:["age"],
        methods: {
            check() {
                //emit the pre-defined event for component actions
                //handled from VueQuintable by "component:event"
                this.$emit("action",
                    {
                        age:this.age,
                    }
                )
            }
        }
    }

</script>

Import and use the Component in your Code:

import TestComponent from "./components/TestComponent.vue"

Vue.component(
    "test-component",
    TestComponent.default || TestComponent
);

Property filters properties

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

{
   active:true,
   printable:false,
   first_name:
    {
        operator:"contains",
        values:["Jo","ja"],   
    },
    middle_name:
    {
        compare:"matches",
        values:new RegExp("r.+a","g"),   
    },
    last_name:
    {
        compare:(value,rowValue)=>{
        	return rowValue.indexOf(value) === 2;
        },
        values:"a",   
    }
   
}

Property filter-groups properties

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.

[
    {
        items:[
            {
                items:[
                    {
                        name:"name"
                    },
                    {
                        name:"active"
                    }
                ],
                relation:"OR",
            },
            {
                items:[
                    {
                        name:"printable"
                    }
                ],
            }
        ],
        relation:"AND"
    }
],

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.

//simple
[
   1,0
]

//advanced
[
    {
        index:1,
        asc:false
    },
    {
        index:0,
        asc:true
    },
]

Basic Example

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

npm run start

<template>
	<VueQuintable :config="config" :rows="rows"></VueQuintable>
</template>

<script>

    import VueQuintable from './components/VueQuintable.vue

    ...
 
  	data() {
        return {
            config: {
                columns: [
                    {
                        headline: "Name",
                    }, {
                        headline: "Age",
                    }, {
                        headline: "Birth Place",
                        breakpoint: "md"
                    }, {
                        headline: "Job",
                        sticky: true,
                    }
                ],
            },

            rows: [
                [
                    {
                        text: "Mia Wong"
                    },
                    {
                        text: 50
                    },
                    {
                        text: "Beijing"
                    },
                    {
                        text: "Trainee"
                    },
                ],
                [
                    {
                        text: "Peter Stanbridge"
                    },
                    {
                        text: 18
                    },
                    {
                        text: "London"
                    },
                    {
                        text: "Trainee"
                    },
                ],
                [
                    {
                        text: "Natalie Lee-Walsh"
                    },
                    {
                        text: 25
                    },
                    {
                        text: "Dublin"
                    },
                    {
                        text: "Trainee"
                    },
                ],
            ],
        }
    }
          
  ...
</script>

AJAX data example

<template>

...

<VueQuintable :loading="loading" :config="remoteConfig" :rows="remoteRows" />

...

</template>

<script>
	import axios from 'axios'

	...

  	data(){
        return {
            loading:false,
            remoteConfig:null,
            remoteRows:null
  		
 	...
 
    mounted(){
        this.loading = true;
        axios.get("http://your.server.url/api/endpoint").then((response)=>{
            this.remoteRows = response.data.rows;
            this.remoteConfig = response.data.config;
            this.loading = false;
        });
    }
...

</script>

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

{
    //String search query
    search:"some query",
    //Object Filters, see above
    filters:{},
    //Number etries per page
    perPage:12,
    //Number current page, starting at 1
    page:2,
    //Object sorting columns and 
    sort:{
        //Array of sorting column indexes
        indexes:this.currentSortIndexes,
        //Object of column definitions keyed by column index
        columns:this.sortingColumns,
    },
};

The response has to be the following structure:

{
	//Array of all rows, structure see above
	rows:[]
    //Number of all matching rows, without paging
    all:240
}

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

Authors

Quintet Consulting UG - Samuel Zeitler