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, }, identifier: { type: String, default: null, }, initialSearchTerm: { type: String, default: null, },
Preview:
Changelog:
v2.3.10 (02/04/2023)
- added class to generated-row
- added targets to click events, added classes for expanded and collapsed rows
v2.3.7 (01/30/2023)
- added target to row click
v2.3.6 (01/17/2023)
- removed portal vue because of performance issues
v2.3.5 (01/12/2023)
- refactoring and minor fixes
v2.3.3 (01/11/2023)
- Fixed display errors for new responsive design
v2.3.1 (01/10/2023)
- Bugfixes
- Added PortalVue to unify the cell slots
- Responsive design changes
v2.1.7 (12/12/2022)
- Added xxxl breakpoint
v2.1.6 (09/21/2022)
- fixed sorting + selecting bug
v2.1.5 (09/13/2022)
- fixed sorting bug
v2.1.4 (09/05/2022)
- minor config adjustment
v2.1.3 (08/30/2022)
- fixed security issues
v2.1.0 (08/06/2022)
- Store state in localstorage, delay for search, some general fixes
v2.0.13 (07/25/2022)
- minor change for hidden columns
v2.0.10 (03/16/2022)
- added POST as request method
v2.0.6 (03/11/2022)
- added new slots for search
- added new config property searchClass
v2.0.5 (02/14/2022)
- introduced initial search term property
- added speaking classes
v2.0.4 (01/22/2022)
- bugfixes
v2.0.3 (12/04/2021)
- minor fixes for sort and ajax rows event
v2.0.2 (10/18/2021)
- Fix: initial sort + ajax loading
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: sensetence
Live Demo: https://sensetence.com/vue-quintable-demo/
Download Link: https://github.com/sensetence/vue-quintable/archive/refs/heads/master.zip
Official Website: https://github.com/sensetence/vue-quintable
Install & Download:
# Yarn
$ yarn add @sensetence/vue-quintable
# NPM
$ npm i @sensetence/vue-quintable --save