{"action":"created","issue":{"url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1774","repository_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue","labels_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1774/labels{/name}","comments_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1774/comments","events_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1774/events","html_url":"https://github.com/bootstrap-vue/bootstrap-vue/issues/1774","id":317660606,"number":1774,"title":"<b-table> filtering occurs when row details get toggled -> performance loss","user":{"login":"ddweber","id":33422037,"avatar_url":"https://avatars2.githubusercontent.com/u/33422037?v=4","gravatar_id":"","url":"https://api.github.com/users/ddweber","html_url":"https://github.com/ddweber","followers_url":"https://api.github.com/users/ddweber/followers","following_url":"https://api.github.com/users/ddweber/following{/other_user}","gists_url":"https://api.github.com/users/ddweber/gists{/gist_id}","starred_url":"https://api.github.com/users/ddweber/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ddweber/subscriptions","organizations_url":"https://api.github.com/users/ddweber/orgs","repos_url":"https://api.github.com/users/ddweber/repos","events_url":"https://api.github.com/users/ddweber/events{/privacy}","received_events_url":"https://api.github.com/users/ddweber/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-25T14:44:34Z","updated_at":"2018-04-26T03:09:44Z","closed_at":null,"author_association":"NONE","body":"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.\r\n\r\nI tested the behaviour in the playground area with the following code:\r\n\r\n```html\r\n<div id='app'>\r\n  <b-table :items=\"items\" :fields=\"fields\" :filter=\"filterfct\">\r\n    <template slot=\"show_details\" slot-scope=\"row\">\r\n      <!-- we use @click.stop here to prevent emitting of a 'row-clicked' event  -->\r\n      <b-button size=\"sm\" @click.stop=\"row.toggleDetails\" class=\"mr-2\">\r\n       {{ row.detailsShowing ? 'Hide' : 'Show'}} Details\r\n      </b-button>\r\n      <!-- In some circumstances you may need to use @click.native.stop instead -->\r\n      <!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change -->\r\n      <b-form-checkbox @click.native.stop @change=\"row.toggleDetails\" v-model=\"row.detailsShowing\">\r\n        Details via check\r\n      </b-form-checkbox>\r\n    </template>\r\n    <template slot=\"row-details\" slot-scope=\"row\">\r\n      <b-card>\r\n        <b-row class=\"mb-2\">\r\n          <b-col sm=\"3\" class=\"text-sm-right\"><b>Age:</b></b-col>\r\n          <b-col>{{ row.item.age }}</b-col>\r\n        </b-row>\r\n        <b-row class=\"mb-2\">\r\n          <b-col sm=\"3\" class=\"text-sm-right\"><b>Is Active:</b></b-col>\r\n          <b-col>{{ row.item.isActive }}</b-col>\r\n        </b-row>\r\n        <b-button size=\"sm\" @click=\"row.toggleDetails\">Hide Details</b-button>\r\n      </b-card>\r\n    </template>\r\n  </b-table>\r\n</div>\r\n```\r\n\r\n```js\r\n  data () {\r\n    return {\r\n      fields: [ 'first_name', 'last_name', 'show_details' ],\r\n      items: [\r\n        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },\r\n        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },\r\n        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson', _showDetails: true },\r\n        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }\r\n      ]\r\n    }\r\n  },\r\n    methods: {\r\n      filterfct: function(row){\r\n        console.log('filterfct');\r\n        return true;\r\n      }\r\n    }\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/comments/384499133","html_url":"https://github.com/bootstrap-vue/bootstrap-vue/issues/1774#issuecomment-384499133","issue_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1774","id":384499133,"user":{"login":"Diaskhan","id":15046677,"avatar_url":"https://avatars0.githubusercontent.com/u/15046677?v=4","gravatar_id":"","url":"https://api.github.com/users/Diaskhan","html_url":"https://github.com/Diaskhan","followers_url":"https://api.github.com/users/Diaskhan/followers","following_url":"https://api.github.com/users/Diaskhan/following{/other_user}","gists_url":"https://api.github.com/users/Diaskhan/gists{/gist_id}","starred_url":"https://api.github.com/users/Diaskhan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Diaskhan/subscriptions","organizations_url":"https://api.github.com/users/Diaskhan/orgs","repos_url":"https://api.github.com/users/Diaskhan/repos","events_url":"https://api.github.com/users/Diaskhan/events{/privacy}","received_events_url":"https://api.github.com/users/Diaskhan/received_events","type":"User","site_admin":false},"created_at":"2018-04-26T03:09:44Z","updated_at":"2018-04-26T03:09:44Z","author_association":"NONE","body":"U must not use 16k rows. U must Use pagination for that!"}}
{"actor":{"display_login":"Diaskhan"}}