1

I'm using VueBoostrap <b-table> components, in a combination with sorting routine applied. In my project I have some more complex sorting routine, but for this dummy example, I will use the default one.

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).

The complete code is given on this link (check componets/TableTest.vue), where I have three <b-table> 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.

What I want to achieve is: enter image description here

delux
  • 1,694
  • 10
  • 33
  • 64

2 Answers2

4

If you take a close look at the docs (https://bootstrap-vue.js.org/docs/components/table) you can see that there are certain events emitted by the <b-table> component.
One of them is sort-changed. So if you listen for that on your header only component and then set a sortBy property that you pass into the body only component you're all set.

//header only
<b-table ... @sort-changed="sortChanged">

// body only
<b-table :sort-by="sortBy" ...>

sortChanged(e) {
  this.sortBy = e.sortBy
}

Full example here: https://codesandbox.io/s/y30x78oz81

TommyF
  • 6,660
  • 8
  • 37
  • 61
0

As I understand it, the OP is asking :

"How do I force a <b-table> component to (re)sort itself without requiring the user to click on that <b-table> component?"

My answer (in their case):

  1. Detect the click event on the "visible header" mentioned
  2. In the function handler for that click event, emit a sort-changed event from the target table
// Assuming an SFC (single file component)

<template>
<div>
<b-button @click="handleClick">Sort the table!</b-button>

<b-table ref="mytable" @sort-changed="handleSortChange"></b-table>
</div>
</template>

<script>

export default {
  // ...

  methods: {

    handleClick(evt) {
      /// this is called when you click the button
      this.$refs.mytable.$emit('sort-changed')
    }

handleSortChange(context) {
      // this is called when b-table with ref "mytable" hears the 'sort-changed' event
      // that it has emitted

      // sorting logic goes here
    }
  }
  //...
}


</script>
zjmrl
  • 11
  • 2