A simple vue component to render dynamic tables with sortable headers.
Vue table is built as a vue plugin. It can be initialized just as the Vue documentation states.
import VueTable from '@pderas/vue2-table';
Vue.use(VueTable);There are a few steps required before a vue table can be initialized.
Headers need to be defined before a table can be created. There are multiple options available for a header including it's label and if its sortable or not. A headers array that can be passed to vue table could look like this.
[{
label: 'Status',
sortBy: 'status'
},
{
label: 'Client Name',
sortBy: 'client_name'
},
{
label: 'Service Date',
sortBy: 'service_date'
},
{
label: '',
sortBy: '',
disabled: true
}]*Note: Notice the last header not having any labels. This column would be used for buttons on the row which is why the sorting is disabled.
| Option | Description | Required |
|---|---|---|
| disabled | Boolean that defines if a header can be clicked or not | No |
| label | The title of the header | Yes |
| sortBy | The column name for the backend data | Yes |
| width | A defined width for the header in px. | No |
A vue table passes the information recieved from the url back into the view component so that it can be used in the row. A sample vue table could look like this.
<vue-table url="/clients/search" :headers="headers" :methods="methods">
<template slot="row" slot-scope="{ row }">
<tr>
<td>{{ row.status }}</td>
<td @click="row.methods.goTo('/clients')">
{{ row.name }}
</td>
<td>{{ row.service_date }}</td>
<td>Status</td>
</tr>
</template>
</vue-table>If you want to run any functions with a row action you can pass them into the vue table using the methods prop. All methods are then accessible in the row using the row.methods object.
*Note: It is very important to define the scope of the template so that the data can be passed from the parent component into the children being defined for the rows.
| Prop | Description | Required |
|---|---|---|
| headers | An array to populate the table headers | Yes |
| url | The url to retrieve data from. | No |
| data | An array to define the table data if a url is not provided. | No |
| hasSearch | Display the search bar. | No |
| methods | An object containing any functions to run within a row of the table. | No |
| paginate | The number of items to paginate the table to. | No |
| searchParams | An object of key/value pairs to add to the search. | No |
| showEmpty | Pad paginated data with blank rows. | No |
| beforeUpdate | Function to be called before updating the table. | No |
| afterUpdate | Function to be called after updating the table. | No |
| vuexSet | The name of the commit function to run for vuex integration. | No |
| vuexGet | The name of the getter function to run for vuex integration. | No |
There are options to change the functionality of the search bar. These can be changed through the global options given when the plugin is activated.
import VueTable from '@pderas/vue2-table';
Vue.use(VueTable, {
expandible: false,
iconClasses: fa fa-search
});| Option | Description | Values |
|---|---|---|
| expandible | Determines if the search expands on focus. | true/false |
| iconClasses | The classes to generate the icon for the search bar | String |
| iconSide | Determines what side the icon shows on. | left/right |
| searchWhen | Determines when a search is run | onDelay/onEnter |
| timeoutDelay | How long to wait before running a new search. (Only applies when searchWhen set to 'onDelay') | Number |
| defaultTerm | The initial term to use when the searchbar loads. | String |
If a url is provided an ajax call is triggered every time a column is sorted or a search is run. The following parameters will be sent to the url provided.
| Parameter | Description |
|---|---|
| order | The order to sort the data by. Either 'asc' or 'desc'. |
| paginate | The amount of rows to paginate by. |
| selectedCol | The sortBy value of the current column selected for sorting. |
| term | The current search term. |
Slots are used to provide additional items to the table while still keeping styles coherent.
| Slot | Description |
|---|---|
| row | Defines what a table row should look like. |
| actions | Add actions buttons inline with the search bar |
This project is covered under the MIT License. Feel free to use it wherever you like.