Vue-good-table: Pagination Options - customize footer navigation info

[dsinibaldi77]

Issue Type

• [x] Enhancement Request

Specs

Version "2.21.3", all browsers

Expected Behavior

https://xaksis.github.io/vue-good-table/guide/configuration/pagination-options.html#enabled

In the pagination options add a parameter to customize the text "Showing X to XX of XX entries".
Now is implemented only ofLabel.

[TheJaredWilcurt]

I think it makes the most sense to remove the ofLabel prop, and replace it with a string containing keywords that represent dynamic data. Many languages are not structured the same as English and may need to move parts of the data around inside of a sentence to sound correct.

So you instead pass in:

paginationOptions: {
  text: 'Displaying {{ first }} thru {{ last }} of {{ total }} kittens.'
}

Then VGT could take that value and replace the data in it:

computed: {
  paginationText: function () {
    let text = this.paginationOptions.text || 'Showing {{ first }} to {{ last }} of {{ total }} entries.';
    text = text.replace('{{ first }}', this.first);
    text = text.replace('{{ last }}', this.last);
    text = text.replace('{{ total }}', this.total);
    return text;
  }
}

Then people can localize it to any language, or just tweak the formatting back to its previous state 1-100 of 450.

[xaksis]

Yeah, I plan on re-writing the pagination bit this weekend. Recent PRs have added a hodgepodge of code/functionality to it and it needs some TLC.

[xaksis]

new property infoFn added paginationOptions allows you to lay out info however you like:
https://xaksis.github.io/vue-good-table/guide/configuration/pagination-options.html#pagination-label-text-options

closing.

[dsinibaldi77]

Thank you @xaksis ! I love vue-good-table !