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.
Table Events
We can listen to various events triggered by the vue-good-table component.
One of them is the row mouse leave event.
To listen to it, we can listen to the on-row-mouseleave event:
<template>
<div>
<vue-good-table :columns="columns" :rows="rows" @on-row-mouseleave="onRowMouseleave"/>
</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: "Susan", age: 16, birthDay: "2004-10-30" }
]
};
},
methods: {
onRowMouseleave(row, pageIndex) {
console.log(row, pageIndex);
}
}
};
</script>
row is an object with the row properties.
pageIndex is the index of the row that our mouse left.
The on-page-change event lets us listen to page change events.
For example, we can write:
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
@on-page-change="onPageChange"
:pagination-options="{
enabled: true,
perPage: 5,
}"
/>
</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: "Sue", age: 16, birthDay: "2004-1-30" },
{ id: 5, name: "Alex", age: 16, birthDay: "2004-3-30" },
{ id: 6, name: "Susan", age: 16, birthDay: "2004-5-30" }
]
};
},
methods: {
onPageChange(params) {
console.log(params);
}
}
};
</script>
We add a table with the pagination-options prop to add pagination to our table.
enabled lets us enable pagination.
perPage lets us set how many rows to display per page.
The on-page-change directive is set to the onPageChange method with the params object.
The object has the currentPage , currentPerPage , total , and prevPage properties.
currentPage has the current page’s number.
currentPerPage has the number of rows to display.
total has the total number of items in the table.
prevPage has the page number of the previous page.
Also, we can listen to the on-sort-change event to listen to table sorting changes.
For example, we can write:
<template>
<div>
<vue-good-table :columns="columns" :rows="rows" @on-sort-change="onSortChange"/>
</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" }
]
};
},
methods: {
onSortChange(params) {
console.log(params);
}
}
};
</script>
to listen to the event.
params has the field and type properties.
field has the property name that we’re sorting.
The type has the direction that we’re sorting.
Conclusion
We can listen to pagination and sorting events emitted from the vue-good-table component.
