@lassehaslev/vue-table
Simple table and logic in Vue2
Installation
Run npm install @lassehaslev/vue-table --save
in your project folder
Usage
Use this simple component with Bulma.
import { Table } from '@lassehaslev/vue-table';
export default {
template: `
<vue-table :heads="[ 'Name', { name: 'Actions', style: { 'text-align':'right' } } ]">
<tr v-for="( item, index ) in items">
<td>{{ item }}</td>
<td>
<button class="button is-danger" @click="remove( index )">Remove</button>
</td>
</tr>
</vue-table>
`,
data() {
return {
items: [
'Javascript.',
'Html.',
'Css.',
],
}
},
methods: {
remove( index ) {
this.items.splice( index, 1 );
}
},
components: {
'vue-table': Table
},
}
Extend / Build your own!
You can create you own table with the logic of BaseTable
import BaseTable from '@lassehaslev/vue-table';
export default {
template: `
<table class="table">
<thead>
<tr>
<th v-for="head in heads" :style="head.style" :class="head.class">{{ head.name }}</th>
</tr>
</thead>
<tbody>
<slot></slot>
</tbody>
</table>
`,
mixins: [ BaseTable ],
}
Development
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
For detailed explanation on how things work, consult the docs for vue-loader.