Vuetable 2 Versions Save

• Add SSR support, by @amoshydra. Close #512
• Fix totalPage in VuetablePaginationMixin. Thanks to @bernhardh. Close #515, #537, #547.

• Fix #511. [Bug] Promise support in dataManager broken. Thanks @martixy.

New props

• detail-row-options
  • type: Object
  • default: {}
  • description: allow passing additional options to detail row component.
• first-page
  • type: Number
  • default: 1
  • description: Set this prop to 0 for zero based pagination

Changes

• data-manager - should be able to support Promise, thanks @bochkovyi.
• add per-page to watch() section. Close #413. Thanks @lbenevenuto.
• __sequence is now starting from 1 instead of 0 when pagination is disabled. Close #476. Thanks @kapalla.

Fixes

• MIssing header-event in VuetableRowHeader. Close #482 #499. Thanks @martixy and @Atuna.
• Fix function fetch not working as intended when using POST method. Close #388, #392. Thanks @mondul.

Please install using

npm install vuetable-2@next --save-dev

Upgrading From v1.7

Special fields are converted to Field components

You should still able to use it the same way as in previous version. But now you are no longer limited to the provided special fields as in earlier version. You can now implement your own field components and use them with Vuetable.

Internally, Field component is quite different but I've tried my best to make it easy enough to implement one of your own. You can see more information implementation detail in the documentation section. You can also look at source of available field components in the package to see how it's done.

And if you would like to share your own Field components to the others, please let me know. I'll create a link to your work.

__slot:<slotName> special field is no longer needed

Vuetable can now automatically map the scoped slot you defined inside <vuetable>, thanks to the original work by @pyrello for PR #79.

Just removed the __slot: prefix from the name option, everything should still work the same.

// previously
{
  name: "__slot:actions",
}

// now it should just be
{
  name: "actions",
}

Fields definition

• callback is now renamed to formatter

  This is long overdue and intended to emphasize its usage as a formatter for its field specific data value.

• formatter option must now be a Function. String of function name is no longer supported.

  // previously
  let fields = [
    { name: 'code', callback: 'formatCode' }
  ]
  
  // should now be
  let fields = [
    { name: 'code', formatter: (value) => value.toUpperCase() }
  ]
  

  In the above code, formatCode is defined as inline (arrow) function.

  But you can also define formatCode as a function/method somewhere in your code, and reference it as well in case you want to use that formatter more than once.

• name option changes

  Previously, name option is used to maps to a column in your data or special fields (the one with leading double underscore "__").

  For special field, Vuetable will now check the name option in the following order to determine what it is: - if it is a Field component - if there is a scoped slot of that name defined inside <vuetable> tag. - default to column name in the data

  Please find out more here

Props changes

• Props that also accept Function

  • query-params

    It now can also be a function. The function will receive 3 arguments

    • current sort order array
    • current page number
    • current page size

    Using query-params as a function, you can completely override how the query string for ajax request would look like.

    <vuetable
      :query-params="queryParams"
    ></vuetable>
    

    //...
      methods: {
        //...
        queryParams (sortOrder, currentPage, perPage) {
          return {
            '_sort': sortOrder[0].name,
            '_order': sortOrder[0].direction,
            '_page': currentPage,
            '_size': perPage
          }
        }
      }
    

  • detail-row-component

    Now, detail-row-component can also be a (Vue component) Object instead of only a string of component name registered globally.

    This allows you to assign the component directly without having to globally register via Vue.component(...)

• Props that only accept Function

  • transform

    In previous version, to use transform you have to declare the function in the maininstance.

    In this version, it becomes a prop which is functionally the same but this makes it clearer where you can use it.

    To upgrade, just assigned your existing "transform" function/method to this transform prop and it's done.

  • New props

    • field-prefix Vuetable will replace the double underscore characters (__) with this field-prefix.

      By default, it is "vuetable-field-", but you can change this to whatever that suits your need.

      Please note that if you change this to something else, you'll have to register your Field component name accordingly, otherwise the Field component rendering will not work.

      Please make sure that you really understand this before attempting to change it.

    • event-prefix

      The event name that will be prefixed to the event generated by Vuetable.

      By default, it is "vuetable:".

    • header-rows

      Array of components to be called to render table header rows.

      By default, this will call VuetableRowHeader component.

• improve the usability of data prop in Data mode
• remove console.log from codes, fix #376

• Fix error from bagged attribute, thanks to @golubkovden for PR #375 .

• Fix missing sortClass in other parts of template, thanks to @ahmad-saad for PR #374
• Add key to all v-for
• Reformat main Vuetable template

• query-params can also be a Function. It will receive sortOrder, currentPage, and perPage as its parameters. See this for more detail.
• fix event for right-clicking on a cell, by @toshnota.
• fix sorting not working in data mode when clicking at table header.
• fix transition tag position

** Vuetable-2 next version is coming soon! Have a happy holidays! :)

• new event: vuetable:cell-rightclicked, PR #325 by @asychikov
• refresh() and reload() are now return Promise, so you can chain .then method whenever the request ends. PR #316 by @flavio-jr
• Data mode (api-mode="false") improvement, PR #300 by @jwkicklighter

• Fixed header feature is now supported via table-height prop, thanks to @rubinsh PR #266. See doc for more detail.

• new field definition option: width It is recommended that you use the width option to specify the width of each field when using fixed header table. Thanks to @rubinsh.

• no-data-template prop is now support HTML, PR #292. Thanks to @itelmenko.

• new prop: show-sort-icons, also new options in css prop: ascendingClass and descendingClass When enabled, Vuetable will add additional css class to the <th> that would allow specific styling targeting the sort direction. See PR #262 and #263 for more info, thanks to @jwkicklighter.

• new event: vuetable:row-mouseover, thanks to @DorkasV

• new prop: httpFetch (type: Function, default: null) When specified, allowing user to specify external http request function to fetch the data via AJAX, otherwise, fallback to using axios internally as discussed in #127

• new css.sortableIcon option. (type: String, default: '') When given, allow specifying css class to be displayed to provide visual clue which column is sortable. PR #192, thanks to @SUKOHI.

• new prop: initial-page (type: Function, default: 1) Allow specifying the first page number of the data to be loaded during initialization.

• Fixes

  • detail row transition position was incorrectly. Thanks PrimozRome for PR #258, Fixed #257.

• others:

  • Thanks @muhammadsaeedparacha for PR #207 updating doc.
  • Thanks @SergeyMiracle for PR #286, removing babel-preset-2015 dependency.