How to build a table in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Building data tables is fundamental for Vue applications that display structured data like user lists, product catalogs, or analytics dashboards. As the creator of CoreUI with over 11 years of Vue development experience since 2014, I’ve built countless data tables in enterprise applications. The most effective solution is to use the v-for directive to render table rows from data arrays with proper headers. This approach is simple, performant, and provides full control over table structure and styling.
Use v-for to build data tables in Vue 3.
<template>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for='user in users' :key='user.id'>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<span :class='user.active ? "active" : "inactive"'>
{{ user.active ? 'Active' : 'Inactive' }}
</span>
</td>
</tr>
</tbody>
</table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const users = ref([
{ id: 1, name: 'John Doe', email: '[email protected]', active: true },
{ id: 2, name: 'Jane Smith', email: '[email protected]', active: false },
{ id: 3, name: 'Bob Johnson', email: '[email protected]', active: true }
])
return { users }
}
}
</script>
<style scoped>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.active { color: green; }
.inactive { color: red; }
</style>
The table structure uses standard HTML elements with thead for headers and tbody for data rows. The v-for directive iterates over the users array, creating a row for each user. The :key binding with a unique ID is essential for Vue’s efficient rendering. Dynamic classes and conditional rendering provide visual feedback based on data values. Scoped styles ensure table styling doesn’t affect other components.
Best Practice Note
This is the same table building approach we use in CoreUI Vue components as the foundation for advanced features. For production tables, consider adding sorting, filtering, pagination, and row selection. For large datasets, implement virtual scrolling or server-side pagination to maintain performance.
