Home » vue » tabulator – how to display a loading indicator while data is fetched from db based on a prop?

tabulator – how to display a loading indicator while data is fetched from db based on a prop?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I created a tabulator component in my vue app and I am passing Tabulator options data and columns via props as following:

// parent component
<template>
    <div>
        <Tabulator :table-data="materialsData" :table-columns="options.columns" :is-loading="materials.isLoading" />
    </div>
</template>

...
// Tabulator component
props: {
    tableData: {
        type: Array,
        default: function() {
            return [
                { name: "Billy Bob", age: "12" },
                { name: "Mary May", age: "1" },
            ];
        },
    },
    tableColumns: {
        type: Array,
        default: function() {
            return [
                { title: "Name", field: "name", sorter: "string", width: 200, editor: true },
                { title: "Age", field: "age", sorter: "number", align: "right", formatter: "progress" },
            ];
        },
    },
    isLoading: {
        type: Boolean,
        default: true,
    },
},
mounted() {
    // instantiate Tabulator
    this.tabulator = new Tabulator(this.$refs.table, {
        placeholder: "loading data...",
        //placeholder: "<font-awesome-icon icon='circle-notch' spin size='2x' />",
        data: this.tableData, // link data to table (passed as prop)
        columns: this.tableColumns, // define table columns (passed as prop)
    });
},

everything works well besides indicating to the user that data is loading. I first tried using the placeholder option (http://tabulator.info/docs/4.7/layout#placeholder) but realized it is not applicable because it is also rendered when no data is displayed.

is there a way to tell Tabulator to preferably render a loading spinner or a text, based on my prop isLoading?

Answers:

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.