<b-table> filtering occurs when row details get toggled -> performance loss, working with 16k rows

Is it a feature or a bug, that the filter-function gets called again for all items when the row details of one row gets toggled? I´m working with a fairly big amount of items (~16k rows) and this behavour slows down the user experience a lot.

I tested the behaviour in the playground area with the following code:

<div id='app'>
  <b-table :items="items" :fields="fields" :filter="filterfct">
    <template slot="show_details" slot-scope="row">
      <!-- we use @click.stop here to prevent emitting of a 'row-clicked' event  -->
      <b-button size="sm" @click.stop="row.toggleDetails" class="mr-2">
       {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
      </b-button>
      <!-- In some circumstances you may need to use @click.native.stop instead -->
      <!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change -->
      <b-form-checkbox @click.native.stop @change="row.toggleDetails" v-model="row.detailsShowing">
        Details via check
      </b-form-checkbox>
    </template>
    <template slot="row-details" slot-scope="row">
      <b-card>
        <b-row class="mb-2">
          <b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
          <b-col>{{ row.item.age }}</b-col>
        </b-row>
        <b-row class="mb-2">
          <b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
          <b-col>{{ row.item.isActive }}</b-col>
        </b-row>
        <b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
      </b-card>
    </template>
  </b-table>
</div>

  data () {
    return {
      fields: [ 'first_name', 'last_name', 'show_details' ],
      items: [
        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson', _showDetails: true },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  },
    methods: {
      filterfct: function(row){
        console.log('filterfct');
        return true;
      }
    }

[emanuelmutschlechner]

My guess is, that <b-table> uses a computed property for items. So when _showDetails in items changes from true to false or vice versa, the computed property updates due to the change of the items array.

I don’t have a general solution to this problem. Feel free to drop your ideas here

[emanuelmutschlechner]

@ddweber I can confirm this issue.

@Diaskhan See my example below https://codesandbox.io/s/q3onr4p749