###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

| Prop | Types | Default | Description | |---|---|---|---| | *fetchCallback | Function | - | must be function which returns promise. Fills datatable body with data. | | disableSearch | Boolean | False | show or hide search field | | disableHeader | Boolean | False | show or hide table header | | disablePagination | Boolean | False | show or hide pagination | | show-select | Boolean | False | show or hide select all column |

*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

| Prop | Types | Default | Description | |---|---|---|---| | *field | String | - | datatable field data | | sortable | Boolean | False | sort datatable column | | render | Function | - | adds Raw HTML option for datatable field |

*is required

####Pagination

Pagination contains show items per page filter and pagination