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.