Showing various VueJS data tables using Bootstrap, dependent on API response

Question

Showing various VueJS data tables using Bootstrap, dependent on API response

Currently, I am utilizing the bootstrap-vue table to display my data. Right now, all of my information is contained in a single table. To provide an example, let's say there are 10 rows in this table. The first 5 rows have the value A in the first column, while the next 5 rows have the value B in the first column.

My goal is to segment this table into two separate tables on the page. The first table should only include rows with the value A, and the second table should consist of rows with the value B. Since I may have numerous unique values like this, ideally I would want individual tables for each value present (e.g., if there are 10 different values, then I would need 10 separate tables). Is it possible to accomplish this?

Alternatively, another approach could be to implement collapsible rows. I don't mean the traditional 'More Details' feature, but rather, a functionality where clicking on a specific value, such as A, would expand all rows with that same value in the original table format.

I initially considered using rows that span columns (Having grouped rows in bootstrap Vue table), but unfortunately, this feature is not supported by the current version of the bootstrap vue-js table.

javascript twitter-bootstrap vue.js vuejs2

Answer 1

Answer №1

To achieve this, you can create a computed property that organizes your array into groups.

The computed property will output an object with keys representing the grouping values and corresponding arrays containing items in each group.

/* Sample structure returned by the computed property */
{
  A: [],
  B: [],
  C: []
}

You can then iterate over each key in the groupedItems using a v-for loop.

<!-- 
  groupedItems is the computed property with the above structure.
  It will generate a new table for each type/key in the `groupedItems` object.
-->
<div v-for="(group, type) in groupedItems">
  <b-table :fields="fields" :items="group"><b-table>
</div>

Example snippet:

A simple example showcasing a header indicating the type and a table below it.

/* Generating random example data */
const types = ['A', 'B', 'C']
const items = [];
for(let i = 0; i < 15; i++) {
  items.push({
    type: types[i % 3],
    id: i + 1,
    random: Math.random()
  })
}

new Vue({
  el: '#app',
  computed: {
    groupedItems() {
      const groups = {};
      
      this.items.forEach(item => {
        if(groups[item.type]) {
          groups[item.type].push(item);
        } else {
          groups[item.type] = [item];
        }
      });

      return groups;
    }
  },
  data() {
    return {
      items: items,
      fields: ['type', 'id', 'random']
    }
  }
})

<!-- Bootstrap and BootstrapVue CDN links -->
<link href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.css" rel="stylesheet" />

<!-- Vue.js script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>


<div id="app">
  <div v-for="(items, type) in groupedItems">
    <h2>Type: {{ type }}</h2>
    <b-table :fields="fields" :items="items">
      <template #cell(type)="{ value }">
        Type: {{ value }}
      </template>
    </b-table>
  </div>
</div>

Accordion Example:

This demo utilizes an accordion to toggle visibility of each group. Only one group can be open at a time, but you can modify it to allow multiple groups at once.

/* Generating random example data */
const types = ['A', 'B', 'C']
const items = [];
for(let i = 0; i < 15; i++) {
  items.push({
    type: types[i % 3],
    id: i + 1,
    random: Math.random()
  })
}

new Vue({
  el: '#app',
  computed: {
    groupedItems() {
      const groups = {};

      this.items.forEach(item => {
        if(groups[item.type]) {
          groups[item.type].push(item);
        } else {
          groups[item.type] = [item];
        }
      });

      return groups;
    }
  },
  data() {
    return {
      items: items,
      fields: ['type', 'id', 'random']
    }
  }
})

<!-- Bootstrap and BootstrapVue CDN links -->
<link href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.css" rel="stylesheet" />

<!-- Vue.js script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-card no-body class="mb-1" v-for="(group, type) in groupedItems">
    <b-card-header header-tag="header" class="p-0" role="tab">
      <b-button block v-b-toggle="`accordion-${type}`" variant="primary">
        Type {{ type }}
      </b-button>
    </b-card-header>
    <b-collapse :id="`accordion-${type}`" accordion="table-accordion" role="tabpanel">
      <b-table :fields="fields" :items="group"></b-table>
    </b-collapse>
  </b-card>
</div>

Adding Nested Level:

You can extend the nesting further by implementing another level following the same pattern.

/* Generating random example data */
const types = ['A', 'B', 'C']
const items = [];
for(let i = 0; i < 30; i++) {
  items.push({
    type: types[i % 3],
    group: i % 9,
    id: i + 1,
    random: Math.random()
  })
}

new Vue({
  el: '#app',
  computed: {
    groupedItems() {
      const groups = {};

      this.items.forEach(item => {
        if(!groups[item.type]) groups[item.type] = {};

        if(groups[item.type][item.group]) {
          groups[item.type][item.group].push(item);
        } else {
          groups[item.type][item.group] = [item];
        }
      });

      return groups;
    }
  },
  data() {
    return {
      items: items,
      fields: ['type', 'id', 'random']
    }
  }
})

<!-- Bootstrap and BootstrapVue CDN links -->
<link href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.css" rel="stylesheet" />

<!-- Vue.js script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-card no-body class="mb-4" v-for="(groups, type) in groupedItems">
    <b-card-header header-tag="header" class="p-0" role="tab">
      <b-button block v-b-toggle="`accordion-${type}`" variant="primary">
        Type {{ type }}
      </b-button>
    </b-card-header>
    <b-collapse :id="`accordion-${type}`" visible role="tabpanel">
      <b-card no-body v-for="(items, group) in groups">
        <b-card-header header-tag="header" class="p-0" role="tab">
          <b-button block v-b-toggle="`accordion-group-${group}`" variant="secondary">
            Group {{ group }}
          </b-button>
        </b-card-header>
        <b-collapse :id="`accordion-group-${group}`" :accordion="`table-accordion-${type}`" role="tabpanel">
          <b-table :fields="fields" :items="items"></b-table>
        </b-collapse>
      </b-card>
    </b-collapse>
  </b-card>
</div>

Answer 2

To achieve this, you can create a computed property that organizes your array into groups.

The computed property will output an object with keys representing the grouping values and corresponding arrays containing items in each group.

/* Sample structure returned by the computed property */
{
  A: [],
  B: [],
  C: []
}

You can then iterate over each key in the groupedItems using a v-for loop.

<!-- 
  groupedItems is the computed property with the above structure.
  It will generate a new table for each type/key in the `groupedItems` object.
-->
<div v-for="(group, type) in groupedItems">
  <b-table :fields="fields" :items="group"><b-table>
</div>

Example snippet:

A simple example showcasing a header indicating the type and a table below it.

/* Generating random example data */
const types = ['A', 'B', 'C']
const items = [];
for(let i = 0; i < 15; i++) {
  items.push({
    type: types[i % 3],
    id: i + 1,
    random: Math.random()
  })
}

new Vue({
  el: '#app',
  computed: {
    groupedItems() {
      const groups = {};
      
      this.items.forEach(item => {
        if(groups[item.type]) {
          groups[item.type].push(item);
        } else {
          groups[item.type] = [item];
        }
      });

      return groups;
    }
  },
  data() {
    return {
      items: items,
      fields: ['type', 'id', 'random']
    }
  }
})

<!-- Bootstrap and BootstrapVue CDN links -->
<link href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.css" rel="stylesheet" />

<!-- Vue.js script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>


<div id="app">
  <div v-for="(items, type) in groupedItems">
    <h2>Type: {{ type }}</h2>
    <b-table :fields="fields" :items="items">
      <template #cell(type)="{ value }">
        Type: {{ value }}
      </template>
    </b-table>
  </div>
</div>

Accordion Example:

This demo utilizes an accordion to toggle visibility of each group. Only one group can be open at a time, but you can modify it to allow multiple groups at once.

/* Generating random example data */
const types = ['A', 'B', 'C']
const items = [];
for(let i = 0; i < 15; i++) {
  items.push({
    type: types[i % 3],
    id: i + 1,
    random: Math.random()
  })
}

new Vue({
  el: '#app',
  computed: {
    groupedItems() {
      const groups = {};

      this.items.forEach(item => {
        if(groups[item.type]) {
          groups[item.type].push(item);
        } else {
          groups[item.type] = [item];
        }
      });

      return groups;
    }
  },
  data() {
    return {
      items: items,
      fields: ['type', 'id', 'random']
    }
  }
})

<!-- Bootstrap and BootstrapVue CDN links -->
<link href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.css" rel="stylesheet" />

<!-- Vue.js script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-card no-body class="mb-1" v-for="(group, type) in groupedItems">
    <b-card-header header-tag="header" class="p-0" role="tab">
      <b-button block v-b-toggle="`accordion-${type}`" variant="primary">
        Type {{ type }}
      </b-button>
    </b-card-header>
    <b-collapse :id="`accordion-${type}`" accordion="table-accordion" role="tabpanel">
      <b-table :fields="fields" :items="group"></b-table>
    </b-collapse>
  </b-card>
</div>

Adding Nested Level:

You can extend the nesting further by implementing another level following the same pattern.

/* Generating random example data */
const types = ['A', 'B', 'C']
const items = [];
for(let i = 0; i < 30; i++) {
  items.push({
    type: types[i % 3],
    group: i % 9,
    id: i + 1,
    random: Math.random()
  })
}

new Vue({
  el: '#app',
  computed: {
    groupedItems() {
      const groups = {};

      this.items.forEach(item => {
        if(!groups[item.type]) groups[item.type] = {};

        if(groups[item.type][item.group]) {
          groups[item.type][item.group].push(item);
        } else {
          groups[item.type][item.group] = [item];
        }
      });

      return groups;
    }
  },
  data() {
    return {
      items: items,
      fields: ['type', 'id', 'random']
    }
  }
})

<!-- Bootstrap and BootstrapVue CDN links -->
<link href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.css" rel="stylesheet" />

<!-- Vue.js script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-card no-body class="mb-4" v-for="(groups, type) in groupedItems">
    <b-card-header header-tag="header" class="p-0" role="tab">
      <b-button block v-b-toggle="`accordion-${type}`" variant="primary">
        Type {{ type }}
      </b-button>
    </b-card-header>
    <b-collapse :id="`accordion-${type}`" visible role="tabpanel">
      <b-card no-body v-for="(items, group) in groups">
        <b-card-header header-tag="header" class="p-0" role="tab">
          <b-button block v-b-toggle="`accordion-group-${group}`" variant="secondary">
            Group {{ group }}
          </b-button>
        </b-card-header>
        <b-collapse :id="`accordion-group-${group}`" :accordion="`table-accordion-${type}`" role="tabpanel">
          <b-table :fields="fields" :items="items"></b-table>
        </b-collapse>
      </b-card>
    </b-collapse>
  </b-card>
</div>

Showing various VueJS data tables using Bootstrap, dependent on API response

Answer №1

Example snippet:

Accordion Example:

Adding Nested Level:

Similar questions

What steps can I take to minify my code using react-create-app?

When running scripts, Protractor is unable to perform a click action in Safari, even though it works perfectly in

What is the functionality of named function expressions?

Is there a way to store an SQL query within a variable and then expand upon it?

Tips on sending AJAX call parameters individually

Rendering Content Conditionally Using Vue and Prime Vue Component Library

Tips for handling various mandatory fields for two different user roles within a unified userModel.ts file on a Next.js and MongoDB user registration API platform

Looking for assistance in correctly identifying types in react-leaflet for TypeScript?

What is the best approach for extracting dynamically generated content from this particular website?

What is the best way to invoke an external JavaScript source using another JavaScript source?

Trigger is not activated by dynamically created element

The synchronization between the First Column Scroll and Table Filter Function is out of alignment

Arranging an array of objects from the Fetch API into rows and columns in Bootstrap 4 by utilizing a foreach loop to iterate through the array

What's the best way to utilize Bootstrap 4 flexbox to ensure that a sidebar column menu smoothly transitions into a top column menu when viewed on a mobile device?

Ways to implement distinct values for model and input field in Angular 5

I attempted to define a function in order to pass it as props, only to encounter a compilation error

Issue with Jquery functionality when Vue component is duplicated in multiple instances

Chrome debugging tool does not refresh page source

JavaScript Date displaying the string in the format YYYY/MM/DD HH:MM

Ways to incorporate AJAX into a JavaScript function