v2.0.0-beta.1

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.