@western-investment/vue-datatable v0.1.8

###Description

vue-datatable is a package for creating datatable with filter and pagination options.
Package is using Font Awesome and lodash dependencies.

###Installation

npm install @western-investment/vue-datatable

###Usage

• Import plugin and use it by calling Vue.use() global method.

import Datatable from '@western-investment/vue-datatable'

Vue.use(Datatable)

note

As a second parameter, pass object, which is used for translating specific fields of datatable.
If second parameter is not passed, default property values are shown.

Vue.use(Datatable, {
    lang: {
        searchText: __('Search'),
        filterText: __('Filter'),
        clearFiltersText: __('Clear filters'),
        nextText: __('Next'),
        prevText: __('Previous')
    }
})

• Use plugin as component. :fetch-callback is required and must be a function which returns promise.
  <wi-table-column field="..."> is required for data to be shown.

<wi-table
    :fetch-callback="fetch"
>
    <wi-table-column field="id">Id</wi-table-column>
    <wi-table-column field="subject">Subject</wi-table-column>
</wi-table>

note

Promise return structure example:

   data: [
       {
         id: '1',
         subject: 'First'
       },
       {
         id: '2',
         subject: 'Second'
       }
     ]

###Datatable

Datatable plugin consists of these parts:

1. Table frame
2. Header
3. Table columns
4. Pagination

####Table

*is required

####Header

Use slot="filtersForm", to add your preferred filters for datatable. Header also shows clear filters and filter buttons once slot is added.

<wi-table :fetch-callback="fetch">
    <div slot="filtersForm">
        ...
    </div>
    ...
</wi-table>

####Table columns

*is required

####Pagination

Pagination contains show items per page filter and pagination