mirror of
https://github.com/Myxelium/Bridge-Multi.git
synced 2026-07-07 18:45:09 +00:00
27 lines
1.3 KiB
HTML
27 lines
1.3 KiB
HTML
<table id="resultTable" class="table table-zebra table-pin-rows overflow-y-auto">
|
|
<!-- TODO: maybe have some of these tags customizable? E.g. small/large/compact/padded -->
|
|
<!-- TODO: learn semantic themes in order to change the $mobileBreakpoint global variable (better search table adjustment) -->
|
|
<thead>
|
|
<!-- NOTE: it would be nice to make this header sticky, but Fomantic-UI doesn't currently support that -->
|
|
<tr>
|
|
<th class="collapsing" id="checkboxColumn">
|
|
<input #checkAllCheckbox type="checkbox" class="checkbox" (change)="checkAll(checkAllCheckbox.checked)" />
|
|
</th>
|
|
<th [class.sorted]="sortColumn === 'name'" [ngClass]="sortDirection" (click)="onColClicked('name')">Name</th>
|
|
<th [class.sorted]="sortColumn === 'artist'" [ngClass]="sortDirection" (click)="onColClicked('artist')">Artist</th>
|
|
<th [class.sorted]="sortColumn === 'album'" [ngClass]="sortDirection" (click)="onColClicked('album')">Album</th>
|
|
<th [class.sorted]="sortColumn === 'genre'" [ngClass]="sortDirection" (click)="onColClicked('genre')">Genre</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (song of songs; track song) {
|
|
<tr
|
|
app-result-table-row
|
|
(click)="onRowClicked(song)"
|
|
[class.!bg-neutral]="activeSong === song"
|
|
[class.!text-neutral-content]="activeSong === song"
|
|
[song]="song"></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|