How to Create a Dynamic Table in Vue
Jan 07 2024
In this article, we'll show you how to create a dynamic table in Vue using the HTML table element and the Vue ref object.
Let's begin.
CREATE A DYNAMIC TABLE IN VUEJS
Let's generate a set of table data to be displayed in a tabular format before constructing a table element in Vue. To make the table dynamic, we will employ a reactive ref
object that contains an array storing the information of several users.
<script>
import { ref } from 'vue'
export default {
setup() {
const tableData = ref([
{ name: 'Peter', age: 30, email: 'peter@example.com', city: 'New York' },
{ name: 'Jane', age: 25, email: 'jane@example.com', city: 'San Francisco' },
{ name: 'Bob', age: 40, email: 'bob@example.com', city: 'Chicago' }
])
const columns = ref([
{ label: 'Name', field: 'name' },
{ label: 'Age', field: 'age' },
{ label: 'Email', field: 'email' },
{ label: 'City', field: 'city' }
])
return { tableData, columns }
}
}
</script>
Utilizing the v-for
directive, you can iterate over a data array to produce table rows and columns.
Below is an example:
<template>
<table>
<thead>
<tr>
<th v-for="column in columns" :key="column.field">{{ column.label }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, rowIndex) in tableData" :key="rowIndex">
<td v-for="(column, colIndex) in columns" :key="colIndex">{{ item[column.field] }}</td>
</tr>
</tbody>
</table>
</template>
ADD STYLE TO THE TABLE
The default HTML table element does not have an attractive appearance. To improve its appearance, we have applied a style to it, resulting in the final look of the table.
<style>
table {
border-collapse: collapse;
width: 100%;
}
table th,
table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #f2f2f2;
font-weight: bold;
}
table tr:hover {
background-color: #f5f5f5;
}
</style>
Conclusion
This tutorial outlines the steps involved in creating a dynamic table in Vue.js by utilizing an HTML table element and a reactive ref object in Vue.js. Furthermore, we have enhanced the visual appeal of the table by applying styling to it.
If you want to learn more about Vue, then you can check the following articles:
Thank you for reading.