@pderas/vue2-table

1.3.2 • Public • Published

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

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.

Package Sidebar

Install

npm i @pderas/vue2-table

Weekly Downloads

2

Version

1.3.2

License

MIT

Unpacked Size

30.1 kB

Total Files

8

Last publish

Collaborators

  • reed-jones
  • drewpderas