I have bootstrap-vue "b-table" used in my Vue page. Each row has an "view-details" button, that shows additional information about the selected row. I was looking for examples that can send request to backend when user clicks for view-details, that expands the row and shows details retrieved from backend. The "_showDetails" option from bootstrap-vue table seems limited as the examples all use the data that was already loaded along with the main tableland using this way would overload the page as my data for each row is too big.

Are there any examples or even other libs that support such functionality?

I have bootstrap-vue "b-table" used in my Vue page. Each row has an "view-details" button, that shows additional information about the selected row. I was looking for examples that can send request to backend when user clicks for view-details, that expands the row and shows details retrieved from backend. The "_showDetails" option from bootstrap-vue table seems limited as the examples all use the data that was already loaded along with the main tableland using this way would overload the page as my data for each row is too big.

Are there any examples or even other libs that support such functionality?

• javascript
• asynchronous
• datatable
• vuejs2
• bootstrap-vue

1 Answer 1

You can do this with bootstrap-vue without any problems.

Create a method that gets called when you click your "view details" button, this method will call your backend and insert the data onto your item. Once the data has been retrieved you set _showDetails to true on the item, which will open the details.

You could also open it immediately and show a loading message while the data is retrieved, that's up to you.

new Vue({
  el: '#app',
  created() {
    // Get initial data
    fetch('https://reqres.in/api/users')
      .then(response => response.json())
      .then(json =>
        /* Map and use only some of the data for the example */
        this.items = json.data
        .map(user => {
          return {
            id: user.id,
            first_name: user.first_name,
            last_name: user.last_name
          }
        }))
  },
  data() {
    return {
      items: [],
      fields: ['id', 'first_name', 'last_name', {
        key: 'actions',
        label: ''
      }]
    }
  },
  methods: {
    toggleDetails(item) {
      if (item._showDetails) { // if details are open, close them
        item._showDetails = false
      } else if (item.details) { // if details already exists, show the details
        this.$set(item, '_showDetails', true)
      } else {
        fetch(`https://reqres.in/api/users/${item.id}`)
          .then(response => response.json())
          .then(json => {
            const user = json.data;
            item.details = {
              email: user.email,
              avatar: user.avatar
            }
            this.$set(item, '_showDetails', true)
          })
      }
    }
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg./[email protected]/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg./[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg./[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app">
  <b-container>
    <b-table :items="items" :fields="fields">
      <template v-slot:cell(actions)="{ item }">
        <b-btn @click="toggleDetails(item)">
          Show details
        </b-btn>
      </template>
      <template v-slot:row-details="{ item : { details: { email, avatar }}}">
        <b-card>
          <b-img :src="avatar" fluid></b-img>
          {{ email }}
        </b-card>
      </template>
    </b-table>
  </b-container>
</div>