vuetable-2

Vuetable-2 - data table simplify!

Vuetable-2 works with Vue 2.x, vuetable is for Vue 1.x

If you're looking for the version that's working with Vue 1.x, please go to vuetable repo.

Live Demo

https://codepen.io/ratiw/pen/GmJayw

Documentation and Tutorial

Documentation is still under development, but you can view it at https://ratiw.github.io/vuetable-2. Thanks to @cristijora for the help.

Meanwhile, check out

  • the Tutorial
    with follow-along project here. It should be enough to get you started.

  • Sample project using Vuetable-2 with Laravel 5.4 and Laravel-Mix

If you've been using Vuetable for Vue 1.x before, checkout what's changed for info on changes from Vuetable for Vue 1.x and the upgrade guide on how you could upgrade from Vuetable for Vue 1.x.

You can now make use of Vue's scoped slot using the new __slot special field, thanks to @sjmarve. That means you are able to define action buttons per instance of a data table without depending on a globally defined component.

Use scoped slot in parent when defining the actions Vue Doc for scopped Slots

e.g.

<template slot="actions" scope="props">
    <div class="table-button-container">
        <button class="btn btn-default" @click="onClick('edit-item', props.rowData)"><i class="fa fa-edit"></i> View</button>&nbsp;&nbsp;
        <button class="btn btn-danger" @click="onClick('delete-item', props.rowData)"><i class="fa fa-remove"></i> Edit</button>&nbsp;&nbsp;
    </div>
</template>

the onClick function can now be defined in the parent and the parent has Access to rowData and rowIndex via props. :)

The original functionality still works

Breaking Changes

v1.6.0

  • The icons prop of VuetablePagination is now moved into the css prop object. See this codepen.

Example Code

  • Clone the project
  • Go into the cloned directory
  • npm install
  • npm run dev
  • Open browser to http://localhost:8080

Usage

NPM

npm install vuetable-2 --save-dev

Javascript via CDN

Thanks to @cristijora for providing helps on this.

// vuetable-2 dependencies
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
// vuetable-2
<script src="https://unpkg.com/[email protected]"></script>
Vue.use(Vuetable)

This is demonstrated in this jsfiddle.

The .use from above will register all the components globally.

function install(Vue){
  Vue.component("vuetable", Vuetable);
  Vue.component("vuetable-pagination", VueTablePaginationInfo);
  Vue.component("vuetable-pagination-dropdown", VueTablePaginationDropDown);
  Vue.component("vuetable-pagination-info", VueTablePaginationInfo);
}

Also you have the ability to access certain components if you need them:

VueTable: VueTable.default/VueTable.VueTable,
VueTablePagination: VueTable.VueTablePagination,
VueTablePaginationInfo: VueTable.VueTablePaginationInfo,
VueTablePaginationDropdown: VueTable.VueTablePaginationDropdown

GitHub