Search code examples
javascriptvue.jstabulator

How to change Tabulator loading message?


I couldn't find it in the documentation. I want to customize message. Please, share this secret with me).

I use placeholder, but it's not enough, when data loading I want to change default message, something like this 'Please wait, data is loading...', instead of 'Loading...'.

What property I need to use?

 this.tabulator = new Tabulator(this.$refs.table, {
  placeholder: 'Нет данных',
  height: "calc(100vh - 8.2rem)",
  tooltips:true,
  tooltipGenerationMode:"hover",
  tooltipsHeader:true,
  autoResize: true,
  layout: "fitColumns",
  resizableRows: true,
  reactiveData: true,
  columns: this.columns, //define table columns
  rowDblClick: function(e, row) {
    self.$emit('rowDblClick', row.getData());
  },
  ajaxURL: baseUrl + self.defaultUrl,
  ajaxConfig: {
    method:"GET",
    ...baseConfig
  },
  ajaxProgressiveLoad: "scroll",
  ajaxProgressiveLoadScrollMargin: 300,
  ajaxURLGenerator: (url, config, params) => {
    const tc = moment().valueOf()
    return `${url}${self.params.page++}&limit=20&tc=${tc}&param=${self.filter}`;
  },
});

Solution

  • You can use the ajaxLoaderLoading option to pass in a new loader element:

    var table = new Tabulator("#example-table", {
        ajaxLoaderLoading: "<div style='display:inline-block; border:4px solid #333; border-radius:10px; background:#fff; font-weight:bold; font-size:16px; color:#000; padding:10px 20px;'>Loading Data</div>"
    });