How to Create a Dynamic Table in Vue

By onjsdev

Jan 7th, 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>

create a a dynamic table in vuejs

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.