data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.
new prop: multi-sort
Set to true to enable multi-column sorting interaction. Default is false.
change: sort-order --This is a breaking change.
sort-order in v1.2.0 is now and Array instead of Object in order to support multi-column sorting feature. You can easily upgrade to v1.2.0 just by enclosing existing sort-order value with square brackets [], like so
:sort-order="[ { field: 'name', direction: 'asc' } ]"
That means you can also declare multi-column sorting via sort-order prop
multi-sort="true"
:sort-order="[ { field: 'name', direction: 'asc' }, { field: 'email', direction: 'asc' } ]"
new prop: multi-sort-key
By default, after setting multi-sort to true, you can use Alt+Click (or Option+Click on mac) to work with multi-column sorting feature in vuetable. This prop will allow you to use other key instead of alt key. Possible values are alt, ctrl, meta, shift.
detail-row
This props specify the name of a function that will be called to render the detail row. It is an empty string by default, which tells vuetable to ignore detail row rendering.detail-row-id
Each detail row must be associated with a row of data. This prop tells vuetable which field is the unique identifier for each row. By default, it is id.detail-row-transition
Vue.js transition class to be used during opening/closing of any detail row.detail-row-class
A class attribute for detail row. Default is vuetable-detail-row.row-class-callbackvuetable renders each table row. Because of detail row feature will create another hidden row for each record, the table-striped option in CSS framework will not work as expected. This prop can be used to mitigate this problem by allowing vuetable to ask for a class name to be used when rendering each table row.Include build script using browserify #34
vuetable:cell-dblclicked
You can use this event to work with inline editing component like vue-editable as demonstrated in the example here. Close #26http-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 #29on-each-side prop.pagination-config
PaginationMixin
active-class
icons props: first, last
on-each-side. Inspired by Laravel's LengthAwarePagination.__sequence. This special field will display the record sequence number using information from pagination data structure.__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.item-actions option: extra. This option will let you add extra attribute(s) to the generated item action. See doc
vuetable:set-options. You can broadcast this event to vuetable to programmatically set its props from main Vue instance.vuetable now has vueify version in src/components directory. Please see instruction in README.Close #12vuetable cannot find the given pagination-path in the returned JSON. Close #8vuetable-pagination:set-options event. You can now set pagination component from main Vue instance.new Vue({
//...
methods: {
this.$broadcast('vuetable-pagination:set-options', {
icons: {
prev: 'glyphicon glyphicon-chevron-left',
next: 'glyphicon glyphicon-chevron-right'
},
wrapperClass: 'form-inline',
dropdownClass: 'form-control',
linkClass: 'btn btn-default'
})
}
})
vuetable-pagination-dropdown has two new props dropdownClass and pageText
this inside $http.get().vuetable th#_<field_name> to styling table columns, e.g. set each column size.bower.json in v1.0.8{{{ }}} to output value so it can be HTML formattedv1.0.6