BootstrapVue — Table Rows and Columns

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

We look at how to customize table contents, including sticky columns and row selection.

Sticky Columns

We can make columns sticky with the stickyColumn property in a field entry.

For instance, we can write:

<template>
  <div id="app">
    <b-table :items="items" sticky-header :fields="fields"></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      fields: [
        {
          key: "id",
          stickyColumn: true,
          isRowHeader: true,
          variant: "primary"
        },
        "a",
        "b",
        { key: "c", stickyColumn: true, variant: "info" },
        "d",
        "e",
        "f",
        "g",
        "h",
        "i"
      ],
      items: [
        {
          id: 1,
          a: 0,
          b: 1,
          c: 2,
          d: 3,
          e: 4,
          f: 5,
          g: 6,
          h: 7,
          i: 8
        },
        {
          id: 2,
          a: 0,
          b: 1,
          c: 2,
          d: 3,
          e: 4,
          f: 5,
          g: 6,
          h: 7,
          i: 8
        },
        {
          id: 3,
          a: 0,
          b: 1,
          c: 2,
          d: 3,
          e: 4,
          f: 5,
          g: 6,
          h: 7,
          i: 8
        }
      ]
    };
  }
};
</script>

We have the stickyColumn property set to true in our field entries.

We also have the sticky-header to keep the header displaying.

Now the Id and C columns will always be shown.

Row Details

We can add row details into our table rows.

To do that, we can populate the row-details slot.

For example, we can write:

<template>
  <div id="app">
    <b-table :items="items" :fields="fields">
      <template v-slot:cell(showDetails)="row">
        <b-button
          size="sm"
          @click="row.toggleDetails"
          class="mr-2"
        >{{ row.detailsShowing ? 'Hide' : 'Show'}} Details</b-button>
      </template>

<template v-slot:row-details="row">
        <b-card>
          <b-row class="mb-2">
            <b-col>
              <b>Age:</b>
            </b-col>
            <b-col>{{ row.item.age }}</b-col>
          </b-row>

<b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
        </b-card>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      fields: ["firstName", "lastName", "showDetails"],
      items: [
        { firstName: "alex", lastName: "green", age: 20 },
        {
          firstName: "may",
          lastName: "smith",
          age: 20
        },
        { firstName: "james", lastName: "jones", age: 22 }
      ]
    };
  }
};
</script>

We referenced the row.toggleDetails method in the cell(showDetails) slot.

This lets us toggle the details.

row.detailsShowing is true if the row details are showing and false otherwise.

Then we populated the row-details slots.

It also has access to the row data.

row.item has the data.

So we can access the age with row.item.age .

It also has access to the toggleDetails method to toggle off the details.

Row Selection

We can let users select rows on the table.

To do that, we can add the select-mode prop.

The value can be 'multi' for mukltuple selection.

'single' for single selection.

And 'range' for letting people shift-click a range of rows. Ctrl-click will let them toggle the selected row.

Rows can be programmatically selected or unselected.

selectRow(index) lets us select a row with the given index.

unselectRow(index) unselectes a row with the given index.

selectAllRows() selects all rows.

clearSelected() unselects all rows.

isRowSelected(index) returns true if a row is selected.

We can write:

<template>
  <div id="app">
    <b-table :items="items" selectable select-mode="multi"></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        { firstName: "alex", lastName: "green" },
        {
          firstName: "may",
          lastName: "smith"
        },
        { firstName: "james", lastName: "jones" }
      ]
    };
  }
};
</script>

to make the rows selectable.

We added selectable to make the rows selectable and select-mode is set to 'multi' to let users select any rows they like.

Then to call the methods we listed above, we can write:

<template>
  <div id="app">
    <b-button [@click](http://twitter.com/click "Twitter profile for @click")='clearSelected'>clear selection</b-button>
    <b-table ref='selectableTable' :items="items" selectable select-mode="multi"></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        { firstName: "alex", lastName: "green" },
        {
          firstName: "may",
          lastName: "smith"
        },
        { firstName: "james", lastName: "jones" }
      ]
    };
  },
  methods: {
    clearSelected() {
      this.$refs.selectableTable.clearSelected();
    }
  }
};
</script>

We assigned a ref to the b-table . Then we call the clearSelected method on it to clear the selected rows.

Conclusion

We can add make columns sticky.

Also, we can add row details to our table rows that we can toggle.

Finally, we can let users select the rows and clear them.