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

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

Installation

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);

Features

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

• Responsive columns 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 the 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>

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>

This package has a lot of different events and options. If you want to learn more, You can visit its documentation on Github.