Press "Enter" to skip to content

A Simple Data Table With Vue And Bootstrap Component Library | VueQuintable

VueQuintable is a table wrapper for Vue.js 2.x. It builds using bootstrap 5.x. Highly configurable, easy to use, flexible and responsive.

vue datatable example, vue datatable bootstrap 4, vue datatable npm, vuejs table, how to use jquery datatable in vue js, vue table component, datatable with vue js example

Features

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

  • Responsive columns to be displayed as additional rows
  • Page numbering
  • Sort / Multi Sort
  • Research
  • Custom filters
  • Iterative filter groups with relationships
  • Select classes
  • Custom search keywords and filter values for rows
  • Vue related values for columns and rows
  • Nested VueQuintables
  • Vue components inside tables
  • Custom cell formatters

How to make use of it:

Install and download:

# Yarn
$ yarn add @quintet/vue-quintable

# NPM
$ npm i @quintet/vue-quintable --save

1. Import 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 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 props are default.

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,
}

Property rows properties

KeyTypePre-conditionDescriptionDefault
cellsArrayList of cells for the rownull
selectedBooleanselect is enabledIf set to true the row will be selected on defaultfalse
disableSelectBooleanselect is enabledIf set to true this row will be excluded from selection at allfalse
expandedBooleanbreakpoint of at least one column is affectedIf set to true the row will be expanded on defaultfalse
keywordsString[]search is enabledAdditional keywords which will match a search querynull
classesStringAdditional CSS classes for rownull
filtersObjectfilters are setFilters with filter name(s) and value(s), which will match selected filter(s)null
alignString{“start”|”end”|”center”}Text alignment for whole row, this will be overwritten by columns align value“start”

Property cells for property rows properties

KeyTypePre-conditionDescription
textStringnon of the following are set: htmlcomponentquintableContent string
htmlStringnon of the following are set: textcomponentquintableHTML content string
componentStringnon of the following are set: texthtmlquintableCustom component object, see code example below
quintableStringnon of the following are set: texthtmlcomponentVueQuintable object component for nested table, see simple code example below
classesStringAdditional CSS classes for cell
alignStringText alignment for whole column, this will overwrite columns and rows align values

Feature-rich Data Table With Vue And Bootstrap, VueQuintable Plugin/Github


See Demo And Download

Official Website(Quintetio): Click Here

This superior jQuery/javascript plugin is developed by Quintetio. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.