Vue Create Dynamic Table

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h2>Vue Create Dynamic Table</h2>
        <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>
    <style scoped>
        /* Style for table */
        #app {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

table {
            border-collapse: collapse;
            width: 100%;
        }

th,
        td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

th {
            background-color: #f2f2f2;
        }

/* Style for form */
        form {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }

label {
            margin-bottom: 10px;
        }

input[type="text"],
        input[type="number"],
        input[type="email"] {
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

button[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 16px;
            cursor: pointer;
        }

button[type="submit"]:hover {
            background-color: #3e8e41;
        }
    </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h2>Vue Create Dynamic Table</h2>
        <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>
    <style scoped>
        /* Style for table */
        #app {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
​
        table {
            border-collapse: collapse;
            width: 100%;
        }
​
        th,
        td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
​
        th {
            background-color: #f2f2f2;
        }
​
        /* Style for form */
        form {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }
​
        label {
            margin-bottom: 10px;
        }
​
        input[type="text"],
        input[type="number"],
        input[type="email"] {
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
​
        button[type="submit"] {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 16px;
            cursor: pointer;
        }
​
        button[type="submit"]:hover {
            background-color: #3e8e41;
        }
    </style>
</body>
​
</html>