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.
