Event Table Component - Copy this Angular, Tailwind Component to your project
<div-class="min-h-screen">-<table-class="table-custom-">-<thead>-<tr>-<th>Events</th>-<th-class="w-1/12">-<button-*ngIf="role-!==-'ROLE_USER'"-class="mx-auto-border-border-green-400-hover:bg-gray-200-focus:shadow-outline-focus:outline-none-hover:text-green-500-py-1-px-4-rounded"-type="button"-(click)="addEvent()"->-Add-</button>-</th>-</tr>-<tr-class="!bg-gray-600-text-sm">-<th-class="!px-4-!py-2">Event-Name</th>-<th-*ngIf="role-!==-'ROLE_USER'"-class="!px-4-!py-2-w-1/12">Action</th>-<th-*ngIf="role-==-'ROLE_USER'"-class="!px-4-!py-2-w-1/12"></th>-</tr>-</thead>-<tbody>-<tr-*ngFor="let-event-of-listOfEvent">-<td->{{-event.name-}}</td>-<td->-<button-*ngIf="role-!==-'ROLE_USER'"-class="tooltip-mx-auto-border-border-green-400-hover:bg-gray-200-focus:shadow-outline-focus:outline-none-hover:text-green-500-py-1-px-3-m-1-rounded"-type="button"-(click)="updateEventAdmin(event.id)">-<span-class="tooltiptext">Edit</span>-<i-class="fas-fa-pencil-alt"></i>-</button>-<button-*ngIf="role-==-'ROLE_USER'"-class="tooltip-mx-auto-border-border-green-400-hover:bg-gray-200-focus:shadow-outline-focus:outline-none-hover:text-green-500-py-1-px-3-m-1-rounded"-type="button"-(click)="updateEvent(event.id)">-<span-class="tooltiptext">Edit</span>-<i-class="fas-fa-pencil-alt"></i>-</button>-<button-*ngIf="role-!==-'ROLE_USER'"-class="tooltip-mx-auto-border-border-red-400-hover:bg-gray-200-focus:shadow-outline-focus:outline-none-hover:text-red-500-py-1-px-3-m-1-rounded"-type="button"-(click)="showDeleteConfirmation($event,-event.id)">-<span-class="tooltiptext">Delete</span>-<i-class="fas-fa-trash"></i>-</button>-</td>-</tr>-</tbody>-</table>-<p-*ngIf="listOfEvent.length==0"-class="text-center-mt-8">Events-Not-Available</p>-<!---Stylish-Confirmation-Dialog--->-<div-*ngIf="deleteEventId-!==-null"-class="confirmation-dialog">-<div-class="dialog-content">-<p-class="dialog-text">Are-you-sure-you-want-to-delete-this?</p>-<div-class="dialog-actions">-<button-(click)="confirmDelete()"-class="dialog-btn-dialog-btn-confirm">Yes</button>-<button-(click)="cancelDelete()"-class="dialog-btn-dialog-btn-cancel">No</button>-</div>-</div>-</div>-</div>
