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.
Select Event
We can listen to the table row select all event which is emitted when all the table rows are selected.
For example, we can write:
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
:select-options="{ enabled: true }"
@on-select-all="onSelectAll"
/>
</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: {
onSelectAll(params) {
console.log(params);
}
}
};
</script>
We add a checkbox to each row to let us select the row with the select-options prop with an object that has the enabled property set to true .
Also, we added a checkbox to select all the rows on the top left corner.
Search Options
We can add a search box to our vue-good-table .
All we have to do is to add the search-options prop with an object with various options.
For example, we can write:
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
placeholder: 'Search table',
}"
@on-search="onSearch"
/>
</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>
We added the search-options prop with an object with various properties.
The enabled property set to true will make the search box show above the table.
placeholder lets us add a placeholder to for the search box.
We can also change the trigger property to change the way that a search is triggered.
For instance, we can write:
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
placeholder: 'Search table',
trigger: 'enter'
}"
@on-search="onSearch"
/>
</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>
We set trigger to 'enter' so that the search is done only when we press Enter.
Also, we can add the skipDiacritics property to stop vue-good-table from comparing accented characters.
This will speed up our search.
For instance, we add:
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
skipDiacritics: true,
}"
@on-search="onSearch"
/>
</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>
to skip accented character comparison.
To customize how the search is done, we can set the searchFn property to our own function.
For example, we can write:
<template>
<div>
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
searchFn
}"
@on-search="onSearch"
/>
</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: {
searchFn(row, col, cellValue, searchTerm) {
return cellValue === searchTerm;
}
}
};
</script>
We have the searchTerm with the search term.,
cellValue has the cell value that can be compared with the search term to find a matching row.
row and col have the row and column objects respectively.
Conclusion
We can add a search box to do table searches with vue-good-table.
Also, we can enable row selection and get what’s selected.
