Buefy — Customize Table

Image for post
Image for post
Photo by Annie Spratt 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.

Checkable Rows

We can add the checkable prop to make the rows checkable.

To do that, we write:

<template>
<div id="app">
<b-table
:data="data"
:columns="columns"
:checked-rows.sync="checkedRows"
:is-row-checkable="(row) => row.id !== 3 "
checkable
checkbox-position="left"
>
<template slot="bottom-left">
<b>Total checked</b>
: {{ checkedRows.length }}
</template>
</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 {
checkedRows: [],
data,
columns: [
{
field: "id",
label: "ID",
width: "40",
numeric: true
},
{
field: "first_name",
label: "First Name"
},
{
field: "last_name",
label: "Last Name"
}
]
};
}
};
</script>

The checkbox-position sets the checkbox position.

is-row-checkable lets us set which rows are checkable with a function. The row parameter is a row object we check.

checked-rows has an array of checked rows.

Searchable

We can add the searchable property to our column objects to make the column searchable.

For example, we can write:

<template>
<div id="app">
<b-table :data="data">
<template v-for="column in columns">
<b-table-column :key="column.id" v-bind="column">
<template slot="searchable" slot-scope="props">
<b-input v-model="props.filters[props.column.field]" placeholder="Search..."/>
</template>
<template v-slot="props">{{ props.row[column.field] }}</template>
</b-table-column>
</template>
</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 {
checkedRows: [],
data,
columns: [
{
field: "id",
label: "ID",
width: "40",
numeric: true
},
{
field: "first_name",
label: "First Name",
searchable: true
},
{
field: "last_name",
label: "Last Name",
searchable: true
}
]
};
}
};
</script>

We will see a search box on any column that has the searchable property set to true .

The search box is added by populating the searchable slot with our own search box.

props.filters[props.column.field] is the search term that Buefy will look for.

Pagination and Sorting

We can add pagination with the paginated and per-page props:

<template>
<div id="app">
<b-table :data="data" :columns="columns" paginated :per-page="2"></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>

We add the paginated prop to enable pagination.

And we set the per-page prop to set the number of items per page.

To add sorting, we can add the default-sort prop and the sortable property to the column to make a column sortable:

<template>
<div id="app">
<b-table :data="data" :columns="columns" default-sort="first_name" default-sort-direction="asc"></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",
sortable: true
},
{
field: "last_name",
label: "Last Name",
sortable: true
}
]
};
}
};
</script>

Conclusion

We can add pagination, make the rows checkable, and make columns sortable 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