Vue Table

Vue table component for rendering server-side data.

Main features

• Server-side data
• Searchable columns
• Sortable columns
• Filterable columns
• Drag and drop for reordering the tables' rows
• Store modules
• Persist the state to local storage

Installation

# NPM
npm install @kriptiko/vue-table

# Yarn
yarn add @kriptiko/vue-table

Usage

import Vue from 'vue'
import VueTable from '@kriptiko/vue-table'

Props

Actions API

Example

data(){
    return {
        actions: {
            classes: "text-right align-middle",
            slots: [
                "edit",
                "delete"
            ]
        }
    };
}

<vue-table :actions="actions">
    <template v-slot:action-edit="slotProps">
        <a class="btn btn-sm btn-info"
           :href="`${options.uri}/${slotProps.item.id}/edit`"
        >
            <i class="fas fa-pencil-alt"></i>
        </a>
    </template>

    <template v-slot:action-delete="slotProps">
        <a class="btn btn-sm btn-danger" href="#" @click.prevent="handleItemDeleted(slotProps.item)">
            <i class="fas fa-trash-alt"></i>
        </a>
    </template>
</vue-table>

Columns API

Sorting API

You can set a default sorting for your table's columns by passing a prop containing an array of objects with the names of the columns and respective sorting directions. Here's an example:

sorting: [
    {
        column: "name",
        direction: "asc"
    },
    {
        column: "created_at",
        direction: "desc"
    }
],

Request payload

Whenever you sort a column, the current sorting information will be attached to the request. For the previous example, this is how the payload will look like:

sorting[0][column]: name
sorting[0][direction]: asc
sorting[1][column]: name
sorting[1][direction]: created_at

Filters

If you need to filter a column, you can use the v-filter-column directive.

<template>
    <select v-filter-column="'city'">
        ...
    </select>
</template>

<script>
    import { filterColumn, VueTable } from '@kriptiko/vue-table';

    export default {
        components: {
            VueTable
        },
        directives: {
            filterColumn 
        }
    }
</sc

This directive will sync your selector with the city column.
Here's an example of the data that will be attached to the request when you select an option:

filters[0][column]: name
filters[0][values][0]: Ada Stark

It also works with selectors with the multiple attribute. In these cases, the request will look like this:

filters[0][column]: city
filters[0][values][0]: Abbottton
filters[0][values][1]: Benborough

This will append the data to the request in order to search for the selected value in the column with the name city. Check the Columns API for more info.

Storage of the current selection

In addition to triggering a request to the server, the directive is also responsible for storing the current value of the selector in local storage. Thus, when the page loads, the option gets automatically selected.

Let's say you're fetching data for your selector from an external API and you need the selection to be triggered after the options have been loaded. In that case, you can use the vueTable.optionsLoaded event as follows:

// Get the cities from an external API.

<template>
    <vue-table v-bind="options" :items.sync="items">
        <template v-slot:filters>
            <div class="col-md-3">
                <select class="custom-select" v-filter-column="'city.id'" ref="cityFilter">
                    <option value="">Cities</option>
                    <option v-for="city in filters.cities" :value="city.id" :key="city.id">
                        {{ city.name }}
                    </option>
                </select>
            </div>
        </template>
    </vue-table>
</template>

<script>
    import { filterColumn, VueTable } from '@kriptiko/vue-table';

    export default {
        name: 'App',
        components: {
            VueTable
        },
        directives: { filterColumn },
        data() {
            return {
                items: [],
                filters: {
                    cities: [],
                },
                options: {},
            };
        },
        methods: {
            /**
             * Get the cities from an external API.
             */
            getCitiesOptions: function () {
                const axios = require('axios');

                axios.get('https://api.sandbox.codetech.pt/api/cities')
                    .then(response => {
                        new Promise((resolve) => {
                            this.filters.cities = response.data.data;

                            resolve();
                        })
                            .then(() => {
                                this.$refs.cityFilter.dispatchEvent(new Event('vueTable.optionsLoaded'));
                            });
                    });
            }
        },
        mounted() {
            this.getCitiesOptions();
        }
    };
</script>

Filters slot

You can make use of the filters slot for placing your selectors inline with the search bar. See this example:

<vue-table>
    <template v-slot:filters>
        <div class="col-md-3">
            <select class="form-control" v-filter-column="'city'">
                <option>Cities</option>
                <option value="Abbottton">Abbottton</option>
                <option value="Camrenland">Camrenland</option>
                <option value="Delfinamouth">Delfinamouth</option>
                <option value="East Benborough">East Benborough</option>
                <option value="Feeneymouth">Feeneymouth</option>
                <option value="Sipesburgh">Sipesburgh</option>
            </select>
        </div>
    </template>
</vue-table>

License

kriptiko/vue-table is open-sourced software licensed under the MIT license.

About Kriptiko

Kriptiko is a Creative Studio specialized in web development based in Matosinhos, Portugal.