ajax-table-vue

Vue module for asynchronous data management

Getting started

Install the package

To install this package, simply install ajax-table-vue with your favorite package manager:

# Using npm
npm install ajax-table-vue

Import the package

Use the ESM build

The [ESM] build (EcmaScript Module) implies that your target browsers supports ESM OR you use a bundler, like webpack, rollup.js or Parcel.

Import & register two main components in Vue globally:

import Vue from 'vue';
import {AjaxTable, Column} from 'ajax-table-vue';

Register two main components globally:

Vue.component('ajax-table', AjaxTable);
Vue.component('column', Column);

Or locally:

const app = new Vue({
    el: '#app',
    components: {
        'ajax-table': AjaxTable,
        'column': Column
    }
});

Base usage

Use the components in your HTML or template:

Note: uri endpoint must be POST

<div id="app">
    <ajax-table uri="https://endpoint-for-data">
    <!-- columns base config -->
       <template #columns>
           <column label="Id" name="id"></column>
           <column label="Name" name="name"></column>
       </template>
    </ajax-table>
</div>

Customize the table

filtering and sorting

You can disable or enable filtering and sorting using the following non-required props(they are by default - true): filterable, sortable. Here's an expample:

...
<column label="Name" name="name" :filterable="false" :sortable="true"></column>
...

filtering input

You can customize filtering input in columns like this:

<div id="app">
    <ajax-table uri="https://endpoint-for-data">
    <!-- columns base config -->
       <template #columns>
           <column label="Id" name="id"></column>
           <column label="Name" name="name"></column>
       </template>
       
       <!-- Note: column name should go after #filter- -->
        <template #filter-id="{filters, col}">
            <select v-model="filters[col]">
                <option value="" selected>-</option>
                <option>1</option>
                <option>2</option>
            </select>
        </template>
    </ajax-table>
</div>

table values customization

<div id="app">
    <ajax-table uri="https://endpoint-for-data">
    <!-- columns base config -->
       <template #columns>
           <column label="Id" name="id"></column>
           <column label="Name" name="name"></column>
       </template>
       
       <!-- Column specific value customization -->
       <!-- Note: column name should go after #value- -->
        <template #value-id="{value}">
            {{ value !== null ? value : 'No data available' }}
        </template>

       <!-- All column values customization -->
       <!-- Will be overwritten if column specific value customization is present  -->
        <template #value="{value}">
            {{value !== null ? value : 'No data'}}
        </template>
    </ajax-table>
</div>

adding actions

All action components should be extended from ActionButton component:

import {ActionButton} from 'ajax-table-vue';

Vue.component('action-button-delete', {
  extends: ActionButton,
  data: function () {
    return {
    }
  },
  methods: {
    alertId() {
        alert(this.row.id);
    }
},
  template: '<button @click.prevent="alertId"><slot>Delete</slot></button>'
})

<div id="app">
    <ajax-table uri="https://endpoint-for-data">
    <!-- columns base config -->
       <template #columns>
           <column label="Id" name="id"></column>
           <!-- Actions column, name must be equal: 'actions' -->
           <column label="Actions" name="actions"></column>
           <column label="Name" name="name"></column>
       </template>

        <!-- variable row allows to access all values in a row -->
        <template #actions="{row}">
            <action-button-delete :row="row"></action-button-delete>
            <action-button-delete :row="row"></action-button-delete>
        </template>
    </ajax-table>
</div>

Data structure

Data being received from the server

{
    "0": {
        "id": 1,
        "name": "Name"
    },
    "1": {
        "id": 2,
        "name": "Another name"
    },
    "meta": {
        "pagination": {
            "total_pages": 2
        }
    }
}

Data being sent to the server

Using filtering and sorting:

{
"filter":[
    {
    "col":"name",
    "value":"qwe"
    }
],
"sort":{
    "col":"id",
    "order":"desc"
},
"page":1
}

Without using filtering and sorting:

{
"filter":[],
"sort":{},
"page":1
}