title: Vue-Bootstrap: how to trigger sorting of one b-table to trigger sorting of the another b-table?
body: <p>I'm using <a href="https://bootstrap-vue.js.org/" rel="nofollow noreferrer">VueBoostrap</a> <code>&lt;b-table&gt;</code> components, in a combination with <a href="https://bootstrap-vue.js.org/docs/components/table/#sort-compare-routine" rel="nofollow noreferrer">sorting routine applied</a>. In my project I have some more complex sorting routine, but for this dummy example, I will use the default one.</p>
  
  <p>When a sorting is applied for a b-table, the table is simply sorted based on the clicked field in the table header. But what I need to achieve is to split the table header from the table content (since I want to place the content in a scrollable div later, while the header to remain static at the top - as user will be scrolling).</p>
  
  <p>The complete code is given <a href="https://codesandbox.io/s/kxv19p8njv" rel="nofollow noreferrer">on this link</a> (check <code>componets/TableTest.vue</code>), where I have three <code>&lt;b-table&gt;</code> components. First one is just a dummy example, and the next two are identical as the first one, but for one of them the header is hidden and for the other the body is hidden. </p>
  
  <p>What I want to achieve is:
  <a href="https://i.stack.imgur.com/x68qf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x68qf.png" alt="enter image description here"></a></p>