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.
Pagination Options
We can add pagination with the vue-good-table component.
To add it, we add the pagination-options prop:
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{
enabled: true,
mode: 'records',
perPage: 3,
position: 'top',
perPageDropdown: [3, 7, 9],
dropdownAllowAll: false,
setCurrentPage: 2,
nextLabel: 'next',
prevLabel: 'prev',
rowsPerPageLabel: 'Rows per page',
ofLabel: 'of',
pageLabel: 'page',
allLabel: 'All',
}"
/>
</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: [
{ 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" },
{ id: 4, name: "James", age: 18, birthDay: "2002-10-30" }
]
};
}
};
</script>
We add the pagination-options prop and set its value to an object with some properties.
enabled indicates whether we want to enable pagination.
mode can be either 'records' or 'pages' .
'pages' lets us jump to any page.
perPage is the number of items per page.
position is the position of the pagination bar.
perPageDropdown is the values for the number of items in a page.
dropdownAllowAll indicates whether we want to display the ‘All’ option in the pagination dropdown.
setCurrentPage lets us set the current page.
nextLabel is the label for the button for going to the next page.
prevLabel is the label for the button for going to the previous page.
rowsPerPageLabel is the number of rows per page.
ofLabel is the label for the ‘of’ word in the pagination display.
pageLabel is the unit for the page we display.
allLabel lets us change how the ‘All’ choice is displayed.
Customizations
We can apply various customizations with vue-good-table.
One of them is the customizing the row.
To do that, we can populate the tabler-row slot.
For example, we can write:
<template>
<div>
<vue-good-table :columns="columns" :rows="rows">
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'age'">
<span style="font-weight: bold;">{{props.row.age}}</span>
</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: [
{ 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>
With the table-row slot, we can customize how cells are displayed.
In our example, we check if the field is 'age' .
If it is, we bold the text.
Otherwise, we display it normally with the formattedRow property.
props.row has the row data.
props.column.field has the field data.
Conclusion
We can customize how rows are displayed and add pagination with vue-good-table.
