[Vuejs]-Tabulator – how to display a loading indicator while data is fetched from db based on a prop?

by

3👍

✅

Tabulator has a built in loading overlay when it is loading data via ajax, which can be customised on the ajaxLoaderLoading option

var table = new Tabulator("#table", {
    ajaxLoaderLoading:"<span>Loading Data</span>",
});

If you want you want to load your data outside of Tabulator and then load the data in with the setData command, then this is outside of the scope of tabulator.

The easiest approach to this would be to absolutely position an element over the Tabulator that is shown when you trigger your DB load.

👤Oli Folkerd

2👍

In tabulator 5, the new option is called dataLoaderLoading. According to the documentation you can pass an ‘html’. In the code, this can be a string or an html component. I think there is a bug when you pass a string and the html is not correctly generated (from what I can tell the way the Template element is used). So to get it to work I had to pass the html element, something in the lines of:

const template = document.createElement('template');
template.innerHTML = '<div style="display:inline-block;" class="d-flex flex-row">' +
                    '<div>Loading... </div>' +
                    '<div class="ml-2 activity-sm" data-role="activity" data-type="atom" data-style="dark"></div>' +
                '</div>';
const dataLoaderLoading = template.content.firstChild;
...
new Tabulator("#mytable", {
    dataLoaderLoading: dataLoaderLoading,
    ...
👤Arcanefoam

Leave a comment