Feature-rich Data Grid For Vue.js – vue-table-dynamic

A dynamic, feature-rich data grid/table component with the capabilities of filtering, pagination, sorting, editing and more.

More Features:

• Multiple Select
• Border
• Stripe
• Highlight
• Column Width
• Configure Header
• Fixed Header
• Fixed Columns

Basic Usage:

1. Install and import the VueTableDynamic.

import VueTableDynamic from 'vue-table-dynamic'

2. Insert the component into your app template.

<template>
  <div class="base-demo" style="width: 400px">
    <vue-table-dynamic :params="params"></vue-table-dynamic>
  </div>
</template>

3. Register the component and define the data for the data table.

export default {
  name: 'Demo',
  data() {
    return {
      params: {
        data: [
          ['Cell-1', 'Cell-2', 'Cell-3'],
          ['Cell-4', 'Cell-5', 'Cell-6'],
          ['Cell-7', 'Cell-8', 'Cell-9']
        ]
      }
    }
  },
  components: { VueTableDynamic }
}

Preview:

Changelog:

v0.4.10 (08/24/2021)

• Update search

v0.4.9 (08/17/2021)

• Added props: paperCount

v0.4.7 (08/17/2021)

• Added params: scrollStep/scrollDelay

v0.4.6 (07/09/2021)

• Update vue-scrollbar-simple

v0.4.5 (04/28/2021)

• Use HTML as header content

v0.4.4 (01/30/2021)

• Optimized sorting of touch area

v0.4.3 (01/21/2021)

• Added select row

v0.4.2 (01/20/2021)

• Added sharedWidth

v0.4.1 (12/28/2020)

• Custom styles

v0.3.3 (09/21/2020)

• Added languages

v0.3.1 (09/07/2020)

• Switch button position of filterPanel

v0.3.0 (08/17/2020)

• update

v0.2.7 (08/16/2020)

• Modify actived color

Download Details:

Author: TheoXiong

Live Demo: https://theoxiong.github.io/vue-table-dynamic/

Download Link: https://github.com/TheoXiong/vue-table-dynamic/archive/master.zip

Official Website: https://github.com/TheoXiong/vue-table-dynamic

Install & Download:

# NPM
$ npm install vue-table-dynamic --save