Table row index Starts from Zero for each pagination.

[Safnaj]

Describe the bug

I am using btable to display some records to the table with pagination & search. Unfortunately the records have an Auto increment value to display as serial number in the table. template #cell(index)="data">{{ data.index + 1 }}</template> by having this record, the row numbers displays well but its starts from again one when i navigate to other pages.

Steps to reproduce the bug

from the below screenshot you can see that the index starting from one even in the 4th page.

Expected behavior

The index number should continue when navigation to next pages.

Versions

Libraries:

• BootstrapVue: 2.21.2
• Bootstrap: 4.6.0
• Vue: 2.6.14

Environment:

• Device: Macbook Pro
• OS: MacOS Big Sur
• Browser: Chrome
• Version: 91

Additional context - Code

<b-table
  v-if="items && items.length !== null"
  striped
  hover
  sort-icon-left
  :filter="filter"
  :per-page="perPage"
  :items="allVouchers.map(item => item)"
  :fields="fields"
  :current-page="currentPage"
  thead-class="blue"
>
  <template #cell(index)="data">
    {{ data.index + 1 }}
  </template>
</b-table>
<b-pagination
  v-model="currentPage"
  :total-rows="rows"
  :per-page="perPage"
  aria-controls="my-table"
></b-pagination>

Script:

data() {
    return {
      filter: "",
      perPage: 10,
      currentPage: 1,
      fields: [
        {
          key: "index",
          label: "#"
        },
        {
          key: "categoryType"
        },
  }

[Hiws]

This is intended behavior.

See the index description in the table under the snippet https://bootstrap-vue.org/docs/components/table#custom-data-rendering

The row number (indexed from zero) relative to the displayed rows

There's also the note under the table.

index will not always be the actual row's index number, as it is computed after filtering, sorting and pagination have been applied to the original table data. The index value will refer to the displayed row number. This number will align with the indexes from the optional v-model bound variable.

[Safnaj]

This is intended behavior.

See the index description in the table under the snippet https://bootstrap-vue.org/docs/components/table#custom-data-rendering

The row number (indexed from zero) relative to the displayed rows

There's also the note under the table.

index will not always be the actual row's index number, as it is computed after filtering, sorting and pagination have been applied to the original table data. The index value will refer to the displayed row number. This number will align with the indexes from the optional v-model bound variable.

Thanks..! Any other way to have the index number as serial for all the pages ??

[Hiws]

I guess you could use indexOf

<template #cell(index)="{ item }">
    {{ allVouchers.indexOf(item) + 1 }}
</template>

But if you ever apply any sort of filtering/sorting it will go out of order.

[Safnaj]

<template #cell(index)="{ item }">
    {{ allVouchers.indexOf(item) + 1 }}
</template>

Thanks..! It's worked.