How to Limit the Number of Rows in a Vue.js Bootstrap Table

Question

How to Limit the Number of Rows in a Vue.js Bootstrap Table

Is there a way to display only the first row of a Bootstrap table initially, and then reveal the rest of the rows using a checkbox? Keep in mind that the Bootstrap table and checkbox are located in different components.

<b-table hover small responsive bordered stacked
         :fields="fields"
         :items="items">
</b-table>

Check out the HTML structure of the table here: https://i.sstatic.net/pgn8v.png

Visual representation of the desired functionality:

Initial view: https://i.sstatic.net/fElhK.png

After clicking on the checkbox:

https://i.sstatic.net/ilnJ9.png

javascript vue.js vue-component bootstrap-vue bootstrap-table

Answer 1

Answer №1

Here is the structure of your code:

<template>
  <section>
    <b-table
      striped
      hover
      responsive
      bordered
      :fields="fields"
      :items="showAllRows ? items : [items[0]]"
    >
    </b-table>

    <b-form-checkbox v-model="showAllRows">Display all rows</b-form-checkbox>
  </section>
</template>

<script>
import { BTable, BFormCheckbox } from "bootstrap-vue";
export default {
  components: [BTable, BFormCheckbox],
  data: () => ({
    fields: ["title", "price"],
    items: [
      { title: "book1", price: 10 },
      { title: "book2", price: 15 },
    ],
    showAllRows: true,
  }),
};
</script>

I have tested it and it is functioning perfectly.

Answer 2

Here is the structure of your code:

<template>
  <section>
    <b-table
      striped
      hover
      responsive
      bordered
      :fields="fields"
      :items="showAllRows ? items : [items[0]]"
    >
    </b-table>

    <b-form-checkbox v-model="showAllRows">Display all rows</b-form-checkbox>
  </section>
</template>

<script>
import { BTable, BFormCheckbox } from "bootstrap-vue";
export default {
  components: [BTable, BFormCheckbox],
  data: () => ({
    fields: ["title", "price"],
    items: [
      { title: "book1", price: 10 },
      { title: "book2", price: 15 },
    ],
    showAllRows: true,
  }),
};
</script>

I have tested it and it is functioning perfectly.

Answer 3

Answer №2

<template>
  <table>
    <thead>
      <tr>
        <th>Sample 1</th>
        <th>Sample 2</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in limitedItems" :key="index">
        <td>{{ item.Sample1}}</td>
      </tr>
    </tbody>
  </table>
</template>


<script>
export default {
  data() {
    return {
      items: [
        { column1: 'Data 1', column2: 'Data 2' },
      ],
      maxRows: 10 
    };
  },
  computed: {
    LimitItems() {
      return this.items.slice(0, this.maxRows);
    }
  }
};
</script>

Answer 4

<template>
  <table>
    <thead>
      <tr>
        <th>Sample 1</th>
        <th>Sample 2</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in limitedItems" :key="index">
        <td>{{ item.Sample1}}</td>
      </tr>
    </tbody>
  </table>
</template>


<script>
export default {
  data() {
    return {
      items: [
        { column1: 'Data 1', column2: 'Data 2' },
      ],
      maxRows: 10 
    };
  },
  computed: {
    LimitItems() {
      return this.items.slice(0, this.maxRows);
    }
  }
};
</script>

How to Limit the Number of Rows in a Vue.js Bootstrap Table

Answer №1

Answer №2

Similar questions

Complete a form when a link or button on the webpage is clicked

After submitting the axios method, the page will automatically redirect upon a successful result

The Vimeo player JavaScript API is experiencing issues on iOS devices

Can you please explain how to switch the focused slide by clicking on a specific slide in swiper.js?

Choose the appropriate data type for the class variable (for example, fArr = Uint32Array)

Easily conceal and reveal elements using Svelte in a straightforward manner

What do you think of the unique JSON syntax found in the React-Redux-Firebase documentation? Valid or not?

Preserving the background image on an html canvas along with the drawing on the canvas

Setting up a new folder in the internal storage within a React Native Expo environment

Issue with modal rendering in Bootstrap4 when the body is zoomed in

Changing dimensions of cube on stable base

JSON.Parse function does not return a valid value

Load an image dynamically within a JavaScript function

Comparing #id_gender against assigning $('#id_gender') to the variable gender

The content within the tab is currently being loaded

Creating a login screen without using App.vue components requires a different approach and can be achieved through alternative methods

VueJS: Encounter a hiccup while compiling for production

Is there a method to accurately detect the rendering of individual elements within a React Component, rather than the entire component itself?

Surprising discovery of the reserved term 'await'

The JavascriptExecutor is unable to access the 'removeAttribute' property of a null object