I've searched for various solutions, but none seem to work with mat-list. It's crucial for me because mat-list is the only solution where drag&drop functionality works (I always face this issue with mat-table in tables and I can't find a resolution). Below is a snippet of my HTML code that incorporates working mat-list with drag&drop, but I'm unsure how to add sorting:
<div *ngIf="viewList" fxFlex class="list-borders">
<mat-list cdkDropList (cdkDropListDropped)="drop($event)">
<mat-list-item>
<mat-grid-list cols="16" rowHeight="50px" fxFlex class="title-row">
<mat-grid-tile colspan="4" class="title-tile">
Name
</mat-grid-tile>
<mat-grid-tile class="title-tile">
Extension
</mat-grid-tile>
<mat-grid-tile class="title-tile">
Status
</mat-grid-tile>
<mat-grid-tile class="title-tile">
Size
</mat-grid-tile>
<mat-grid-tile colspan="2" class="title-tile">
Server version
</mat-grid-tile>
<mat-grid-tile colspan="5" class="title-tile">
Last modified (server)
</mat-grid-tile>
<mat-grid-tile colspan="2">
Segment name
</mat-grid-tile>
</mat-grid-list>
</mat-list-item>
<mat-list-item cdkDrag *ngFor="let element of Elements" (click)="navigate(element)" (contextmenu)="onContextMenu($event, element)" >
<mat-grid-list cols="16" rowHeight="50px" fxFlex>
<mat-grid-tile colspan="4">
<mat-icon *ngIf="element.isFolder" color="primary">
folder
</mat-icon>
<mat-icon *ngIf="!element.isFolder" color="primary">
insert_drive_file
</mat-icon>
{{element.name}}
</mat-grid-tile>
<mat-grid-tile>
{{element.extension}}
</mat-grid-tile>
<mat-grid-tile>
<mat-icon *ngIf="element.status == 'online'" class="status-online">
check_circle
</mat-icon>
<mat-icon *ngIf="element.status == 'unknown'" class="status-unknown">
help
</mat-icon>
<mat-icon *ngIf="element.status == 'offline'" class="status-offline">
report_problem
</mat-icon>
</mat-grid-tile>
<mat-grid-tile>
{{element.size}}
</mat-grid-tile>
<mat-grid-tile colspan="2">
{{element.serverVersion}}
</mat-grid-tile>
<mat-grid-tile colspan="5">
{{element.lastModified}}
</mat-grid-tile>
<mat-grid-tile colspan="2">
{{element.segmentName}}
</mat-grid-tile>
</mat-grid-list>
</mat-list-item>
</mat-list>
</div>
Attempt 1
This line of code:
<mat-grid-tile mat-sort-header="name" colspan="4" class="title-tile">Results in:
More than one component matched on this element. Make sure that only one component's selector can match a given element. Conflicting components: MatGridTile,MatSortHeaderng(0)
Update 1
Elements:
export class Element {
id?: string
isFolder: boolean
name: string
parent: string
extension?: string
status?: string
size?: number
serverVersion?: string
lastModified?: string
segmentName?: string
}
And here are a few sample elements:
ngOnInit() {
const folderA = this.fileService.add(
{
name: 'Movies',
isFolder: true,
parent: 'root',
status: 'online',
size: 0,
serverVersion: '5',
lastModified: 'added yesterday',
segmentName: 'IDK'
}
);
// More fileService.add() calls for other elements
this.updateFileElementQuery();
They were provided as input:
@Input() elements: Element[];