<!-- src/components/DynamicTable.vue file -->
<template>
<div class=
"dynamic-table"
>
<h1>Beautiful Dynamic Table</h1>
<div class=
"filter-inputs"
>
<input v-model=
"filterName"
@input=
"handleFilter"
placeholder=
"Filter by Name"
/>
<input v-model=
"filterEmail"
@input=
"handleFilter"
placeholder=
"Filter by Email"
/>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr v-
for
=
"user in filteredUsers"
:key=
"user.id"
>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { useDebounce } from
'../utils/debounce'
;
export
default
{
data() {
return
{
users: [
{ id: 1, name:
'John Doe'
, email:
'john@example.com'
},
{ id: 2, name:
'Jane Smith'
, email:
'jane@example.com'
},
{ id: 3, name:
'Bob Johnson'
, email:
'bob@example.com'
},
],
filterName:
''
,
filterEmail:
''
,
filteredUsers: [],
};
},
methods: {
handleFilter: useDebounce(
function
() {
this
.filterUsers();
}, 300),
filterUsers() {
const filteredUsers =
this
.users.filter((user) => {
const nameMatch =
user.name.toLowerCase()
.includes(
this
.filterName.toLowerCase());
const emailMatch =
user.email.toLowerCase()
.includes(
this
.filterEmail.toLowerCase());
return
nameMatch && emailMatch;
});
this
.filteredUsers = filteredUsers.length > 0 ?
filteredUsers :
this
.users;
},
},
created() {
this
.filteredUsers =
this
.users;
},
};
</script>
<style scoped>
.dynamic-table {
max-width: 800px;
margin: 50px auto;
text-align: center;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color:
#3498db;
}
.filter-inputs {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
input {
width: 48%;
padding: 10px;
font-size: 16px;
border: 1px solid
#ddd;
border-radius: 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
thead {
background-color:
#3498db;
color:
#fff;
}
th,
td {
padding: 12px;
border: 1px solid
#ddd;
font-size: 14px;
}
th {
background-color:
#2980b9;
}
tr {
transition: background-color 0.3s;
}
tr:hover {
background-color:
#e0e0e0;
}
</style>