Buefy — Customize Table

Photo by Annie Spratt on Unsplash

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Checkable Rows

We can add the checkable prop to make the rows checkable.

To do that, we write:

<template>
  <div id="app">
    <b-table
      :data="data"
      :columns="columns"
      :checked-rows.sync="checkedRows"
      :is-row-checkable="(row) => row.id !== 3 "
      checkable
      checkbox-position="left"
    >
      <template slot="bottom-left">
        <b>Total checked</b>
        : {{ checkedRows.length }}
      </template>
    </b-table>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      checkedRows: [],
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
}…