Javascript - Vue.js Bootstrap table - how to restrict number of rows

Simona
June 27, 2023
270 views
1 vote
2 Answers

How to show only 1st row from a Bootstrap table and via checkbox to show the rest of the rows? The bootstrap table and checkbox are in different components.

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

Here is table’s HTML structure:

Here is how I would like to be:

1sta stage:

2nd stage, after click event:

Answers

Your code will look like this:

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

    <b-form-checkbox v-model="showAllRows">Show all rows</b-form-checkbox>
  </div>
</template>

<script>
import { BTable, BFormCheckbox } from "bootstrap-vue";
export default {
  components: [BTable, BFormCheckbox],
  data: () => ({
    fields: ["name", "money"],
    items: [
      { name: "test1", money: 2 },
      { name: "test2", money: 2 },
    ],
    showAllRows: false,
  }),
};
</script>

I tested for you and is working.

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


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

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Vue.js Bootstrap table – how to restrict number of rows

Answers