Buefy — Tables

Photo by Andyone 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.

Table

Buefy comes with a table component. It can be used to display data responsively.

We can use the b-table to add a simple table to our Vue app:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns"></b-table>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      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"
        }
      ],
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

The data prop has an array of data.

columns has the column definitions. The field property has the property name. label has the column label.