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
Tables created with the vue-good-table component emits various kinds of events.
We can listen to them to run what we want when they’re emitted.
One of them is the on-row-click event.
To listen to it, we can write:
<template>
<div>
<vue-good-table :columns="columns" :rows="rows" @on-row-click="onRowClick"/>
</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: {
onRowClick(params) {
console.log(params);
}
}
};
</script>
We listen to the on-row-click event with the onRowClick method.
The params parameter is an object with various properties.
It has the row , pageIndex , selected , and event properties.
row is an object with a row.
pageIndex has the index of the row.
selected is a boolean to indicate whether the table row is selected.
event has the MouseEvent object that’s created from clicking the row.
We can detect the double clicks on a row with the on-row-dblclick event.
For example, we can listen to it by writing:
<template>
<div>
<vue-good-table :columns="columns" :rows="rows" @on-row-dblclick="onRowDoubleClick"/>
</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: {
onRowDoubleClick(params) {
console.log(params);
}
}
};
</script>
params has the same properties as the one in onRowClick method.
We can detect cell clicks by listening to the on-cell-click event.
For instance, we can listen to it by writing:
<template>
<div>
<vue-good-table :columns="columns" :rows="rows" @on-cell-click="onCellClick"/>
</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: {
onCellClick(params) {
console.log(params);
}
}
};
</script>
The params object is slightly different from the ones in the other handler methods.
It has the row , column , rowIndex , and event properties.
row and event are the same as the other params objects.
column is the column that’s clicked.
rowIndex has the index of the row that’s clicked.
Conclusion
We can listen to various events triggered on the table with the vue-good-table plugin.
