Image for post
Image for post
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.

The width has the column width.

Custom Columns

We can add the b-table-column column to add the columns. For example, we can write:

<template>
<div id="app">
<b-table :data="data" :columns="columns">
<b-table-column field="id" label="ID" width="40" numeric v-slot="props">{{ props.row.id }}</b-table-column>
<b-table-column
field="first_name"
label="First Name"
v-slot="props"
>{{ props.row.first_name }}</b-table-column>
<b-table-column field="last_name" label="Last Name" v-slot="props">{{ props.row.last_name }}</b-table-column>
</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>

We added the b-table-column to add the columns.

props.row has the row object.

Custom Table

b-table has many props that we can change.

For example, we can write:

<template>
<div id="app">
<b-table
:data="data"
:columns="columns"
bordered
striped
narrowed
hoverable
loading
focusable
mobile-cards
></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>

to add the props.

bordered adds the borders.

striped makes the rows striped.

narrowed makes the rows shorter.

hoverable makes the rows hoverable.

loading shows the loading indicator over the table.

focusable makes the table focusable.

mobile-cards makes the mobile cards.

Selection

We can set the selected prop to make a row highlightable.

For example, we can write:

<template>
<div id="app">
<b-table :data="data" :columns="columns" :selected.sync="selected"></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 {
selected: data[1],
data,
columns: [
{
field: "id",
label: "ID",
width: "40",
numeric: true
},
{
field: "first_name",
label: "First Name"
},
{
field: "last_name",
label: "Last Name"
}
]
};
}
};
</script>

We added the selected prop with the reference to the row we want to highlight. Then we’ll see that it’s highlighted.

Conclusion

Buefy comes with a b-table component to let us add a table to a Vue app.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store