Creating tables from scratch is a pain.
This is why there are many table plugins to let us add tables easily.
In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.
Selected Row Action Slot
We can populate the selected-row-actions slot so that we can add our own content to display when table rows are selected.
To do this, we can write:
<template>
<div>
<vue-good-table :columns="columns" :rows="rows" :select-options="{
enabled: true,
}">
<div slot="selected-row-actions">
<button>Action 1</button>
</div>
</vue-good-table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{
label: "Name",
field: "name"
},
{
label: "Age",
field: "age",
type: "number"
},
{
label: "Birthday",
field: "birthDay",
type: "date",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy"
},
{
label: "Before",
field: "before"
}
],
rows: [
{ id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
{ id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
{ id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
]
};
}
};
</script>
to add a button to the container that shows the number of rows selected.
Grouped Table
We can add a grouped table with the group-options prop.
For example, we can write:
<template>
<div>
<vue-good-table :columns="columns" :rows="rows" :group-options="{
enabled: true
}"></vue-good-table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{
label: "Name",
field: "name"
},
{
label: "Age",
field: "age",
type: "number"
},
{
label: "Birthday",
field: "birthDay",
type: "date",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy"
},
{
label: "Before",
field: "before"
}
],
rows: [
{
mode: "span",
label: "Humans",
html: false,
children: [
{ id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
{ id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
{ id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
]
}
]
};
}
};
</script>
to add a group by changing the rows array into an object with various properties.
The mode is set to 'span' which means the header will span all columns.
labels is the label to display in the header.
html set to true means that the label will be rendered as HTML.
The heading will be displayed above the group.
We can customize the heading with the table-header-row slot.
For example, we can write:
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
:group-options="{
enabled: true,
headerPosition: 'top'
}"
>
<template slot="table-header-row" slot-scope="props">
<span v-if="props.column && props.column.field === 'name'">
{{props.row.label}}
<button class="fancy-btn">Action</button>
</span>
<span v-else>{{ props.formattedRow[props.column.field] }}</span>
</template>
</vue-good-table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{
label: "Name",
field: "name"
},
{
label: "Age",
field: "age",
type: "number"
},
{
label: "Birthday",
field: "birthDay",
type: "date",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy"
}
],
rows: [
{
label: "Humans",
html: false,
children: [
{ id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
{ id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
{ id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
]
}
]
};
}
};
</script>
to add the group heading.
We populate the table-header-row slot to populate the heading.
Also, we set the headerPosition to 'top' to place the group heading above the rows.
The mode property is removed so that we can display the custom heading within the Name column.
Conclusion
We can display table rows in groups with vue-good-table.
Also, we can add content for the select row display.
