A Simple Data Table With Vue And Bootstrap Component Library

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

Key	Type	Pre-condition	Description	Default
cells	Array	–	List of cells for the row	null
selected	Boolean	select is enabled	If set to true the row will be selected on default	false
disableSelect	Boolean	select is enabled	If set to true this row will be excluded from selection at all	false
expanded	Boolean	breakpoint of at least one column is affected	If set to true the row will be expanded on default	false
keywords	String[]	search is enabled	Additional keywords which will match a search query	null
classes	String	–	Additional CSS classes for row	null
filters	Object	filters are set	Filters with filter name(s) and value(s), which will match selected filter(s)	null
align	String{“start”\|”end”\|”center”}	–	Text alignment for whole row, this will be overwritten by columns align value	“start”

Property cells for property rows properties

Key	Type	Pre-condition	Description
text	String	non of the following are set: html, component, quintable	Content string
html	String	non of the following are set: text, component, quintable	HTML content string
component	String	non of the following are set: text, html, quintable	Custom component object, see code example below
quintable	String	non of the following are set: text, html, component	VueQuintable object component for nested table, see simple code example below
classes	String	–	Additional CSS classes for cell
align	String	–	Text alignment for whole column, this will overwrite columns and rows align values