14. Project [vuejs-12]: HTML table management
The directory structure of the [vuejs-12] project is as follows:
14.1. The main script [main.js]
The main script returns to what it was in the early projects:
// imports
import Vue from 'vue'
import App from './App.vue'
// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
// Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// configuration
Vue.config.productionTip = false
// project instantiation [App]
new Vue({
name: "app",
render: h => h(App),
}).$mount('#app')
14.2. The main view [App]
The code for the main view [App] is as follows:
<template>
<div class="container">
<b-card>
<!-- message -->
<b-alert show variant="success" align="center">
<h4>[vuejs-12]: Table Management</h4>
</b-alert>
<!-- Table component -->
<Table @deleteRow="deleteRow" :rows="rows" @refreshList="refreshList" />
</b-card>
</div>
</template>
<script>
import Table from "./components/Table";
export default {
// name
name: "app",
// components used
components: {
Table
},
// internal state
data() {
return {
// list of simulations
rows: [
{ id: 3, married: "yes", children: 2, salary: 35000, tax: 1200 },
{ id: 5, married: "no", children: 2, salary: 35000, tax: 1900 },
{ id: 7, married: "no", children: 0, salary: 30000, tax: 2000 }
]
};
},
// methods
methods: {
// delete a row
deleteLine(index) {
// eslint-disable-next-line
console.log("App deleteLine", index);
// delete line at position [index]
this.lines.splice(index, 1);
},
// reload the list of lines
reloadList() {
// eslint-disable-next-line
console.log("App reloadList");
// regenerate the list of lines
this.lines = [
{ id: 3, married: "yes", children: 2, salary: 35000, tax: 1200 },
{ id: 5, married: "no", children: 2, salary: 35000, tax: 1900 },
{ id: 7, married: "no", children: 0, salary: 30000, tax: 2000 }
];
}
}
};
</script>
Comments
- the main view displays a [Table] component (lines 9, 15, 21);
- line 9: the [Table] component accepts the [:rows] parameter, which represents the rows to be displayed in an HTML table. These rows are defined by lines 27–31 of the code;
- line 9: the [Table] component can trigger two events:
- [deleteRow]: to delete a row by specifying its index (line 38);
- [reloadList]: to regenerate the list in lines 27–31. In fact, we will see that the user can delete some of the displayed rows;
- lines 38–43: the method responsible for handling the [deleteRow] event. It receives the index of the row to be deleted as a parameter;
- lines 45–54: the method responsible for handling the [reloadList] event. By modifying the [rows] attribute on line 27, we trigger an update of the [Table] component on line 9, since it has a parameter [:rows="rows"] ;
14.3. The [Table] component
The [Table] component is as follows:
<template>
<div>
<!-- empty list -->
<template v-if="lines.length==0">
<b-alert show variant="warning">
<h4>Your list of simulations is empty</h4>
</b-alert>
<!-- reload button -->
<b-button variant="primary" @click="reloadList">Reload list</b-button>
</template>
<!-- non-empty list-->
<template v-if="lines.length!=0">
<b-alert show variant="primary" v-if="lignes.length==0">
<h4>List of your simulations</h4>
</b-alert>
<!-- simulation table -->
<b-table striped hover responsive :items="rows" :fields="fields">
<template v-slot:cell(action)="row">
<b-button variant="link" @click="deleteRow(row.index)">Delete</b-button>
</template>
</b-table>
</template>
</div>
</template>
<script>
export default {
// properties
props: {
lines: {
type: Array
}
},
// internal state
data() {
return {
fields: [
{ label: "#", key: "id" },
{ label: "Married", key: "married" },
{ label: "Number of children", key: "children" },
{ label: "Salary", key: "salary" },
{ label: "Tax", key: "tax" },
{ label: "", key: "action" }
]
};
},
// methods
methods: {
// delete a row
deleteLine(index) {
// eslint-disable-next-line
console.log("Table deleteRow", index);
// pass the information to the parent component
this.$emit("deleteLine", index);
},
// reload the displayed list
reloadList() {
// eslint-disable-next-line
console.log("Table reloadList");
// emit an event to the parent component
this.$emit("reloadList");
}
}
};
</script>
Comments
This component has two states:
- it displays a list in an HTML table;
- or a message indicating that the list to be displayed is empty;
The first state is displayed if the condition [lines.length!=0] is true (line 12):
The second one is displayed if the condition [lines.length==0] is true (line 4).
- [lines] is an input parameter of the component (lines 29–33);
- lines 4–10: instead of inserting a code block with a <div> tag, we have used a <template> tag here. The difference between the two is that the <template> tag is not included in the generated HTML code;
- line 9: when the list displayed by the HTML table is empty, a button offers to refresh it. When this button is clicked, the [reloadList] method in lines 57–62 is executed. This method simply sends the [reloadList] event to the parent component, which instructs the parent to regenerate the list displayed by the HTML table;
- lines 12–22: the code displayed when the list to be displayed is not empty;
- line 17: the <b-table> tag is the tag that generates an HTML table. The attributes used here are as follows:
- [striped]: the background color of the rows alternates. There is one color for even rows and another for odd rows. This improves visibility;
- [hover]: the row over which the mouse hovers changes color;
- [responsive]: the table’s size adapts to the screen displaying it;
- [:items]: the array of items to display. Here, the [rows] array is passed as a parameter to the component (lines 30–32);
- [:fields]: an array defining the layout of the HTML table (lines 37–44);
- Each element in the [fields] array defines a column in the HTML table;
- [label]: specifies the column header;
- [key]: specifies the column’s content;
- line 38: defines column 0 of the HTML table:
- [#]: is the column header;
- [id]: is its content. It is the [id] field of the displayed row that will populate column 0;
- line 39: defines column 1 of the HTML table:
- [Married]: is the column header;
- [married]: is its content. It is the [married] field of the displayed row that will populate column 0;
- line 43: defines the last column of the HTML table:
- the column has no title;
- its content is defined by an [action] field, a field that does not exist in the displayed rows. This key is referenced in line 18 of the [template]. The key is therefore used here solely to identify a column;
- lines 18–20: this code is used to define the last column of the HTML table, the one with the [action] key:
<template v-slot:cell(action)="row">
The syntax [v-slot:cell(action)] refers to the [action] key column. This syntax allows you to define a column when the [fields] array syntax is not sufficient to describe it. Here, we want the last column to contain a link that allows you to delete a row from the HTML table:
In the syntax [<template v-slot:cell(action)="row">], the name [row] refers to the table row. You can use any name you want. We could have written [<template v-slot:cell(action)="row">];
- line 19: a <b-button> displayed as a link [variant='link']. Clicking this link triggers the execution of the [supprimerLigne(row.index)] method. Here, [row] is the name given to the row in the HTML table, line 18 of the code;
- Lines 50–55: the [deleteRow] method;
- line 54: the [deleteRow] event is sent to the parent component along with the number of the row to be deleted;
- lines 57–62: the [reloadList] method;
- line 61: the [reloadList] event is sent to the parent component;
14.4. Running the project
The first view displayed is as follows:
After deleting row 1 [1], the view becomes as follows:
After deleting all rows:
After clicking the button [2], the list is restored:
