Description:
VueQuintable is a feature-rich data table solution built with Vue.js and Bootstrap framework.
Key Features:
- Dynamic data rendering
- Pagination
- Sorting
- Filtering
- Fully responsive
- Add/remove data
- Nested tables
- And much more
Basic usage:
1. Import the VueQuintable and Bootstrap.
import Vue from 'vue' // Bootstrap import BootstrapVue from 'bootstrap-vue' Vue.use(BootstrapVue) // Bootstrap css import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' // vue-quintable import "@quintet/vue-quintable/dist/vue-quintable.css" import VueTable from '@quintet/vue-quintable' Vue.use(VueTable);
2. Add the VueQuintable to the template.
<template> <VueQuintable :config="config" :rows="rows"></VueQuintable> </template>
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"
},
],
],
}
}3. All default props.
rows: {
type: Array,
default () {
return [];
}
},
config: {
type: Object,
default () {
return {};
}
},
dynamicConfig: {
type: Boolean,
default: false,
},
value: {
type: Array,
default () {
return [];
}
},
preSelectedRows: {
type: Array,
default () {
return [];
}
},
loading: {
type: Boolean,
default: false,
},
filters: {
type: Object,
default () {
return {};
}
},
filterGroups: {
type: Array,
default () {
return [];
}
},
verbose: {
type: Boolean,
default: false,
},
nested: {
type: Boolean,
default: false,
},
tableClasses: {
type: String,
default: "",
},
sortOrder: {
type: Array,
default () {
return [];
},
},
updated: {
type: [Boolean, Object, Date],
default: false,
},
axios: {
type: Function,
}Preview:
Changelog:
v2.0.1 (09/09/2021)
- Fixed tooltip complications
v2.0.0 (08/27/2021)
- Bootstrap 5 support
v1.2.7 (07/22/2021)
- fixed nested slots
v1.2.6 (07/22/2021)
- added slot support for nested tables
v1.2.5 (06/07/2021)
- some refactoring and better logging
v1.2.4 (03/23/2021)
- fixes a bug with select all rows
v1.2.2 (03/18/2021)
- Updated dependencies
v1.2.0 (03/16/2021)
- updated package
v1.1.98 (02/23/2021)
- improved vue slots support
v1.1.97 (01/13/2021)
- fixed sorting
v1.1.95 (08/27/2020)
- cleaned select
v1.1.94 (08/25/2020)
- fixed bug in selection with selectAllRows
v1.1.7 (08/25/2020)
- minor bugfix pagination
Download Details:
Author: Quintetio
Live Demo: https://quintet.io/vue-quintable-demo/
Download Link: https://github.com/Quintetio/vue-quintable/archive/master.zip
Official Website: https://github.com/Quintetio/vue-quintable
Install & Download:
# Yarn
$ yarn add @quintet/vue-quintable
# NPM
$ npm i @quintet/vue-quintable --save