Skip to content

v1.2.0

Compare
Choose a tag to compare
@ratiw ratiw released this 29 Jun 08:19
· 119 commits to master since this release

New Features

  • Support multi-column sorting
  • Detail row to display additional data

Multi-column sorting

  • 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

  • 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 tells vuetable to ignore detail row rendering.
  • new prop: 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.
  • 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 is vuetable-detail-row.

Others

  • new prop: row-class-callback
    Contains the name of a callback function to be called when vuetable 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.