[Table] How should look like sort provider function?

Hello,

My function looks like:

sortProvider(ctx) {
        this.isBusy = true;
        const promise = fetch(`http://localhost:3000/photos?_sort=${ctx.sortBy}&_order=${ctx.sortDesc ? 'asc' : 'desc'}`);

        return promise
          .then((data) => {
            this.totalPhotos = parseInt(data.headers.get('X-Total-Count'), 10);
            return data.json();
          })
          .then((data) => {
            this.isBusy = false;
            return data;
          });
      },

The function works perfect I get sorted data, but table does not reflect to data change.

[tmorehouse]

The sort-changed is just a notification event that the sorting has changed/cleared. It doesn’t receive the sort data or callback or promise. sort-changed is only needed when you are returning an array (or setting an array) via the :items prop.

The provider function assigned to :items will be called when the sorting changes (as long as no-provider-sorting is not set.

The ctx object provided to the :items provider function includes the sortBy and sortDesc.

So do this:

<b-table :items="myProvider"></b-table>

myProvider(ctx) {
  this.isBusy = true;
  let url = `http://localhost:3000/photos?_page=${ctx.currentPage}&_limit=${ctx.perPage}`;
  if (ctx.sortBy) {
    url = `${url}&_sort=${ctx.sortBy}&_order=${ctx.sortDesc ? 'desc' : 'asc'}`;
  }
  return fetch(url)
    .then((data) => {
      this.totalPhotos = parseInt(data.headers.get('X-Total-Count'), 10);
      this.isBusy = false;
      return data.json();
    });
}

[tmorehouse]

Example:

Per Page:
<b-form-select :options="[5, 10, 15]"
               v-model="perPage"
></b-form-select>
<br>
<b-pagination :total-rows="totalPhotos"
              :per-page="perPage"
              v-model="currentPage"
></b-pagination>
<br>
<b-table :items="myProvider"
         :fields="fields"
         :current-page="currentPage"
         :per-page="perPage"
         :busy="isBusy"
></b-table>

App definition:

{
  data: {
    totalPhotos: 0,
    perPage: 5,
    currentPage: 1,
    isBusy: false,
    fields: {
      // Your fields definition
    }
  },
  methods: {
    myProvider(ctx) {
      this.isBusy = true;
      let url = `http://localhost:3000/photos?_page=${ctx.currentPage}&_limit=${ctx.perPage}`;
      if (ctx.sortBy) {
        url = `${url}&_sort=${ctx.sortBy}&_order=${ctx.sortDesc ? 'desc' : 'asc'}`;
      }
      return fetch(url)
        .then((data) => {
          this.totalPhotos = parseInt(data.headers.get('X-Total-Count'), 10);
          this.isBusy = false;
          return data.json();
        });
    }
  }
}

In this example, anytime you click on a pagination page, or sort by clicking a header, then myProvider will be called with the context ctx object set with the appropriate values.