To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
We look at how to customizing tables.
Fields
We can add a fields prop to specify how we want to display the fields.
For example, we can write:
<template>
<div id="app">
<b-table striped hover :items="items" :fields="fields"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
fields: [
{
key: "lastName",
sortable: true,
label: "Last"
},
{
key: "firstName",
sortable: false,
label: "First"
}
],
items: [
{ firstName: "alex", lastName: "green" },
{
firstName: "may",
lastName: "smith"
},
{ firstName: "james", lastName: "jones" }
]
};
}
};
</script>
We have the fields array with the label to display.
label is what we display nd key ios the property name of the entry to display.
Styling
There are many props we can add to b-table for styling.
striped makes the row striped.
border makes the table bordered.
borderless makes the table borderless.
outlined adds a thin border on all sides of the table.
small makes tables more compact by cutting cell padding in half.
hover enables hover highlighting on table rows.
dark inverts the color.
fixed makes the columns fixed width.
responsives makes the table responsive by letting it scroll horizontally.
sticky-header makes the header sticky.
stacked makes a responsive stacked table.
caption-top lets us add a caption above the table.
table-variant gives the table a theme color variant.
head-variant use 'light' or 'dark' to make the table header appear light or dark gray respectively.
foot-variant turns on the table footer with the same contents as the table header.
foot-clone turns on the table footer with the same contents as the table header.
no-footer-sorting disables sorting icons and clicks.
no-border-collapse disables collapsing of table borders.
For example, we can write:
<template>
<div id="app">
<b-table striped hover :items="items" borderless small></b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ firstName: "alex", lastName: "green" },
{
firstName: "may",
lastName: "smith"
},
{ firstName: "james", lastName: "jones" }
]
};
}
};
</script>
to shrink the cells and make the table borderless with the small and borderless props respectively.
We also have striped to make the table rows alternate in color.
hover makes the row highlight when it’s hovered.
Responsive Tables
We can add the responsive prop to make the table responsive.
For instance, we can write:
<template>
<div id="app">
<b-table :items="items" responsive></b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ firstName: "alex", lastName: "green" },
{
firstName: "may",
lastName: "smith"
},
{ firstName: "james", lastName: "jones" }
]
};
}
};
</script>
Then when the screen is narrow, the table can be scrolled horizontally to see all the content.
Stacked Tables
Stacked tables are tables that can be rendered in a visually stacked format.
We can do that across all viewports by setting the stacked prop to true .
Or we can do it for specific breakpoints like sm , md , lg , or xl .
For instance, we can write:
<template>
<div id="app">
<b-table :items="items" stacked="md"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ firstName: "alex", lastName: "green" },
{
firstName: "may",
lastName: "smith"
},
{ firstName: "james", lastName: "jones" }
]
};
}
};
</script>
and make it stacked only when the screen is less than 768px wide.
When a table is stacked, the content can’t be sorted by clicking the field labels.
top-row and bottom-row slots will also be hidden.
Always stacked tables won’t have the table header, footer, top, and bottom row slots won’t be rendered.
Table Caption
To add a caption to our table, we can add the caption prop.
For example, we can write:
<template>
<div id="app">
<b-table :items="items" >
<template v-slot:table-caption>table of names</template>
</b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ firstName: "alex", lastName: "green" },
{
firstName: "may",
lastName: "smith"
},
{ firstName: "james", lastName: "jones" }
]
};
}
};
</script>
We populate the table-caption slot with our content.
Conclusion
There are many props to let us style tables the way we like.
Also, we can create responsive or stacked tables to make tables look good on any screen.
