Buefy — Customize Table Rows and Columns

Image for post
Image for post
Photo by Liana Mikah 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.

Row Status

We can set the row-class prop by checking the row data with a function.

For example, we can write:

<template>
<div id="app">
<b-table :data="data" :columns="columns" :row-class="(row, index) => row.id === 1 && 'is-info'"></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 {
data,
columns: [
{
field: "id",
label: "ID",
width: "40",
numeric: true
},
{
field: "first_name",
label: "First Name"
},
{
field: "last_name",
label: "Last Name"
}
]
};
}
};
</script>
<style>
tr.is-info {
background: #167df0;
color: #fff;
}
</style>

to add the is-info class to add the class to the given row.

Custom Headers

We can customize the header by populating the header slot. To do that, we write:

<template>
<div id="app">
<b-table :data="data">
<b-table-column field="id" label="ID" width="40" numeric>
<template v-slot:header="{ column }">
<b-tooltip :label="column.label" append-to-body dashed>{{ column.label }}</b-tooltip>
</template>
<template v-slot="props">{{ props.row.id }}</template>
</b-table-column>
<b-table-column field="user.first_name" label="First Name">
<template v-slot:header="{ column }">
<b-tooltip :label="column.label" append-to-body dashed>{{ column.label }}</b-tooltip>
</template>
<template v-slot="props">{{ props.row.first_name }}</template>
</b-table-column>
<b-table-column field="user.last_name" label="Last Name">
<template v-slot:header="{ column }">
<b-tooltip :label="column.label" append-to-body dashed>{{ column.label }}</b-tooltip>
</template>
<template v-slot="props">{{ props.row.last_name }}</template>
</b-table-column>
</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 {
data
};
}
};
</script>

We add the b-table-column component to add the column.

The header slot lets us populate the content we want in the column headers.

column is an object that has the column data including the label property.

Subheadings

We can add subheadings with the subheadings property.

For example, we can write:

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

We add the subheading property to the column definition objects.

Conclusion

We can add various things for table rows and columns with Buefy.

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