pagination in b table in bootstrap vue
To add pagination to a <b-table>
component in Bootstrap Vue, you can use the b-pagination
component provided by Bootstrap Vue. Here's an example of how you can achieve this:
<template>
<div>
<b-table :items="items" :fields="fields" :per-page="perPage" :current-page="currentPage">
<!-- Your table columns definition here -->
</b-table>
<b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
</div>
</template>
<script>
export default {
data() {
return {
items: [/ Your table data here /],
fields: [/ Your table fields definition here /],
perPage: 10, // Number of items to display per page
currentPage: 1, // Current page number
totalRows: 100, // Total number of rows in your table
};
},
};
</script>
In the above example, we have a <b-table>
component that displays the table data using the items
and fields
properties. The :per-page
and :current-page
props are used to control the number of items per page and the current page number, respectively.
The <b-pagination>
component is added below the table to display the pagination controls. The v-model
directive is used to bind the current page number to the currentPage
data property. The :total-rows
prop is set to the total number of rows in your table, and the :per-page
prop is set to the number of items per page.
You can customize the table data, fields, and pagination options based on your specific requirements. This example provides a basic setup for adding pagination to a <b-table>
component in Bootstrap Vue.