Introduction
You can create a custom Table Type dedicated to AJAX-sourced data. This approach has the advantage of being totally reuasble, while the AJAX via data function may be less reuasble across multiple table instances.
The example bellow reuses 2 times the same logic, changing only the data
parameter to a different endpoint.
If you want to customize the behavior of multiple tables, you may want to check how to use custom handlers.
Demo
Code
Javascript
import { makeQueryStringFromObj, formatUtcDate } from '../utils.js';
/* globals axios, Vue */
const API_URL = 'https://api.spacexdata.com/v3/launches/upcoming';
new Vue( {
el: '#demo-app',
data: {
columns: [
{ label: 'Flight number', field: 'flight_number' },
{ label: 'Mission name', field: 'mission_name' },
{ label: 'Launch date', field: 'launch_date_utc', representedAs: row => formatUtcDate( new Date( row.launch_date_utc ) ) },
{ label: 'Rocket type', field: 'rocket.rocket_name', sortable: false },
{ label: 'Launch site', field: 'launch_site.site_name_long', sortable: false },
{
label: 'Mission patch',
field: 'links.mission_patch_small',
representedAs: row => row.links.mission_patch_small ?
`<img src="${ row.links.mission_patch_small }" alt="${ row.mission_name } patch" style="height: 6em;"/>` :
`<img src="https://www.gvmc.gov.in/wss/images/noimageavailable.png" alt="No patch for mission "${ row.mission_name }" available" style="height: 6em;"/>`,
interpolate: true,
sortable: false,
},
{ label: 'Reddit link', field: 'links.reddit_campaign', representedAs: row => `<a href="${ row.links.reddit_campaign }">${ row.mission_name } Reddit thread</a>`, interpolate: true, sortable: false },
],
page: 1,
async getData( { sortBy, sortDir, perPage, page } ){
const params = Object.assign(
// See https://documenter.getpostman.com/view/2025350/RWaEzAiG#json-field-masking
{
filter: this.columns.map( col => col.field.replace( /\./g, '/' ) ).join( ',' ),
// Paging
offset: ( ( page - 1 ) * perPage ) || 0,
limit: perPage || 10,
},
// Sorting
sortBy && sortDir ? {
sort: sortBy.replace( /\./g, '/' ),
order: sortDir,
} : {},
);
const url = `${ API_URL }?${ makeQueryStringFromObj( params ) }`;
const {
// Data to display
data,
// Get the total number of matched items
headers: {'spacex-api-count': totalCount},
} = await axios.get( url );
return {
rows: data,
totalRowCount: totalCount,
};
},
},
} );
HTML
<div id="demo-app">
<div class="row">
<div class="col-xs-12 table-responsive">
<datatable :columns="columns" :data="getData"></datatable>
<datatable-pager v-model="page"></datatable-pager>
</div>
</div>
</div>