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.
Sorting Multiple Columns
We can enable the sorting of multiple columns with the sort-multiple prop.
For instance, we can write:
<template>
<div id="app">
<b-table :data="data" :columns="columns" sort-multiple></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>
to enable sorting the first name and last name columns with the sortable property set to true .
We can set the sorting priority of the column with the sort-multiple prop:
<template>
<div id="app">
<b-table :data="data" :columns="columns" :sort-multiple-data="sortingPriority" sort-multiple></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,
sortingPriority: [
{ field: "first_name", order: 1 },
{ field: "last_name", order: 2 }
],
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>
We set the value of the prop to an array with objects with the field and order properties to set the sorting priority.
Detailed Rows
We can add rows with details with the detail slot. To do that, we can write:
<template>
<div id="app">
<b-table
:data="data"
:columns="columns"
detailed
detail-key="id"
ref="table"
@details-open="(row) => $buefy.toast.open(`Expanded ${row.first_name}`)"
>
<b-table-column field="first_name" label="First Name" sortable v-slot="props">
<template v-if="showDetailIcon">{{ props.row.first_name }}</template>
<template v-else>
<a @click="toggle(props.row)">{{ props.row.first_name }}</a>
</template>
</b-table-column>
<b-table-column
field="last_name"
label="Last Name"
sortable
v-slot="props"
>{{ props.row.last_name }}</b-table-column>
<template slot="detail" slot-scope="props">
<article class="media">
<div class="media-content">
<div class="content">
<p>
<strong>{{ props.row.first_name }} {{ props.row.last_name }}</strong>
</p>
</div>
</div>
</article>
</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 {
data,
columns: [
{
field: "id",
label: "ID",
width: "40",
numeric: true
},
{
field: "first_name",
label: "First Name"
},
{
field: "last_name",
label: "Last Name"
}
]
};
},
methods: {
toggle(row) {
this.$refs.table.toggleDetails(row);
}
}
};
</script>
In the b-table-column components, we have the a tag which we can click to call toggle to toggle the detail pane on and off.
toggle takes the row , and calls this.$refs.table.toggleDetails(row) method to toggle the detail pane.
The details-open event is emitted whenever we toggle the details pane on.
Conclusion
We can add sorting to multiple columns and toggle details for a row.
