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.