Description:
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