Vue Table

A simple vue component to render dynamic tables with sortable headers.

Initialize

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);

Usage

There are a few steps required before a vue table can be initialized.

1. Headers

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.

Header Options

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

2. Table

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.

Table Options

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

Search Bar Options

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

Ajax Parameters

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.

3. Customization

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

License

This project is covered under the MIT License. Feel free to use it wherever you like.