We can add a table with Buefy with the b-table component.

Basic Table

To populate it with data, we just set the data and columns props.

For example, we write:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns"></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, firstName: "jane", lastName: "smith" },
        { id: 2, firstName: "joe", lastName: "smith" },
        { id: 3, firstName: "alex", lastName: "green" }
      ],
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "firstName",
          label: "First Name"
        },
        {
          field: "lastName",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

This creates a basic table by using the b-table component.

We set the data prop to data, which has an array of objects.

Each property is mapped to the column by specifying the objects in columns.

field is the property name to display in the column.

label is the table heading to display in the column.

width is the width of the column.

numeric indicates whether the column is numeric.

The columns are displayed in the way they’re listed in the columns array.

So ID is first, First Name is second, and Last Name is third.

Custom Table

We can add other styles.

To make columns customizable, we can populate slots for the content.

We can use the b-table-column to do that:

<template>
  <div id="app">
    <b-table :data="data" hoverable>
      <template slot-scope="props">
        <b-table-column field="id" label="ID" width="40" numeric>{{ props.row.id }}</b-table-column>

        <b-table-column field="firstName" label="First Name">{{ props.row.firstName }}</b-table-column>

        <b-table-column field="lastLame" label="Last Name">{{ props.row.lastName }}</b-table-column>
      </template>

      <template slot="empty">
        <section class="section">
          <div class="has-text-centered">
            <p>Nothing here.</p>
          </div>
        </section>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, firstName: "jane", lastName: "smith" },
        { id: 2, firstName: "joe", lastName: "smith" },
        { id: 3, firstName: "alex", lastName: "green" }
      ],
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "firstName",
          label: "First Name"
        },
        {
          field: "lastName",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

We filled the default slot with b-table-column components.

The props variable has the table data.

We access the with props.row as we did in the code.

The empty slot lets us show something when there’s no data to show in the table.

We replaced the columns prop with the slots.

We can add the bordered, striped, narrowed, hoverable, loading, focusable, and mobile-cards props to set the table options.

mobile-cards means the rows appear as cards on mobile.

The rest is self-explanatory.

In the example above, we added hoverable to b-table to make the rows highlight when hovered.

With Buefy, we can create a table, with the b-table component.

We can either pass in the columns prop to set the columns, or we can use slots to fill the content.

There are also other customization options.