<div class="events-table mx-auto">
    <div class="table-responsive mx-auto rounded-3">
        <table class="table table-dark table-striped text-center" data-toggle="table" data-sort-name="Date/Time" data-sort-order="asc" style="margin: 0;">
            <thead>
                <tr>
                    <th>Date/Time</th>
                    <th>Icon</th>
                    <th>Event</th>
                    <th>Genre</th>
                    <th>Venue</th>
                </tr>
            </thead>
            <tbody *ngFor = "let event of events">
                <tr (click)="showEventDetail(event.id, event.venue)" class="clickable">
                    <td>{{event.date}}<br>{{event.time}}</td>
                    <td><img src="{{event.iconUrl}}"></td>
                    <td>{{event.name}}</td>
                    <td>{{event.genre}}</td>
                    <td>{{event.venue}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>