| # |
First Name |
Last Name |
Username |
Role |
Country |
| 1 |
Alexander |
Orton |
@mdorton |
Admin |
USA |
| 2 |
John Deo |
Deo |
@johndeo |
User |
USA |
| 3 |
Randy Orton |
the Bird |
@twitter |
admin |
UK |
| 4 |
Randy Mark |
Ottandy |
@mdothe |
user |
AUS |
| 5 |
Ram Jacob |
Thornton |
@twitter |
admin |
IND |
table.component.html
<div class="overflow-x-auto">
<table class="min-w-full text-sm text-left text-gray-700 border border-gray-200">
<thead class="bg-gray-100 text-xs uppercase text-gray-600">
<tr>
<th scope="col" class="px-4 py-3 border border-gray-200">#</th>
<th scope="col" class="px-4 py-3 border border-gray-200">First Name</th>
<th scope="col" class="px-4 py-3 border border-gray-200">Last Name</th>
<th scope="col" class="px-4 py-3 border border-gray-200">Username</th>
<th scope="col" class="px-4 py-3 border border-gray-200">Role</th>
<th scope="col" class="px-4 py-3 border border-gray-200">Country</th>
</tr>
</thead>
<tbody>
<tr class="bg-white hover:bg-gray-50">
<th scope="row" class="px-4 py-2 font-medium border border-gray-200">1</th>
<td class="px-4 py-2 border border-gray-200">Alexander</td>
<td class="px-4 py-2 border border-gray-200">Orton</td>
<td class="px-4 py-2 border border-gray-200">@mdorton</td>
<td class="px-4 py-2 border border-gray-200">Admin</td>
<td class="px-4 py-2 border border-gray-200">USA</td>
</tr>
<tr class="bg-white hover:bg-gray-50">
<th scope="row" class="px-4 py-2 font-medium border border-gray-200">2</th>
<td class="px-4 py-2 border border-gray-200">John Deo</td>
<td class="px-4 py-2 border border-gray-200">Deo</td>
<td class="px-4 py-2 border border-gray-200">@johndeo</td>
<td class="px-4 py-2 border border-gray-200">User</td>
<td class="px-4 py-2 border border-gray-200">USA</td>
</tr>
<tr class="bg-white hover:bg-gray-50">
<th scope="row" class="px-4 py-2 font-medium border border-gray-200">3</th>
<td class="px-4 py-2 border border-gray-200">Randy Orton</td>
<td class="px-4 py-2 border border-gray-200">the Bird</td>
<td class="px-4 py-2 border border-gray-200">@twitter</td>
<td class="px-4 py-2 border border-gray-200">admin</td>
<td class="px-4 py-2 border border-gray-200">UK</td>
</tr>
<tr class="bg-white hover:bg-gray-50">
<th scope="row" class="px-4 py-2 font-medium border border-gray-200">4</th>
<td class="px-4 py-2 border border-gray-200">Randy Mark</td>
<td class="px-4 py-2 border border-gray-200">Ottandy</td>
<td class="px-4 py-2 border border-gray-200">@mdothe</td>
<td class="px-4 py-2 border border-gray-200">user</td>
<td class="px-4 py-2 border border-gray-200">AUS</td>
</tr>
<tr class="bg-white hover:bg-gray-50">
<th scope="row" class="px-4 py-2 font-medium border border-gray-200">5</th>
<td class="px-4 py-2 border border-gray-200">Ram Jacob</td>
<td class="px-4 py-2 border border-gray-200">Thornton</td>
<td class="px-4 py-2 border border-gray-200">@twitter</td>
<td class="px-4 py-2 border border-gray-200">admin</td>
<td class="px-4 py-2 border border-gray-200">IND</td>
</tr>
</tbody>
</table>
</div>
