Incorporating a tabulator component into my vue app, I have set up the Tabulator options data and columns to be passed via props like this:
// 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)
});
},
The functionality is smooth except for indicating to the user that data is in the process of loading. Trying out the placeholder option () initially seemed promising, but it proved unsuitable as it gets rendered even when no data is present.
Is there a way to instruct Tabulator to display a loading spinner or text based on the prop isLoading?