BootstrapVue b-table not displaying received items when using pagination

Question

I'm using the b-table from BootstrapVue with pagination. However, whenever I change pages, the items received from my REST API do not display, even though they are present. I have added a watcher to detect changes in the items array, and the console inside the watcher works as expected. The first page displays the items correctly, but subsequent pages do not. However, if I go back to the first page, the previously empty b-table loads the items.

After researching, I found that this is a known limitation:

b-table doesn't always know if the items being replaced (specifically when using external pagination) are from the same table or if the items array changes (i.e., to new data altogether). It must clear the selected items array whenever anything changes the table's context (sorting, filtering, pagination, table refresh, etc.).

My Current Implementation:

<b-table 
    v-if="showTable" 
    id="my-table1" 
    :items="tableItems" 
    :fields="fields" 
    :busy="isBusy"
    :per-page="limit" 
    :current-page="currentPage" 
    stacked="md" 
    table-class="padding"
    :tbody-tr-class="rowClass" 
    show-empty 
    small 
    responsive 
    hover 
    borderless
    selectable
>
</b-table>

Script:

props: {
   fields: {
       type: Array,
       default: () => []
   },
   items: {
       type: Array,
       default: () => []
   },
   totalRows: {
       type: Number,
       default: 0
   },
   isBusy: {
       type: Boolean,
       default: false
   },
},
data() {
    return {
        currentPage: 1,
        limit: 5,
        tableItems: [],
        selectedRows: [],
    };
},
watch: {
     items: {
        handler(newItems) {
        console.log("\n \n items changed", newItems);
        this.updateTableItems(newItems);
    },
  },
},
methods: {
    updateTableItems(newItems) {
           this.tableItems = [];
           this.$nextTick(() => {
                this.tableItems = [...newItems];
       });
    },
    changePage(page) {
        this.currentPage = page;
        this.$emit("pageChange", (page - 1) * this.limit, this.limit);
    }
}

Issue:

When switching pages items are not displaying.

How can I persist pagination in b-table? Any guidance or workaround would be greatly appreciated!

Hiws · Accepted Answer · 2025-02-18 12:55:05Z

0

As you've already found, it's not something that the component supports.

Instead what you can do is do the selection logic yourself. Handling the state outside of the table, and opting out of the built-in system.

This way the state wont be cleared when the table items changes.

new Vue({
  el: '#app',
  computed: {
    selectedRows() {
      return this.items.filter(item => item.selected)
    }
  },
  data() {
    return {
      fields: [{
          key: "selected"
        },
        {
          key: "id",
          sortable: true
        }
      ],
      items: [],
      perPage: 50,
      currentPage: 1
    }
  },
  methods: {
    clearSelected() {
      this.selectedRows.forEach((item) => {
        this.$delete(item, 'selected')
      })
    },
    tbodyRowClass(item) {
      /* Style the row as needed */
      if (item.selected) {
        return ["b-table-row-selected", "table-primary", "cursor-pointer"]
      } else {
        return ["cursor-pointer"]
      }
    },
    rowClicked(item) {
      if (item.selected) {
        this.$set(item, 'selected', false)
      } else {
        this.$set(item, 'selected', true)
      }
    }
  },
  created() {
    for (let i = 1; i < 5000; i++) {
      this.items.push({
        id: i
      })
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.css" />

<div id="app">
  <b-container>
    <b-btn class="float-right" :disabled="selectedRows.length === 0" @click="clearSelected">
      Clear selection
    </b-btn>

    <b-pagination :per-page="perPage" v-model="currentPage" :total-rows="items.length"></b-pagination>
    Amount of items selected: {{ selectedRows.length }}

    <b-table :items="items" :fields="fields" :per-page="perPage" :current-page="currentPage" @row-clicked="rowClicked" :tbody-tr-class="tbodyRowClass" primary-key="id">
      <template v-slot:cell(selected)="{ item, field: { key } }" >
        <b-checkbox v-model="item[key]"></b-checkbox>
      </template>
    </b-table>
  </b-container>
</div>

answered Feb 18 at 12:55

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abhikrishnan S S Feb 19 at 4:01

Thank you, Hiws, and thanks for your time. Actually, I made a mistake in my question. The b-table loads its first-page items without any issues. However, when I switch to the second page, even though the items array is present, the b-table doesn’t display it.

Abhikrishnan S S Feb 19 at 4:08

You can see that my script contains a watcher that detects changes in the items array. I also added a console log to check the content of the updated items array. The data appears to be correct, but the b-table doesn’t display the updated data. The same issue occurs on subsequent pages. However, if I go back to the first page, the table displays the items correctly.

Hiws Feb 19 at 11:23

Sounds like your tableItems only contains the items for a single page, but you're changing currentPage. So it sounds like you just want to remove currentPage from the table.

Hiws Feb 19 at 11:24

I also think it would've been better to ask a new question instead of editing your post to something completely different.

Collectives™ on Stack Overflow

BootstrapVue b-table not displaying received items when using pagination

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related