Releases: ratiw/vue-table
Releases · ratiw/vue-table
v1.2.0
New Features
- Support multi-column sorting
- Detail row to display additional data
Multi-column sorting
-
new prop:
multi-sort
Set totrue
to enable multi-column sorting interaction. Default isfalse
. -
change:
sort-order
--This is a breaking change.
sort-order
in v1.2.0 is now andArray
instead ofObject
in order to support multi-column sorting feature. You can easily upgrade to v1.2.0 just by enclosing existingsort-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
propmulti-sort="true" :sort-order="[ { field: 'name', direction: 'asc' }, { field: 'email', direction: 'asc' } ]"
-
new prop:
multi-sort-key
By default, after settingmulti-sort
totrue
, you can use Alt+Click (or Option+Click on mac) to work with multi-column sorting feature invuetable
. This prop will allow you to use other key instead ofalt
key. Possible values arealt
,ctrl
,meta
,shift
.
Detail row
- new prop:
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 tellsvuetable
to ignore detail row rendering. - new prop:
detail-row-id
Each detail row must be associated with a row of data. This prop tellsvuetable
which field is the unique identifier for each row. By default, it isid
. - new prop:
detail-row-transition
Vue.js transition class to be used during opening/closing of any detail row. - new prop:
detail-row-class
A class attribute for detail row. Default isvuetable-detail-row
.
Others
- new prop:
row-class-callback
Contains the name of a callback function to be called whenvuetable
renders each table row. Because of detail row feature will create another hidden row for each record, thetable-striped
option in CSS framework will not work as expected. This prop can be used to mitigate this problem by allowingvuetable
to ask for a class name to be used when rendering each table row.
v1.1.2
v1.1.1
- 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
andhttp-options
These two props will accept object that will be passed through to vue-resource's$http
during theGET
call to request data from server as documented here. So, if the server you're contacting requires JWT Auth, you could usehttp-options
to set the token in theheader
option. Close #29
v1.1.0
- VuetablePaginationBootstrap is deprecated and will be removed in the next release. Use VuetablePagination with additional config instead.
- VuetablePagination is now rendered as sliding pagination when there are more pages than the calculated value from
on-each-side
prop. - new option:
pagination-config
- update examples
PaginationMixin
- new prop:
active-class
- new option in
icons
props:first
,last
- new prop:
on-each-side
. Inspired by Laravel's LengthAwarePagination. - new computed props to support sliding pagination
v1.0.12
- 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 (usualyid
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 tovuetable
to programmatically set its props from main Vue instance.
v1.0.11
vuetable
now has vueify version insrc/components
directory. Please see instruction in README.Close #12- A warning will be dump to console if
vuetable
cannot find the givenpagination-path
in the returned JSON. Close #8 - Pagination component will no longer appear if there is only one page to display. Close #13
- Add
vuetable-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 propsdropdownClass
andpageText