Skip to content

Releases: ratiw/vue-table

v1.2.0

29 Jun 08:19
Compare
Choose a tag to compare

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.

v1.1.2

07 Jun 05:58
Compare
Choose a tag to compare

Include build script using browserify #34

v1.1.1

25 May 03:09
Compare
Choose a tag to compare
  • 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.1.0

14 May 06:07
Compare
Choose a tag to compare
  • 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

09 May 17:35
Compare
Choose a tag to compare
  • 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.0.11

04 May 16:58
Compare
Choose a tag to compare
  • vuetable now has vueify version in src/components directory. Please see instruction in README.Close #12
  • A warning will be dump to console if vuetable cannot find the given pagination-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 props dropdownClass and pageText

v1.0.10

27 Apr 14:44
Compare
Choose a tag to compare
  • fix incorrectly referencing this inside $http.get()
  • add id to table column header to allow css format. Now you could use .vuetable th#_<field_name> to styling table columns, e.g. set each column size.

v1.0.9

26 Apr 14:57
Compare
Choose a tag to compare
  • fix dependency problem regarding missing bower.json in v1.0.8
  • small fix on prop validation of vuetable.js

v1.0.8

25 Apr 18:12
Compare
Choose a tag to compare
  • use unsafeDelimiter {{{ }}} to output value so it can be HTML formatted
  • update examples to show search hilight

v1.0.6

21 Apr 12:46
Compare
Choose a tag to compare

v1.0.6

  • hide pagination component if the data returned from the server is zero
  • add pagination-info-no-data-template property. will display when there is no data to display
  • update semantic ui & bootstrap example to demonstrate search implementation