Buefy — Sticky Headers and Footers

Image for post
Image for post
Photo by Sophia Baboolal 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.

Sticky Headers and Columns

We can add the sticky-header prop to show a scrolling table with fixed headers.

For example, we can write:

<template>
<div id="app">
<b-table :data="data" :columns="columns" sticky-header height="100px"></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>

to add the prop and set the height so that we can see the scrolling content with the sticky header.

We can add the sticky property to make a column sticky when we scroll:

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

Toggle Columns

We can show and hide columns with the visible prop:

<template>
<div id="app">
<b-table :data="data" :columns="columns" sticky-header></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,
visible: true
},
{
field: "first_name",
label: "First Name",
visible: true
},
{
field: "last_name",
label: "Last Name",
visible: false
}
]
};
}
};
</script>

We set the visible property on the column definition object to show and hide columns.

Footer

We can populate the footer slot with the columns. For example, we can write:

<template>
<div id="app">
<b-table :data="data" :columns="columns">
<template slot="footer">
<th>
<div class="th-wrap is-numeric">ID</div>
</th>
<th>
<div class="th-wrap">First Name</div>
</th>
<th>
<div class="th-wrap">Last Name</div>
</th>
</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"
}
]
};
}
};
</script>

We add the th elements into the footer to populate the cells.

Conclusion

We can add sticky headers and footers. Also, we can toggle the visibility of the columns.

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