Cannot get sorting to work when source of table data is Ajax

Thanks @pstephan1187 for this great plugin. I am however unable to get sorting to work, or even the sorting icons to appear when the source of the table data is an API loaded via Ajax.

Below is my code setup…

---

main.js code…

import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap-vue/dist/bootstrap-vue.css';

import Vue from 'vue'; import DatatableFactory from 'vuejs-datatable'; import BootstrapVue from 'bootstrap-vue';

import App from './App'; import router from './router';

DatatableFactory.useDefaultType(false) .registerTableType('datatable', (table_type) => { table_type.mergeSettings({ table: { class: 'table hover table-scroll', // table sorting: { classes: { canSort: ['sort'], // 'btn', 'btn-link', 'text-muted', sortNone: ['fa', 'fa-sort'], sortAsc: ['fa', 'fa-sort-down'], sortDesc: ['fa', 'fa-sort-up'], } } }, pager: { classes: { pager: 'pagination text-center', // selected: 'current', li: 'page-item', a: 'page-link', } } }); });

Vue.use(BootstrapVue); Vue.use(DatatableFactory); Vue.config.productionTip = false;

new Vue({ el: '#app', router, template: '<App/>', components: { App }, });

---

User.vue code

<template> <div> <h5>User List</h5>

<div class="col-md-12"> <div id="table" class="col-xs-12 table-responsive">

<datatable :columns="user.columns" :data="getData">

<template slot-scope="{ row }"> <tr> <td>{{row.first_name}}</td> <td>{{row.last_name}}</td> <td>{{row.national_id}}</td> <td>{{row.dob}}</td> <td>{{row.activated}}</td>

</tr> </template>

</datatable>

</div> </div>

<div class="col-md-12"> <div class="col-xs-12 form-inline"> <datatable-pager v-model="user.page" type="abbreviated" :per-page="user.perPage"></datatable-pager> </div> </div>

</div> </template>

<script> import axios from 'axios';

export default { data() { return { user: { columns: [ { label: 'First Name', field: '', sortable: true }, { label: 'Last Name', field: '', sortable: true }, { label: 'National ID', field: '', sortable: true }, { label: 'Date of Birth', field: '', sortable: true }, { label: 'Activated', field: '', sortable: true }, ], rows: [], page: 1, perPage: 2, }, }; }, methods: { getData: (params, setRowData) => { axios.get('/api/user', { params: params } ).then( function(res) { setRowData( res.data.data, res.data.data.length, ); }.bind(this)); } } }; </script>

I was expecting my CSS sorting classes to at least be applied on the table’s headers…

[SerGioPicconti]

You’re welcome))

Problem is that you have not defined field value in columns array:

columns: [
{ label: 'First Name', field: '**user.name**', sortable: true },
{ label: 'Last Name', field: '**user.last_name**', sortable: true },
{ label: 'National ID', field: '**user.id**', sortable: true },
{ label: 'Date of Birth', field: '**user.date**', sortable: true },
{ label: 'Activated', field: '**user.activated**', sortable: true },
]

Hahaha, Works like a charm! What a shame I didn’t think of that … Thank you so much for your help @SerGioPicconti !

[sobiero]

Problem is that you have not defined field value in columns array:

columns: [
{ label: 'First Name', field: '**user.name**', sortable: true },
{ label: 'Last Name', field: '**user.last_name**', sortable: true },
{ label: 'National ID', field: '**user.id**', sortable: true },
{ label: 'Date of Birth', field: '**user.date**', sortable: true },
{ label: 'Activated', field: '**user.activated**', sortable: true },
]

Hahaha, Works like a charm! What a shame I didn’t think of that, what a Shame… Thank you so much for your help @SerGioPicconti !