ratiw / vuetable-2 Goto Github PK

View Code? Open in Web Editor NEW

2.2K 52.0 399.0 2.16 MB

data table simplify! -- datatable component for Vue 2.x. See documentation at

Home Page: https://vuetable.com

License: MIT License

JavaScript 45.46% HTML 5.50% Vue 49.04%

vue component datatable pagination-components

vuetable-2's Introduction

Vuetable-2 - data table simplify!

Vuetable-2 v2.0-beta is available now!

See the next branch.

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.

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", VueTablePagination);
  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

Contributions

Any contribution to the code (via pull request would be nice) or any part of the documentation and any idea and/or suggestion are very welcome.

Note For any bug fix, the PR should be forked from the master branch. And for any suggestion or additional feature, the PR should be forked from the develop branch, where it can be integrated and rolled out in the next release.

If you are not sure, please ask by openning a new issue.

However, please do not feel bad if your pull requests or contributions do not get merged or implemented into Vuetable.

Your contributions can, not only help make Vuetable better, but also push it away from what I intend to use it for. I just hope that you find it useful for your use or learn something useful from its source code. But remember, you can always fork it to make it work the way you want.

License

Vuetable is open-sourced software licensed under the MIT license.

vuetable-2's People

Contributors

Stargazers

Watchers

Forkers

simplicitysavored kurtulik limittech ming517 evo00 0proto hitoz jlabresh1 larryeitel manukall rodrigozen andfelzapata mohitpanjwani xiafish201 edmundhuang sunnyaili c0defre4k coderjp sjmarve power721 someburner psychiccat germ1f karateboy mattgil ash0080 matter-automaton ternavsky oldguncm christophburger jackieli123723 frike neilsimp1 jaketoolson stevefontaine bajian johfermq pyrello dleesalestreamsoft h2akim assoft t-moennich cristijora nelsonmatos tianxiallen korcanergun luongvm jeitnier fabiorizzello klexxp mossen athiwatp gongdao123 hakanerp micinfo dubroquin vertoo rahmatcmos kiltec artpar user4i devenc mcspx marcianobarros20 bellissi1u muwoo stefanullinger edwinhuish zhuxindaba adamyarger sukohi demack muhammadsaeedparacha alroyxu alfredochuc arvinlim casperboone perdeeposingh ritu-gatiyala msmaxine a480 mixergit narci2010 aliaqdas07 dorkasv washu peterzero trendingtechnology tsexton6689 jeresiliemoncontrat-com jdriesen simones93 alfonsobries muyaedward primozrome zhanafe sotatek-toantran hakansakalli kommandersoftware ryanwinchester-forks

vuetable-2's Issues

using NPM, cannot get this to import.

[14:30:26] gulp-notify: Browserify Failed!: Unexpected token

/node_modules/vuetable-2/src/components/Vuetable.vue:1
<template>

No matter what I do, whether I require or import, npm doesn't work

Table goes in infinite loop when using eloquent relationship

Hi,

I have one transactions table and other account-id table. I have belongsTo eloquent relationship where each every transaction belongs to some or other account-id.

This API works perfectly when tested online (using POSTMASTER). JSon returned is in the correct format. However - vuetable goes in infinite loop whenever I update below code in the TRANSFORM method:


for (let i = 0; i < data.length; i++) {
                transformed['data'].push({
                    id: data[i].id,
                    
                    gl_account_id: data[i].gl_account.name,
                    
                })
            }

however it works correctly when I have below code (no change in the backend)

for (let i = 0; i < data.length; i++) {
                transformed['data'].push({
                    id: data[i].id,
                    
                    gl_account_id: data[i].gl_account_id, //.gl_account.name,
                    
                })
            }

here, "gl_account_id" field is a foreign key. So instead of using that - I was trying to use its "name" to display in the table.

Any idea how to get this working?

vuetable vs vuetable-2

This is more of a vue vs vue2 question, but we are about to start working on a new project; I'm wondering if we should go with vuetable-2 (and vue2) or vuetable?

@ratiw is it your plan for vuetable-2 to supersede vuetable? Would you recommend using vuetable-2 for production (commercial project that has planned life time of 3~5 years)?

Many thanks and keep up the great work.

[Question] How did you get the rowData from the custom-actions component

Hi @ratiw

Again thanks for the wonderful vuetable plugin.

I am trying to map your code and adding some functionality, like on your custom action component, i want to pass also the rowIndex on click events, so I have to map how you are getting the rowData you passing to this events.

Hopefully you could enlighten me.

Thanks!

Using from client data, with client-side only filter

Sometimes it seems to make sense to fully load the table data into the client and work from there.
A client-side only filter could be much faster, just like a switch between table pages.

Are there plans to to develop vuetable-2 in this direction?

Or is it already possible to use client-date and client-side filtering and pagination? If so any hints where to start doing this?

How i put filters above or below column's names ?

Hello,

I use vuetable-2 that I find very well, and i start with vuejs 2, i would like add my filters above or below column's names with html tag thread tr td. (like this grid example : http://grids-demo.herokuapp.com/demo/example4)

I have this http://imgur.com/a/I9laA and it's work.

Does somebody have an idea ?

Thank you in advance for your help.

How do I call reload method from different component?

Hi,

It seems VUEJS event broadcast and on doesn't work if components are not related. So in this case is there any way to call the reload method from another component?

I have page on which this data-table is displayed. This same page also has "Add Contact" button. Whenever user clicks on the "Add Contact" - a modal is displayed where user can fill information and press SAVE. This calls another VUEJS component method, fires an API to store the data and closes the modal.

However, data-table doesn't get refreshed, reason - reload method is in the component defined for the data-table . So I can't call that method from non-child or non-parent component.

How do I solve this? One option is to put the modal code in the data-table component itself but I wasn't sure how that will work or how to do that :( (sorry new to vue.js) .

This is the code that stores modal data - it doesn't use any template. Simple SUBMIT calls the method.

Vue.component('contact-api', { // code that calls API to store the modal data })

This is the code that helps to display data-table on the page. Please note - three different components are used.

`Vue.component('contact-actions', {
    template: [
        '<div>',
        '<button class="btn-xs btn-icon waves-effect waves-light btn-default" @click="onClick(\'view-item\', rowData)"><i class="fa fa-edit"></i></button>',
        '&nbsp;<button class="btn-xs btn-icon waves-effect waves-light btn-danger" @click="onClickDeleteContact(rowData)"><i class="fa fa-remove"></i></button>',
        '</div>'
    ].join(''),
    props: {
        rowData: {
            type: Object,
            required: true
        }
    },
    methods: {
        onClick: function(action, data) {

        },

        onClickDeleteContact: function(data) {

        }

    }
})

Vue.component('contact-detail-row', { //all detail row related logic })

Vue.component('contact-table', {
    template: '#contact-table',
    components: {
        Vuetable,
        VuetablePagination,
        VuetablePaginationDropdown,
        VuetablePaginationInfo,
    },
    data: function() {
    },
    watch: {
    },
    methods: {
       
    },
    created () {
    }
})

toggleCheckbox doesn't work

Looks like the parameters doesn't match the function's logic anymore.

@change="toggleCheckbox($event.target.checked, item, field.name)"
vs
toggleCheckbox: function(dataItem, fieldName, event) {

However I tried to fix toggleCheckbox's arguments the values where added to the selectedTo array but the checkbox didn't stay checked.

Uncaught TypeError: this.fields.forEach is not a function(…)

Hi, I am using vue2 with vuetable-2, i follow vuetable documentation but i got this, i tried to copy paste the example but the error still occurred..

Uncaught TypeError: this.fields.forEach is not a function(…)

Please help me, i log "this.fields" is an object instead of array

Recursively find parent for callbacks

I have a fairly simple component set up like so:

<template>
    <row>
        <column>
            <vuetable url="..."></vuetable>
        </column>
    </row>
</template>

<script>
    export default {
        data () => {
            return {
                fields: [{name: "test", callback: "test"}]
            };
        },
        methods: {
            test: (value) => value.split('').reverse().join('')
        }
    }
</script>

When trying to call the callback, the following code is triggered in VueTable:

    callCallback: function(field, item) {
      if ( ! this.hasCallback(field)) return

      if(typeof(field.callback) == 'function') {
       return field.callback(this.getObjectValue(item, field.name))
      }

      let args = field.callback.split('|')
      let func = args.shift()

      if (typeof this.$parent[func] === 'function') {
        let value = this.getObjectValue(item, field.name)

        return (args.length > 0)
          ? this.$parent[func].apply(this.$parent, [value].concat(args))
          : this.$parent[func].call(this.$parent, value)
      }

      return null
    },

The relevant line here is if(typeof this.$parent[func] === 'function')... Because this.$parent refers to the column, not my custom component. And of course <column> doesn't have a method called test

This is easily resolved with something like the following:

let elem = this.$parent;
while (elem.$parent && !elem[func]) {
    elem = elem.$parent;
}

This would travel up the component tree until it found one where the callback was defined. Of course performing this while loop per row could lead to some gross performance penalties, so you may want to add caching of the callback afterwards.

Just a thought for an improvement

Content isnt rendered inside Columns

Great Work 👍
I have a Problem, the Content my Table isn`t rendered. The Rows are there but without its Content.

<template>
    <vuetable
        api-url="http://seller.dev/api"
        pagination-path=""
        class="zen-table-elem"
        :fields="columns"
    ></vuetable>
</template>

<script>
export default {
  name: 'ArticleTable',
  data () {
    return {
      columns: [
        'Bild',
        'Preis',
        'Ø Sales',
        'Bestand',
        'Kategorie',
        'Rang'
      ],
      articles: {}
    }
  },
  created () {
    this.getAll()
  },
  methods: {
    getAll () {
      this.$http.get('http://seller.dev/api').then(function (response) {
        this.articles = response.data
      }, function (response) {
        console.log(response)
      })
    }
  }
}
</script>

My returned JSON Response from my API build with Laravel

Vue Devtools shows me the returned Object in the Vuetable Component

But there is no Content inside my Columns as you see

And by the Way: How can i remove the blue Color Classes of the Table?

Conflicts Vee-validate

I'm using vee-validate and I'm having a conflict problem with the 'fields' prop.

What can I do to solve it?

Pagination example

I'm trying to setup a table with pagination but with this new version I haven't been able to do it yet.

I've read the Upgrade Guide but I can't really understand what I've to do in order to display the pagination. (I'm kind of new in VueJS). Also the vuetable:pagination-data is never called in my component.

Here's what I've coded at the moment:

<template>
    <vuetable
        :api-url="apiUrl"
        :fields="columns"
        :pagination-path="paginationPath"
        :css="css"
        :pagination-component="paginationComponent"></vuetable>
</template>
<script>
    export default {
        props: ['apiUrl'],

        mixins: [require('../components/Mixin.vue')],

        data: function data() {
            return {
                columns: [
                    'first_name',
                    'last_name',
                    'email',
                    'company',
                    'job_title',
                    'groups'
                ],
                paginationPath: 'meta.pagination.links',
                paginationComponent: 'vuetable-pagination',
                css: {
                    tableClass: 'table',
                    ascendingIcon: 'fa fa-angle-up',
                    descendingIcon: 'fa fa-angle-down',
                    detailRowClass: ''
                }
            }
        },

        mounted: function () {
            //
        },


        methods: {
            registerEvents: function () {
                var self = this;

                this.$on('vuetable:pagination-data', function (pagination) {
                    console.log('vuetable:pagination-data', pagination);
                });
            }
        },

        created: function () {
            this.registerEvents();
        }
    }
</script>

And I'm calling this component like this :

<laravel-participant-vuetable api-url="/vue/api/events/{{ $event->id }}/participants"></laravel-participant-vuetable>

Thanks for your help

Using vuetable-2 when Vue is already defined

In Vuetable.vue you are declaring Vue:

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)

This is fine if you are not already using Vue, however for projects that have already defined Vue it means that it is loaded twice and causes issues if you are hooking in to Vue (with say interceptors) before importing vuetable-2.

I can see that vuetable-1 didn't do this, is there a reason why vuetable-2 does it this way?

Thanks

npm compile errors: .babelrc, transform-runtime, stage-2

hi,

first of all, thanks for this great project and all the great work the team put on this.

so I've been playing around on some of the tutorials and decided to add it as a nodejs package to my test project using Laravel 5.4, I am using webpack and vuejs2. I have no problem installing vuetable-2 via npm, but when I try to import it to my app.js:

import Vuetable from 'vuetable-2/src/components/Vuetable'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'

.. and try to compile it (npm run dev), I am getting an error causing the bundle to prevent from compiling. here's the exact error message I got: (stripped paths to my local dirs)

bub:~/vrs $ npm run watch

> @ watch /full/path/to/my/project
> node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 1/1 modules 0 active
Webpack is watching the files…

 95% emitting
 ERROR  Failed to compile with 3 errors

 error  in ./~/vuetable-2/src/components/Vuetable.vue

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/full/path/to/my/project/node_modules/vuetable-2/.babelrc" at 0, attempted to resolve relative to "/full/path/to/my/project/node_modules/vuetable-2"
    at /full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:233:36)
    at OptionManager.init (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
    at File.initOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (/full/path/to/my/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/full/path/to/my/project/node_modules/babel-loader/lib/index.js:38:20)
    at /full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:78:18
    at ReadFileContext.callback (/full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:14:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)

 @ ./~/vuetable-2/src/components/Vuetable.vue 7:2-170
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

 error  in ./~/vuetable-2/src/components/VuetablePagination.vue

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/full/path/to/my/project/node_modules/vuetable-2/.babelrc" at 0, attempted to resolve relative to "/full/path/to/my/project/node_modules/vuetable-2"
    at /full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:233:36)
    at OptionManager.init (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
    at File.initOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (/full/path/to/my/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/full/path/to/my/project/node_modules/babel-loader/lib/index.js:38:20)
    at /full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:78:18
    at ReadFileContext.callback (/full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:14:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)

 @ ./~/vuetable-2/src/components/VuetablePagination.vue 3:2-180
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

 error  in ./~/vuetable-2/src/components/VuetablePaginationInfo.vue

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/full/path/to/my/project/node_modules/vuetable-2/.babelrc" at 0, attempted to resolve relative to "/full/path/to/my/project/node_modules/vuetable-2"
    at /full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:233:36)
    at OptionManager.init (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
    at File.initOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (/full/path/to/my/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/full/path/to/my/project/node_modules/babel-loader/lib/index.js:38:20)
    at /full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:78:18
    at ReadFileContext.callback (/full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:14:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)

I tried to look for any guide related to proper npm installation, cause I might missing something that causes the error, but cant find unfortunately, so I tried to open the files involved and play a bit on the terms mentioned on the error (not an expert on nodejs), so I tried playing on the values inside node_modules/vuetable-2/.babelrc file, I tried to drop the: "plugins": ["transform-runtime"], line completely, and removed stage-2 from presets field. so the new value would be:

{
  "presets": ["es2015"],
  "comments": false
}

again, am a BEGginer for nodejs, and I dont quite understand yet the full extend of the changes i did, but it works, and I can successfully run vuetable-2 with laravel and webpack. just thought it might be helpful for the team or whoever encounters the same error I did, It's just I dont feel comfortable making any custom changes on vendor library files, and would rather report it to the authors.

sortable class

As i see there is no way to mark column as sortable with icon when column is sortable but not active, i hope u understand...
So i see isInCurrentSortGroup method, maybe you could place in this part :class="['vuetable-th-component-'+trackBy, field.titleClass, {'sortable': isSortable(field)}]"
class active or whatever?

<th v-if="extractName(field.name) == '__component'"
                  @click="orderBy(field, $event)"
                  :class="['vuetable-th-component-'+trackBy, field.titleClass, {'sortable': isSortable(field)}]">
                  {{ field.title || '' }}
                  <i v-if="isInCurrentSortGroup(field) && field.title"
                     :class="sortIcon(field)"
                     :style="{opacity: sortIconOpacity(field)}"></i>
              </th>

Pass javascript data array instead call api throught url for data display

I think is a good feature to also have the option of pass data through property instead to call an api

Loading animation or text

What is the correct way to show a text or animination for the table

i have this code

 new Vue({
    el: #app-content,

    data: {                
           paginationComponent: 'vuetable-pagination',
           paginationInfoTemplate: '', 
           loading: true
       }, 
     methods: {
        onLoaded: function () {     
            this.loading = false;
        }
     })

HTML

<div>
<div  v-if="loading"><span class="fa fa-spinner fa-spin fa-3x"></span>Loading ...</div>
    <vuetable
        ref="vuetable"
        api-url="{{ $setup->api_url}}"
        :fields="{{json_encode($setup->columns())}}"
        pagination-path="{{$setup->pagination_path}}"
        @vuetable:pagination-data="{{ $setup->pagination_data }}"
        :css="{tableClass: '{{$setup->css['tableClass']}}'}"
        @vuetable:loaded="onLoaded"
   >
    </vuetable>
</div>

For some reason when i execute the sentence in the onLoaded method, the table data dissapears what am i doing wrong? this was working with vue1, but i dont know what changed that is preventing from working

Support 'state saving'

I used to use DataTables plugin.
One of the useful features is state saving :
https://datatables.net/examples/basic_init/state_save.html

The state of a table (its paging position, ordering state etc) can be restored when the user comes back to the page.

Please implement this feature.
I am really glad this vuetable component exist. Thank you !

Cannot read property 'trim' of undefined. FIXED

Just to report that I had to change "VuetablePaginationMixin.vue" to "VuetablePaginationMixin.js" and remove the <script> tags in order to make the code compile. Otherwise I would get the error:

Error transforming Y:\Administrator\Desktop\vue\src\vuetable\VuetablePaginationMixin.vue with 'vue' plugin: Cannot read property 'trim' of undefined.

The vue plugin would be looking for the template of a component even though it's a mixin and has no template.

Works this way. Thanks for the plugin!

Conditional action fields

Hi! First of all, thanks for making this awesome piece of software. I am benefitting from it a lot!

However, I did encounter an issue I am not completely sure how to fix. I have a table containing some user information. This table is shown both for authenticated and unauthenticated users. I want to show the authenticated users a few actions.

I currently have the following setup:

props: {
    authenticated: {
        type: Boolean,
        required: true
    },
},

data () {
    return {
        fields: [{
            name: 'username',
            title: 'Username'
        }, {
            name: 'url',
            title: 'URL',
            callback: 'formatUrl'
        }, {
            name: 'created_at',
            title: 'Added at',
            callback: 'formatDate'
        }, {
            name: 'updated_at',
            title: 'Reviewed at',
            callback: 'formatDate'
        }, {
            name: '__slot:actions',
            dataClass: 'center aligned'
        }]
    }
},

And the (slot) template:

<template slot="actions" scope="props">
    <div v-if="authenticated" class="actions">
        <button v-if="!props.rowData.reviewed" class="ui mini green labeled icon button">
            <i class="checkmark icon"></i>
            Review
        </button>
        <button v-else class="ui mini yellow labeled icon button">
            <i class="undo icon"></i>
            Resend
        </button>
        <button class="ui mini red labeled icon button">
            <i class="delete icon"></i>
            Delete
        </button>
    </div>
</template>

This works perfectly well, however unauthorised users see this somewhat ugly empty column (see screenshots). Is there any way to hide the entire actions column for these users?

Thanks in advance!

passing props to or registering events from the actions component

Hello,

If I didn't miss it somewhere, Is there a way to pass props or events to the actions custom component without modifying Vuetable?

Property or method "css" is not defined on the instance but referenced during render

Hello, I'm trying the "Property or method "css" is not defined on the instance but referenced during render" when start new vuetable-2 component.
My settings:
http://joxi.ru/5mddy9OSvxMPbm.jpg
and in the console I get the error:
http://joxi.ru/8239qYaH6Ekq6r.jpg

How can I resolve that?
Thanks.

two vuetable on page, only one event of actions custom component can work???

1、 the main vue instance:
table 1:

<vuetable ref="vuetable"
                          ...
                          @CustomAction:action-item="onActions"
></vuetable>

table 2:

<vuetable ref="vuetable"
                          ...
                          @CustomAction:action-item="onXXXActions"
></vuetable>

2、emit event
table 1:

Vue.component('custom-actions', { 
...
methods: {
      onClick: function (action, data) {
          this.$parent.$emit('CustomAction:action-item',{action: action, data: data})
      }
    }
}

table 2:

Vue.component('custom-actions', { 
...
methods: {
      onClick: function (action, data) {
          this.$parent.$emit('CustomAction:xxx-action-item',{action: action, data: data})
      }
    }
}

3、
table 1:

onActions(data) {
                if (data.action == 'delete') {
                    this.deleteAction(data.data);
                }
            },

table 2:

onXXXActions(data) {
                if (data.action == 'delete') {
                    this.deleteAction(data.data);
                }
            },

question:
two vuetables on my page , just one of onActions work, what's matter?

GroupBy a column (enchantment)

How could would be if we had a group by column?

Something like this:
https://codepen.io/andrewcourtice/pen/VabXQV/

Thank you for your excellent package.

append-params problem with object with array field

I have filtering criteria object

var myCriteria = {
  country: 'Germany',
  categoryIn: ['bug', 'task', 'other']
}

When assigning this object to apped-params (moreParams is binded with append-params) wrong url is build

this.moreParams = myCriteria
this.$refs.vuetable.refresh()

the filtering url part should be:

&country=Germany&categoryIn=bug,task,other OR
&country=Germany&categoryIn[]=bug&categoryIn[]=task&categoryIn[]=other

Do you plan to add support that enhancement?example

Item Actions not implemented

Using this on a Vue 2.0+ project, I noticed that the this version does not have the item-actions implemented yet in the code. Creating this issue to keep track of implementation.

Pagination not showing on Laravel 5.3 Vue Component

I have a view component that uses the v-server-table and the data is retrieved from the api using paginate. the table display the records from the first page but the pagination is not shown.

issues

cant even search the table
Pagination is not displayed
PerPage does not work although the records is displayed as 10.
Action buttons are not displayed on the action column

below is the component html

below is the component script

export default {

    name: 'user-list',
    prop: {
        columns: [],
        options: {},
        pagination: {},
        perPage: 10
    },
    data: function () {
        return {
            columns:['UserNo','UserName', 'IDCardNo', 'ContactNo', '__actions'],
            itemActions: [
                { name: 'view-item', label: '', icon: 'zoom icon', class: 'ui teal button' },
                { name: 'edit-item', label: '', icon: 'edit icon', class: 'ui orange button'},
                { name: 'delete-item', label: '', icon: 'delete icon', class: 'ui red button' }
            ],
            options: {
                columns: ['UserNo','UserName', 'IDCardNo', 'ContactNo', '__actions'],
                headings: {
                    PatientNo: 'User No',
                    Patient: 'User Name',
                    IDCardNo: 'ID/Passport No',
                    ContactNo: 'Contact No',
                    edit: 'Edit',
                    delete: 'Delete'
                },
                pagination: {
                    dropdown:true,
                     chunk:5,
                     paginationComponent: 'vuetable-pagination',
                    paginationInfoTemplate: '',
                    loading: true
                },
                filterByColumn: false,
                texts: {
                    filter: "Search:"
                },
                perPage: 5
            }
    }
},
    //created: {

    //},

    methods: {

    },
    events: {
        'vuetable:action': function(action, data) {
            console.log('vuetable:action', action, data)
            if (action == 'view-item') {
                this.viewProfile(data.id)
            }
        },
        'vuetable:load-error': function(response) {
            console.log('Load Error: ', response)
        }
    }
}

what am I missing here .

Vue Resource should not be imported within Vuetable.vue

In my opinion, requiring the use of vue-resource should be up to the developer. I am already including vue-resource and as such, the error Cannot redefine property: $url gets thrown.

Please remove the import and force developers to pull it in themselves as a dependency.

Unless of course there is a specific reason for this. I would also like to see the ability to change out vue-resource for another similar package like axios.

Filterbar pass placeholder var

Hey Rati,

I added
<filter-bar placeholder="Search for brick"> to show correct tip in filter input. It also would be nice to add 'unit' var to <vuetable-pagination-info units="bricks"> so it will show Displaying 0 to 0 of 1352 bricks
I can send you a pull req.

Do not force the use of the vue resource

I would like to be able to choose another option as the "axios" case

Add Export Feature

Hi,

Thanks for the great table code.
It would be really awesome if you add EXPORT to Excel or PDF or list feature. Can you please add this in your requested feature list.

Thanks.

Uncaught (in promise) TypeError: path.trim is not a function(…)

Hi @ratiw , I have this error, I know that it is because of the data in the transform: function(data) because the (data)is only the data.data and not the fully response.

But in the onLoadSuccess (response) the response is OK. So what I'm missing?

Uncaught TypeError: this.fields.forEach is not a function

Keep getting error

init pretty simple

<template>
    <div class="card">
        <div class="title">
            <h5>Контакты</h5>
        </div>

        <div class="content">
            <div class="table-responsive">
                <vuetable v-ref:vuetable
                        api-url="/contacts"
                        :fields="columns"
                ></vuetable>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        name: 'Contacts',

        data(){
            return{
                msg:'hello vue',
                columns: [
                    '__checkbox:id',
                    'name',
                    'email'
                ]
            }
        },
        
        mounted() {
            console.log(this.msg);
        }
    }
</script>

ERROR in ./~/vue-tables-2/lib/methods/render.js

Hi @ratiw still a newbie of using vue, and been trying your vuetable but I encountering some parse error.

Module parse failed: C:\xampp\htdocs\ProjectLaravel\PROJ\node_modules\vue-tables-2\lib\methods\render.js Unexpected token (17:9)

Here is my webpack.config.js
`var webpack = require('webpack');

var fileName = "list.js"; //source and compiled filename
var entryFile = "./public/js/Core/"+fileName;
var destinationFolder = "./public/js/Core/compiled";

module.exports = {
entry: entryFile,

output: {
    path: destinationFolder,
    filename: fileName
},

module: {
    loaders: [
        {
            test: /\.jsx$/,
            loader: 'babel-loader'
        },

        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },

        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/
        }
    ]
},

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

};
`

And my JS file
`var VueTables = require('vue-tables-2');

Vue.use(VueTables.client, {
compileTemplates: true,
highlightMatches: true,
pagination: {
dropdown:true,
chunk:5
},
filterByColumn: true,
texts: {
filter: "Search:"
},
datepickerOptions: {
showDropdowns: true
}
});

new Vue({
el : '#brandVue',

data : {
    columns: ['id','name','age'],
    tableData: [
        {id:1, name:"John",age:"20"},
        {id:2, name:"Jane",age:"24"},
        {id:3, name:"Susan",age:"16"},
        {id:4, name:"Chris",age:"55"},
        {id:5, name:"Dan",age:"40"}
    ],
}

});
`

Thanks @ratiw for the help!

I found some events of vuetable not work ,i can't use $on to listen events of vuetable

  this.$on('vuetable:action', (action, data) => {  
  })
  this.$on('vuetable:cell-clicked', (data, field, event) => {
    self.onCellClicked(data, field, event)
  })
  this.$on('vuetable:cell-dblclicked', (data, field, event) => {
    self.onCellDoubleClicked(data, field, event)
  })
  this.$on('vuetable:load-success', (response) => {
    self.onLoadSuccess(response)
  })
  this.$on('vuetable:load-error', (response) => {
    self.onLoadError(response)
  })

only this is work:

                'vuetable:cell-clicked'

others can't work, how to do it?

[Vue warn]: Error when rendering component <vuetable>:

Hi, I used NPM and built DEV output. I am using LARAVEL in the backed and received below error:

[Vue warn]: Error when rendering component :
vue.js:2264TypeError: Cannot read property 'toUpperCase' of null ..

am I missing any step? vue dev tools shows correct pagination data - so till that point it was good.

Send props to custom action component

Currently I've defined a component in a file :

<template lang="html">
  <div class="btn-group" role="group" aria-label="...">
    <a @click="onShow(rowData)" class="btn btn-info"><i class="fa fa-info"></i>&nbsp;Detail</a>
    <a @click="onEdit(rowData)" class="btn btn-primary"><i class="fa fa-edit"></i>&nbsp;Edit</a>
    <a @click="onDelete(rowData)" class="btn btn-danger"><i class="fa fa-trash"></i>&nbsp;Delete</a>
  </div>
</template>

<script>
export default {
  props: {
    rowData: {
      type: Object,
      required: true
    },
    showUrl: {
      type: String,
      required: true
    },
    editUrl: {
      type: String,
      required: true
    },
    deleteUrl: {
      type: String,
      required: true
    },
    redirectUrl: {
      type: String,
      required: false
    }
  },
  methods: {
    onShow: function(data) {
      window.location.href = this.showUrl + '/' + data.id
    },
    onEdit: function(data) {
      window.location.href = this.editUrl + '/' + data.id
    },
    onDelete: function(data) {
      this.$http.delete(this.deleteUrl + '/' + data.id).then(
        (response) => {
          console.log(response);
          if(this.redirectUrl !== undefined)
            window.location.href = this.redirectUrl

          this.$parent.refresh()
        },
        (response) => {
          console.log(response);
        }
      )
    }
  }
}
</script>

Is there anyway to send props to my component ? Currently I see only a way to state which component to be used for the __component column without sending it anything. Please help 🙏

Offline pagination?

Is there any way to load all data and then make pagination? Something like datatables.net does.

I prefer speed when user is using the table before first-time load.

How can I use vuetable-2 in vue.js 2.0?

@ratiw I was just learning vue soon, I would like to put your vuetable as a component applied to my project, feasible?

Unknown plugin "transform-runtime"

Hi,

I'm trying to use vuetable-2 but after yarn add vuetable-2 i have this error :

ERROR in ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vuetable-2/src/components/Vuetable.vue

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "F:\\dev\\Project\\node_modules\\vuetable-2\\.babelrc" at 0, attempted to resolve relative to "F:\\dev\\Project\\node_modules\\vuetable-2"

Property or method “css” is not defined on the instance

I'm trying to get Vuetable-2 to work in our solution. The demo works without problems. The difference is that we use a lot of different modules and I'm fairly new to front-end development and fail to see what the problem can be.

The difference between the demo and trying to set the demo up in our own project is this:

Demo
import Vuetable from 'vuetable-2/src/components/Vuetable
Our project
import Vuetable from 'vuetable-2/src/components/Vuetable.vue

The reason for doing so is because if I do not (leave out the .vue), I'll get the following error:

ERROR in ./~/buble-loader!./~/vue-loader/lib/selector.js?
type=script&index=0!./resources/assets/js/components/VuetableTest.vue
Module not found: Error: Can't resolve 'vuetable-2/src/components/Vuetable'

But, with the extension added to the import, I'll get this (in the browser console):

[Vue warn]: Property or method "css" is not defined on the instance but referenced during render. 
Make sure to declare reactive data properties in the data option. 
(found in component <vuetable>)

[Vue warn]: Error when rendering component <vuetable>:
Uncaught TypeError: Cannot read property 'tableClass' of undefined

Now I have the feeling it has something to do with me needing to add the extension to the import, something that is not done within the Vuetable files, for example import VueResource from 'vue-resource'.

Our package.json:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-advanced": "*",
    "laravel-elixir-webpack-official": "*",
    "lodash": "^4.14.0",
    "multiselect": "^0.9.12",
    "node-sass": "^3.10.0",
    "notifyjs-browser": "^0.4.2",
    "sweetalert": "^1.1.3",
    "vue": "^2.1.0",
    "vue-resource": "^1.0.2",
    "vue-router": "^0.7.13",
    "vuetable-2": "^1.2.0",
    "vuex": "^2.1.1",
    "whatwg-fetch": "^1.0.0",
    "wow.js": "^1.2.2"
  },
  "dependencies": {
    "laravel-echo": "^1.0.5",
    "pace": "0.0.4",
    "pace-js": "^1.0.2",
    "pusher-js": "^3.2.1"
  }
}

Again, I feel like this has to do with modules we use or elixir settings or whatever, but it's not working out of the box. Sorry for adding this as a new issue to Vuetable, but I don't know where to ask else.

Any CDN?

I don't see any CDN version of vuetable-2 (only 1). I tried downloading the release file but it looks like I have to build it myself, and doing so results in npm install failing at [email protected] install: node install.js. Using node 6.6.0 and npm 3.10.8 by the way.

Hide rows after delete

Hi @ratiw ,
Thanks for vuetable-2 👍

I am able to pass checked rows to server to delete them and once it is success, I want to hide the selected rows. It works if I refresh the vuetable by event, but I really don't want to send a request to server again to bring whole data again, rather wanted to hide the deleted rows. Thanks in advance, your support is awesome as always.

hi, this project is very nice

Hi, This project is very nice.
I just started learning vue js, Beginning with version 2.

the vuetable (by vue1) is full, but vuetable-2 not package ( in vuetable.js).
will I need to encapsulate him ?
I hope this can get better and better

this is my exercise project, this your package
https://github.com/imagine10255/laravel53-vuejs2-jwt-auth/blob/master/resources/assets/js/components/VuetableDemo1.vue

thinks.

Is there a way I can use jQuery's ajax function instead of vue-resource?

Title says it all. Thanks.

fields prop breakes down after changing page

Hello! I have faced with a strange problem.
I use vuetable2 (with pagination) and Laravel 5.3.

During an initial loading everything is well. But when I try to change page - table rendering fails.
It happens because this.field prop breaks down.
In loadData method before calling Vue.http.get there are 2 objects in property, but in the first row of loadSuccess method - it consists of 2 strings (as defined in directive)

components defining:

                    <template>
                        <vuetable ref="vuetable"
                                  api-url="/oauth/clients/tokens"
                                  :fields="['user_id', 'client_id']"
                                  pagination-path=""
                                  @vuetable:pagination-data="onPaginationData">
                        </vuetable>
                        <div class="text-center">
                            <vuetable-pagination
                                    ref="pagination"
                                    :css="cssPagination"
                                    :icons="icons"
                                    @vuetable-pagination:change-page="onChangePage">
                            </vuetable-pagination>
                        </div>
                    </template>

        methods: {
            onPaginationData (paginationData) {
                this.$refs.pagination.setPaginationData(paginationData)
            },
            onChangePage (page) {
                this.$refs.vuetable.changePage(page)
            }
        }

Vuetable.vue:

    loadData: function(success = this.loadSuccess, failed = this.loadFailed) {
      this.fireEvent('loading')

      this.httpOptions['params'] = this.getAllQueryParams()
        console.log(JSON.stringify(this.fields));
/**
output: "[{"name":"user_id","title":"User_id","titleClass":"","dataClass":"","callback":null,"visible":true},{"name":"client_id","title":"Client_id","titleClass":"","dataClass":"","callback":null,"visible":true}]"
*/
      Vue.http.get(this.apiUrl, this.httpOptions).then(
        success,
        failed
      )
    },

    loadSuccess: function(response) {
        console.log(JSON.stringify(this.fields));
/**
output: "["user_id","client_id"]"
*/
        this.fireEvent('load-success', response)
...

Can't render vuetable

Hi!

I have trying for many time to get run vuetable, but I always get the same error:

Uncaught TypeError: Cannot read property 'get' of undefined
TypeError: Cannot read property '_updateFromParent' of undefined

My api does not have any problem, this is my code for vue:

html:

<div class="tab-content">
	<div class="row">
		<div class="table-responsive">
			<vuetable ref="vuetable"
                      api-url="/api/ladder/achievement"
                      :fields="columns"
                      :per-page="perPage"
                    ></vuetable>
		</div>
	</div>
</div>

js:

import Vuetable from 'vuetable-2/src/components/Vuetable.vue'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination.vue'
import VuetablePaginationDropdown from 'vuetable-2/src/components/VuetablePaginationDropdown.vue'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo.vue'

var locales = {
    es: {
        message: {
            avatar: 'Avatar',
            nickname: 'Apodo',
            level: 'Nivel',
            point: 'Puntos',
        }
    },
    fr: {
      message: {
          avatar: 'Avatar',
          nickname: 'Nickname',
          level: 'Level',
          point: 'Points',
      }
    },
    en: {
        message: {
            avatar: 'Avatar',
            nickname: 'Nickname',
            level: 'Level',
            point: 'Points',
        }
    }
}

Vue.config.lang = document.querySelector('#lang').getAttribute('value')
Object.keys(locales).forEach(function(lang) {
    Vue.locale(lang, locales[lang])
})

new Vue({
    el: '#app',
    components: {
      Vuetable,
      VuetablePagination,
      VuetablePaginationDropdown,
      VuetablePaginationInfo,
    },
    data: {
        perPage: 15,
        columns: [{
            name: 'avatar_url',
            title: Vue.t('message.avatar'),
            dataClass: 'text-center',
            callback: 'image',
            titleClass: 'text-center',
        }, {
            name: 'Name',
            title: Vue.t('message.nickname'),
            dataClass: 'text-center',
            titleClass: 'text-center',
        }, {
            name: 'level',
            title: Vue.t('message.level'),
            dataClass: 'text-center',
            titleClass: 'text-center',
        }, {
            name: 'AchievementPoints',
            title: Vue.t('message.point'),
            dataClass: 'text-center',
            titleClass: 'text-center',
        }],
    },
    watch: {
      'perPage' (val, oldVal) {
        this.$nextTick(function() {
          this.$refs.vuetable.refresh()
        })
      },
    },
    methods: {
        image: function(str) {
            return '<img v-lazy="/template/img/ladder/heads/' + str + '" width="27">'
        }
    }
})

So what is wrong with my code? I miss any reference or?

So many thanks for you help, and sorry if my english it's not perfect I still learning ^^

Cannot read property '0' of undefined

Steps taken:

npm install -g vue-cli
vue init webpack test
cd test
npm install vue-resource vuetable-2 --save-dev
cd node_modules/vuetable-2
npm install
cd ../..
npm install
change src/main.js to

var Vue = require('vue');
var VueResource = require('vue-resource');
Vue.use(VueResource);

import Vuetable from 'vuetable-2/src/components/Vuetable.vue';
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination.vue';
import VuetablePaginationDropdown  from 'vuetable-2/src/components/VuetablePaginationDropdown.vue';

Vue.component('vuetable', Vuetable);
Vue.component('vuetable-pagination', VuetablePagination)
Vue.component('vuetable-pagination-dropdown', VuetablePaginationDropdown)

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

npm run build

Error:

ERROR in ./~/vuetable-2/~/css-loader?sourceMap!./~/vuetable-2/~/vue-loader/lib/style-rewriter.js?id=data-v-d0b0b768!./~/vuetable-2/~/vue-loader/lib/selector.js?type=styles&index=0!./~/vuetable-2/src/components/Vuetable.vue
Module build failed: TypeError: Cannot read property '0' of undefined
    at Object.module.exports (test/node_modules/vuetable-2/node_modules/vue-loader/lib/selector.js:10:31)
 @ ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/vuetable-2/~/vue-style-loader!./~/vuetable-2/~/css-loader?sourceMap!./~/vuetable-2/~/vue-loader/lib/style-rewriter.js?id=data-v-d0b0b768!./~/vuetable-2/~/vue-loader/lib/selector.js?type=styles&index=0!./~/vuetable-2/src/components/Vuetable.vue 4:14-233

Does anyone have a working example/guide?

npm run dev error

[email protected] dev /home/eco/Downloads/vuetable-2-master
node build/dev-server.js

events.js:160
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE :::8080
at Object.exports._errnoException (util.js:1022:11)
at exports._exceptionWithHostPort (util.js:1045:20)
at Server._listen2 (net.js:1262:14)
at listen (net.js:1298:10)
at Server.listen (net.js:1376:9)
at Function.listen (/home/eco/Downloads/vuetable-2-master/node_modules/express/lib/application.js:617:24)
at Object. (/home/eco/Downloads/vuetable-2-master/build/dev-server.js:59:22)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:535:3

npm ERR! Linux 4.4.0-57-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v7.4.0
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: node build/dev-server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'node build/dev-server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vuetable-2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node build/dev-server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vuetable-2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vuetable-2
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/eco/Downloads/vuetable-2-master/npm-debug.log

ratiw / vuetable-2 Goto Github PK

vuetable-2's Introduction

Vuetable-2 - data table simplify!

Vuetable-2 v2.0-beta is available now!

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

Documentation and Tutorial

Breaking Changes

v1.6.0

Example Code

Usage

NPM

Javascript via CDN

Contributions

License

vuetable-2's People

Contributors

Stargazers

Watchers

Forkers

vuetable-2's Issues

Steps taken:

Error:

Recommend Projects

Recommend Topics

Recommend Org