1+ <template >
2+ <div >
3+ <!-- Dropdown to select search type (Name or Email) -->
4+ <select v-model =" searchType"
5+ <option value =" name" option >
6+ <option value =" email" option >
7+ </select >
8+
9+ <!-- Search bar to filter table -->
10+ <input
11+ type =" text"
12+ v-model =" searchQuery"
13+ placeholder =" Search by selected option"
14+ @input =" debouncedSearch"
15+ />
16+
17+ <!-- Container to make the table vertically scrollable -->
18+ <div class =" table-container"
19+ <table >
20+ <thead >
21+ <tr >
22+ <th >Name</th >
23+ <th >Email</th >
24+ <th >Mobile Number</th >
25+ <th >Photo</th >
26+ </tr >
27+ </thead >
28+ <tbody >
29+ <tr v-for =" user in filteredUsers" :key =" user.email"
30+ <td >{{ user.name }}</td >
31+ <td >{{ user.email }}</td >
32+ <td >{{ user.mobile }}</td >
33+ <td ><img :src =" user.photo" alt =" User Photo" width =" 50" td >
34+ </tr >
35+ </tbody >
36+ </table >
37+ </div >
38+ </div >
39+ </template >
40+
41+ <script >
42+ import _ from ' lodash' // for debounce
43+
44+ export default {
45+ data () {
46+ return {
47+ searchQuery: " " // The search input from the user
48+ searchType: " name" // Default search type is by name
49+ users: [
50+ {
51+ " name" : " Bob Johnson"
52+ " email" : " bob@example.com"
53+ " mobile" : " 456-789-1234"
54+ " photo" : " https://via.placeholder.com/50"
55+ },
56+ {
57+ " name" : " Alice Smith"
58+ " email" : " alice@example.com"
59+ " mobile" : " 123-456-7890"
60+ " photo" : " https://via.placeholder.com/50"
61+ },
62+ {
63+ " name" : " Charlie Brown"
64+ " email" : " charlie@example.com"
65+ " mobile" : " 234-567-8901"
66+ " photo" : " https://via.placeholder.com/50"
67+ },
68+ {
69+ " name" : " David White"
70+ " email" : " david@example.com"
71+ " mobile" : " 345-678-9012"
72+ " photo" : " https://via.placeholder.com/50"
73+ },
74+ {
75+ " name" : " Emily Davis"
76+ " email" : " emily@example.com"
77+ " mobile" : " 456-789-0123"
78+ " photo" : " https://via.placeholder.com/50"
79+ },
80+ {
81+ " name" : " Frank Miller"
82+ " email" : " frank@example.com"
83+ " mobile" : " 567-890-1234"
84+ " photo" : " https://via.placeholder.com/50"
85+ },
86+ {
87+ " name" : " Grace Lee"
88+ " email" : " grace@example.com"
89+ " mobile" : " 678-901-2345"
90+ " photo" : " https://via.placeholder.com/50"
91+ },
92+ {
93+ " name" : " Henry Wilson"
94+ " email" : " henry@example.com"
95+ " mobile" : " 789-012-3456"
96+ " photo" : " https://via.placeholder.com/50"
97+ },
98+ {
99+ " name" : " Ivy Moore"
100+ " email" : " ivy@example.com"
101+ " mobile" : " 890-123-4567"
102+ " photo" : " https://via.placeholder.com/50"
103+ },
104+ {
105+ " name" : " Jack Taylor"
106+ " email" : " jack@example.com"
107+ " mobile" : " 901-234-5678"
108+ " photo" : " https://via.placeholder.com/50"
109+ },
110+ {
111+ " name" : " Karen Clark"
112+ " email" : " karen@example.com"
113+ " mobile" : " 123-567-8901"
114+ " photo" : " https://via.placeholder.com/50"
115+ },
116+ {
117+ " name" : " Larry Lewis"
118+ " email" : " larry@example.com"
119+ " mobile" : " 234-678-9012"
120+ " photo" : " https://via.placeholder.com/50"
121+ },
122+ {
123+ " name" : " Megan Walker"
124+ " email" : " megan@example.com"
125+ " mobile" : " 345-789-0123"
126+ " photo" : " https://via.placeholder.com/50"
127+ },
128+ {
129+ " name" : " Nathan Harris"
130+ " email" : " nathan@example.com"
131+ " mobile" : " 456-890-1234"
132+ " photo" : " https://via.placeholder.com/50"
133+ },
134+ {
135+ " name" : " Olivia Martin"
136+ " email" : " olivia@example.com"
137+ " mobile" : " 567-901-2345"
138+ " photo" : " https://via.placeholder.com/50"
139+ },
140+ {
141+ " name" : " Paul Robinson"
142+ " email" : " paul@example.com"
143+ " mobile" : " 678-012-3456"
144+ " photo" : " https://via.placeholder.com/50"
145+ },
146+ {
147+ " name" : " Quincy Adams"
148+ " email" : " quincy@example.com"
149+ " mobile" : " 789-123-4567"
150+ " photo" : " https://via.placeholder.com/50"
151+ },
152+ {
153+ " name" : " Rachel King"
154+ " email" : " rachel@example.com"
155+ " mobile" : " 890-234-5678"
156+ " photo" : " https://via.placeholder.com/50"
157+ },
158+ {
159+ " name" : " Steve Cooper"
160+ " email" : " steve@example.com"
161+ " mobile" : " 901-345-6789"
162+ " photo" : " https://via.placeholder.com/50"
163+ },
164+ {
165+ " name" : " Tina Campbell"
166+ " email" : " tina@example.com"
167+ " mobile" : " 123-678-9012"
168+ " photo" : " https://via.placeholder.com/50"
169+ }
170+ ]
171+
172+ };
173+ },
174+ computed: {
175+ filteredUsers () {
176+ const query = this .searchQuery .toLowerCase ();
177+
178+ // Filter based on search type (Name or Email)
179+ return this .users .filter (user => {
180+ if (this .searchType === " name"
181+ return user .name .toLowerCase ().includes (query);
182+ } else if (this .searchType === " email"
183+ return user .email .toLowerCase ().includes (query);
184+ }
185+ });
186+ }
187+ },
188+ methods: {
189+ handleSearch () {
190+ // For now, it searches on the frontend.
191+ // Later, replace this part with an API call to the backend.
192+ },
193+ debouncedSearch: _ .debounce (function () {
194+ this .handleSearch ();
195+ }, 300 ) // debounce with a delay of 300ms
196+ }
197+ };
198+ </script >
199+
200+ <style >
201+ /* Container for making the table vertically scrollable */
202+ .table-container {
203+ max-height 300px ; /* Set the height as needed */
204+ overflow-y auto ; /* Enable vertical scrolling */
205+ border 1px solid #ddd ; /* Optional: for better visibility */
206+ position relative ;
207+ }
208+
209+ /* Styling for the table */
210+ table {
211+ width 100% ;
212+ border-collapse collapse ;
213+ }
214+ th , td {
215+ border 1px solid #ddd ;
216+ padding 8px ;
217+ }
218+
219+ /* Fix the table header */
220+ thead th {
221+ position sticky ;
222+ top 0 ;
223+ background-color #f2f2f2 ;
224+ z-index 1 ;
225+ }
226+
227+ /* Optional: Make the header more visible when scrolling */
228+ thead {
229+ background-color #f8f9fa ; /* Slightly different color for visibility */
230+ }
231+
232+ /* Basic table and image styling */
233+ img {
234+ border-radius 50% ;
235+ }
236+ </style >
237+
0 commit comments