Home
Table
Feature-rich Data Table With Vue And Bootstrap – VueQuintable

Feature-rich Data Table With Vue And Bootstrap – VueQuintable

sensetence Added 2 years ago
Live Demo Download Source Code

Install & Download:

# Yarn
$ yarn add @sensetence/vue-quintable
# NPM
$ npm i @sensetence/vue-quintable --save

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,
},
identifier: {
  type: String,
  default: null,
},
initialSearchTerm: {
  type: String,
  default: null,
},

Preview:

Feature-rich Data Table With Vue And Bootstrap - VueQuintable

Changelog:

v2.3.22 (04/11/2024)

  • enrich events with indexes
  • minor fix

v2.3.20 (04/03/2024)

  • introduced tabindex like rows

v2.3.17 (06/16/2023)

  • bugfixes

v2.3.14 (05/09/2023)

  • added auxclick events

v2.3.13 (04/26/2023)

  • minor event adjustment

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

More Like This

Tags:

Add Comment