@EmilMoe vuetable now supports browserify and webpack. Just install via npm and import from vuetable/src/components. Please see more detail in the README

Thanks. I will give it a look when I have time, it's already on my dependency notelist of things I expect to usually need in all future projects.

v1.0.12 is out!

• new special field: __sequence. This special field will display the record sequence number using information from pagination data structure.
• new special field: __checkbox. This special field will display checkbox in the table header and for each data item. You will need to specify the column name in the data structure that would uniquely identified each row (usualy id column). See doc for more information.
• new item-actions option: extra. This option will let you add extra attribute(s) to the generated item action. See doc
• new event: vuetable:set-options. You can broadcast this event to vuetable to programmatically set its props from main Vue instance.

v1.1..1 is out!

• new event: vuetable:cell-dblclicked You can use this event to work with inline editing component like vue-editable as demonstrated in the example here. Close #26

• new props: http-data and http-options These two props will accept object that will be passed through to vue-resource's $http during the GET call to request data from server as documented here. So, if the server you're contacting requires JWT Auth, you could use http-options to set the token in the header option. Close #29

v1.2.0 is out!

New Features

• Support multi-column sorting, by @balping
• Detail row to display additional data

Breaking Change

• sort-order is now of type Array to support multi-column sorting, which can be easily fix by just enclosing old value with square bracket. See release note

@ratiw great component. Stumbled upon it recently and am loving it so far. Am currently using it in a Laravel project and after following the docs and get this error:

Error: Uncaught (in promise): TypeError: Cannot read property 'pagination' of null

Don't know why am getting this error.

@mezie It seems like you haven't set the path to pagination information in your JSON data structure. Or you haven't had pagination information in your data structure at all.

If you're using Laravel and use paginate() to return the data, you will need to set pagination-path prop to "" like so:

   <vuetable
      api-url="..."
      pagination-path=""
  ></vuetable>

This is because, by default, the pagination-path has the value of links.pagination and laravel's pagination information in the return JSON data structure is at the root. Setting it to and empty string will tell vuetable to look at the root of the data strucuture.

Cheers, :)

@ratiw how can I refresh the data after performing an action. I tried using vuetable:reload event but it is not working. From the docs, it say that the vuetable: reload event does not accept any argument. This is what I have tried

events: {
    'vuetable:action': function(action, data){
    .......
},
'vuetable:reload': function (){
    
}
}

The action part is working but it not refreshing the page.

@mezie You have to broadcast reload event. What you did was waiting for reload event.

  // from your main vue instance
  this.$broadcast('vuetable:reload') 

v1.3.0 is out!

• method getSortParam() is now overridable, so that you can control how sort query string is constructed before sending request to the server. (Close #55) See example

• new event: cell-clicked This is introduced to fix the side-effect of using row-clicked event with toggle-detail event and also provide more fine grain click detection to table column. (Close #51).

• Make the props name more consistent by introducing their replacement and deprecate the old ones. Warning message will be log to console when any of those deprecated props was used.

  • deprecate props
    • paginateConfig: use paginateConfigCallback instead
    • detail-row: use detail-row-callback instead

• Log error to console when the given function name specified in detail-row-callback prop does not exist.

• update examples, improve settings interface

v.1.4.0 is out!

• new special field: __component:<name>

  Allow using custom component as a content of the specified field. See example here for more detail.

v1.4.1 is out! Nothing new, just small fixes.

But there are many interesting questions on different use cases on Github Issues tagged as __"question"__. Some were closed, some are not (depending on those who post it).

If you are curious on how people use vuetable, please check it out.

v1.5.0 is out!

• enhance: __component sepecial field is now sortable. Thanks @pauk-slon. Close #80
• new: row-detail-component -- row detail should now be implemented as a component. Suggested by @malaschitz. See examples for usage.
• deprecated: row-detail-callback -- use row-detail-component instead

Don't forget to checkout many interesting use cases, questions, and answers in the Github Issues as well as the closed ones.

Nice library ! Is it working well with VueX ? Any chance to see a search box like in datatable ?

Thank you !

@Estev It shouldn't have any problem because it does not require vuex. vuetable uses event broadcasting of Vue 1.x, while vuetable-2 removes those events, but provides methods for the same tasks.

@ratiw Very nice plugin, excellent my friend. I have a question...

Say I have a field definition like the following:

{
 name: 'created_at',
title: 'Date Created',
}

I want to transform the date using momentJS

Is there a way to mutate the fields, kind of computed properties:

{
 name: function(data) {return moment(data).format('LLLL')},
 title: 'Date Created',
}

How can I accomplish this ? Any ideas ? or Perhaps with a life cycle hook, to filter all the data ?

Thanks.

@andfelzapata You can just use the callback option in the field definition to do the work.

// field definition
{
  name: 'created_at',
  title: 'Date Created',
  callback: 'formatDate'
}
//...

new Vue({
  //...
  methods: {
    formatDate: function(value) {
      return moment(value).format('LLLL')
    }
  }
})

See example here and here

hi @ratiw, can you upload the playground example for the vuetable-2 just like in vue1?

I got confused on where to put the component of vuetable and its pagination thanks :)

@sirajasoftwarehouse16 Please wait awhile. I'm working on the Tutorial section for vuetable-2 at the moment. Hopefully, will get it done within next week.

In the mean time, please checkout the example in the source code: index.html and main.js

thank you so much @ratiw it's working good, I think it is more flexible now!

my only problem now are the styling for both the table and pagination, I'll work it out somehow, thanks again!!

I can't for the vuetable2 docs to be out & some examples! nice work on the package so far.

Quick question, is there a way to dynamically change the appendParams & reload the table? Since we can't mutate a prop in Vue2.0, I'm trying to think how this would work.

I basically want the user to be able to add/edit the params for the table to load.

@webbur I think there should be no problem because Vuetable does not mutate appendParams itself. It just uses the values inside the object which was passed inside as a prop.

has anyone been able to make a row in a vue table editable??

Hello ratiw!! Thank you so much for your package! For example, I have 5000 records. My Data format (JSON) is diffirent from Laravel's data format (JSON). Does it work?