vue b-table customize pagination to show all rows - vue.js

Question

I am using bootstrap-vue. For pagination of a b-table, I used b-pagination component with the following code for the template:
<div class="description perpage">Per page</div>
<b-form-select class="numPerPage" v-model="perPage" :options="pageOptions"></b-form-select>
<b-col sm="7" md="6" class="pagination">
<b-pagination
:total-rows="totalRows"
v-model="currentPage"
:per-page="perPage"
align="fill"
class="my-0"
aria-controls="my-table"
last-number
></b-pagination>
</b-col>
<div class="description found">Found: {{this.totalRows}}</div>
</div>
<b-table
id="my-table"
show-empty
striped
hover
sticky-header="true"
:items="filteredItems"
:fields="fields"
:per-page="perPage"
:current-page="currentPage"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc">
and the following for the script part:
data() {
return {
totalRows: 1,
perPage: 10,
currentPage: 1,
sortBy: "name",
sortDesc: false,
pageOptions: [5, 10, 20, 50, "show all"],
fields: [..myfields]
};
}
And if I use "show all" in the options field it will show all rows, but it will not properly set the pagination to only one available page.
current display
I want to achieve showing the correct pagination option (only one page) or be able to hide the whole pagination when the "show all" option was made.
How can I get this done?

Answer 1

The easiest way would be to set your show all option to a REALLY high number. To do this you could use the constant Number.MAX_SAFE_INTEGER which contains the number of 9007199254740991.
Which i would safely guess you wont reach in rows.
If you want to hide the pagination completely when the show all option is selected, you could instead set the value to 0. This will show all rows too.
Then you add a v-if to your pagination <b-pagination v-if="perPage !== 0">, which will hide it when that option is selected.
new Vue({
el: '#app',
created() {
for (let i = 0; i < 1000; i++) {
this.items.push({
id: i + 1
});
}
},
computed: {
totalRows() {
return this.items.length
}
},
data() {
return {
perPage: 10,
currentPage: 1,
sortBy: "name",
sortDesc: false,
/* Number.MAX_SAFE_INTEGER = 9007199254740991 */
pageOptions: [5, 10, 20, 50, {
value: Number.MAX_SAFE_INTEGER,
text: "show all"
}],
items: []
}
}
})
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.js"></script>
<div id="app">
<div class="description perpage">Per page</div>
<b-form-select class="numPerPage" v-model="perPage" :options="pageOptions"></b-form-select>
<b-pagination
:total-rows="totalRows"
v-model="currentPage"
:per-page="perPage"
align="fill"
class="my-0"
aria-controls="my-table"
></b-pagination>
<div class="description found">Found: {{ this.totalRows }}</div>
<b-table
id="my-table"
show-empty
striped
hover
sticky-header="true"
:items="items"
:per-page="perPage"
:current-page="currentPage"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc">
</b-table>
</div>