w-table-vue

A table component for vue(vue2).

Documentation

To view documentation or get support, visit docs.

Example

To view some examples for more understanding, visit examples:

all components: web [source code]

Installation

Using npm(ES6 module):

npm i w-table-vue

Import all components:

//choose component
<w-table-edit
    ...
></w-table-edit>

//import
import WTableVue from 'w-table-vue'

//use
Vue.use(WTableVue)

Import one component:

//choose component
<w-table-edit
    ...
></w-table-edit>

//import
import WTableEdit from 'w-table-vue/src/components/WTableEdit.vue'

//component
Vue.component('w-table-edit',WTableEdit)
//or
export default {
    components: {
        WTableEdit,
        //or
        'w-table-edit': WTableEdit,
    },
    ...
}

In a browser(UMD module):

Add script for vue.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

Add script for w-aggrid-vue, ag-grid-community and ag-grid-vue have been bundled into the umd file(css included), only vue is required.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/w-table-vue.umd.js"></script>

Directly use:

//app and component
<div id="app">
    <w-table-edit
        style="width:600px; height:400px;"
        :name="name"
        :description="description"
        :opt="opt"
        :editable="true"
    ></w-table-edit>
</div>

//use
Vue.use(window['w-table-vue'])

//new
new Vue({
    el: '#app',
    data: {
        name: 'Car Price',
        description: 'The relationship between different car types and prices',
        opt: {
            keys: ['make', 'model', 'price'],
            kpHeadFilterType: { //default: num (num,text,time,set)
                'make': 'text',
                'model': 'text',
                'price': 'num',
            },
            rows: [
                { make: 'Toyota', model: 'Celica', price: 35000 },
                { make: 'Ford', model: 'Mondeo', price: 32000 },
                { make: 'Porsche', model: 'Boxter', price: 72000 },
            ],
        },
    }
})