myxelium/Bridge-Multi
1
0
Fork 0
mirror of https://github.com/Myxelium/Bridge-Multi.git synced 2026-04-11 14:19:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Table scrolling and sorting

Browse Source
This commit is contained in:
Geomitron
2023-12-22 13:48:41 -06:00
parent 0a83ea3937
commit 22521c8f28
4 changed files with 42 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src-angular/app/components/browse/result-table/result-table.component.html
View File

@@ -1,17 +1,27 @@
<table id="resultTable" class="table table-zebra table-pin-rows overflow-y-auto">
<table id="resultTable" class="table table-zebra table-pin-rows">
<!-- 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>
<th [class.sorted]="sortColumn === 'year'" [ngClass]="sortDirection" (click)="onColClicked('year')">Year</th>
<th [ngClass]="sortDirection" (click)="onColClicked('name')">
Name <i *ngIf="sortColumn === 'name'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('artist')">
Artist
<i *ngIf="sortColumn === 'artist'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('album')">
Album <i *ngIf="sortColumn === 'album'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('genre')">
Genre <i *ngIf="sortColumn === 'genre'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
<th [ngClass]="sortDirection" (click)="onColClicked('year')">
Year <i *ngIf="sortColumn === 'year'" class="bi bi-caret-{{ sortDirection === 'ascending' ? 'down' : 'up' }}-fill"></i>
</th>
</tr>
</thead>
<tbody>