Vue Create Dynamic Table:Vue Create Dynamic Table is a feature of the Vue.js framework that allows developers to create tables with dynamic data. The table can be created by defining an array of objects, where each object represents a row in the table, and the keys represent the columns. This data can be passed to a Vue component which can then use the v-for directive to iterate over the array and create table rows. The table columns can be dynamically generated based on the keys of the objects in the array. The data can also be sorted and filtered using Vue’s built-in directives and methods. Overall, Vue Create Dynamic Table provides a convenient and flexible way to display dynamic data in a table format.
How can I create a dynamic table in Vue js?
This Vue.js code creates a dynamic table that allows the user to add new rows. The table is populated with data from an initial tableData array, and new rows are added using a form that updates the tableData array with the user’s input.
The table is created using the v-for directive to iterate over the array and display the data in a table format. The v-model directive binds the form inputs to the newRow object, which is used to add new rows to the tableData array.
The addRow method is called when the form is submitted, which adds the newRow object to the tableData array and resets the form for the next entry.
Vue Create Dynamic Table Example
<div id="app">
<form @submit.prevent="addRow">
<label>Name:</label>
<input v-model="newRow.name" type="text" required>
<label>Age:</label>
<input v-model.number="newRow.age" type="number" min="0" required>
<label>Email:</label>
<input v-model="newRow.email" type="email" required>
<button type="submit">Add Row</button>
</form>
<table>
<thead>
<tr>
<th v-for="(header, index) in tableHeaders" :key="index">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
</tr>
</tbody>
</table>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
tableHeaders: ['Name', 'Age', 'Email'],
tableData: [
{ name: 'John Doe', age: 30, email: 'john@example.com' },
{ name: 'Jane Smith', age: 25, email: 'jane@example.com' },
{ name: 'Bob Johnson', age: 40, email: 'bob@example.com' }
],
newRow: {
name: '',
age: null,
email: ''
}
};
},
methods: {
addRow() {
// Add new row to tableData array
this.tableData.push(this.newRow);
// Reset the form
this.newRow = {
name: '',
age: null,
email: ''
};
}
}
})
app.mount('#app')
</script>
Output of Vue Create Dynamic Table
