How to add sorting into mat-list?

Question

I found a lot of solutions, but none of them working with mat-list. It necessary for me, because mat-list is only one solution where drag&drop working ( table had mat-table always have this issue for me and i can't find solution how to fix it). There is part of my html from working mat-list with drag&drop, but no idea 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>

Attepmt 1

This code: <mat-grid-tile mat-sort-header="name" colspan="4" class="title-tile">

Causes:

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 few example elements:

ngOnInit() {
    const folderA = this.fileService.add(
      { 
        name: 'Movies', 
        isFolder: true, 
        parent: 'root',
        status: 'online',
        size: 0,
        serverVersion: '5',
        lastModified: 'added yesterday',
        segmentName: 'IDK'
      }
    );
    this.fileService.add(
      { 
        name: 'Trash', 
        isFolder: true, 
        parent: 'root',
        status: 'unknown',
        size: 0,
        serverVersion: '22',
        lastModified: 'added 2 years ago',
        segmentName: 'WTF'
      }
    );
    this.fileService.add(
      { 
        name: 'how_to_fix_it', 
        isFolder: false, 
        parent: 'root',
        extension: '.txt',
        status: 'offline',
        size: 2048,
        serverVersion: '1',
        lastModified: 'added 1 week ago',
        segmentName: 'NI'
      }
    );
    this.fileService.add(
      { 
        name: 'cute', 
        isFolder: false, 
        parent: 'root',
        extension: '.jpg',
        status: 'online',
        size: 4096,
        serverVersion: '12',
        lastModified: 'added today',
        segmentName: 'WUT'
      }
    );
    const temp = (folderA.id as string);
    this.fileService.add(
      { 
        name: 'Game of thrones', 
        isFolder: true, 
        parent: temp,
        status: 'online',
        size: 0,
        serverVersion: '5',
        lastModified: 'added month ago',
        segmentName: 'OMG'
      }
    );
    this.updateFileElementQuery();

They came as input:

  @Input() elements: Element[];

Fmerco · Accepted Answer · 2020-02-25T20:59:25.187

I have restructured your code a bit to adapt it to the improper use you have to make of it (it would be more correct to use a dataTable to have the sorting by default).

Of course, with this I laid the foundation for your future restructuring of the code.

html

<div *ngIf="true" fxFlex class="list-borders">

    <mat-grid-list cols="16" rowHeight="50px" class="title-row">
        <div class="flex">
            <mat-grid-tile *ngFor="let tile of tiles;" [colspan]="tile.cols" [rowspan]="tile.rows" [class]="tile.class"
                (click)="sortOnClick(tile);">
                <span class="flex"> {{tile.text}} <mat-icon>{{ !tile.direction ? 'arrow_drop_down' : 'arrow_drop_up' }}</mat-icon> </span>
            </mat-grid-tile>
        </div>
    </mat-grid-list>

    <div cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="elements">
        <!-- (contextmenu)="onContextMenu($event, element)" -->
        <mat-list-item cdkDrag *ngFor="let element of elements">
            <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>
    </div>
</div>

angular typescript list
shareeditflag

ts

import { Component, ViewChild, ElementRef, ChangeDetectionStrategy, Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { orderBy } from 'lodash';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  elements = [
    {
      name: 'Movies',
      isFolder: true,
      parent: 'root',
      status: 'online',
      size: 0,
      serverVersion: '5',
      lastModified: 'added yesterday',
      segmentName: 'IDK'
    },
    {
      name: 'Trash',
      isFolder: true,
      parent: 'root',
      status: 'unknown',
      size: 0,
      serverVersion: '22',
      lastModified: 'added 2 years ago',
      segmentName: 'WTF'
    },
    {
      name: 'how_to_fix_it',
      isFolder: false,
      parent: 'root',
      extension: '.txt',
      status: 'offline',
      size: 2048,
      serverVersion: '1',
      lastModified: 'added 1 week ago',
      segmentName: 'NI'
    },
    {
      name: 'cute',
      isFolder: false,
      parent: 'root',
      extension: '.jpg',
      status: 'online',
      size: 4096,
      serverVersion: '12',
      lastModified: 'added today',
      segmentName: 'WUT'
    },
    {
      name: 'Game of thrones',
      isFolder: true,
      parent: 'temp',
      status: 'online',
      size: 0,
      serverVersion: '5',
      lastModified: 'added month ago',
      segmentName: 'OMG'
    }
  ];

  tiles = [
    { text: 'name', cols: 4, rows: 1, class: 'title-tile', direction: false },
    { text: 'extension', cols: 2, rows: 1, class: 'title-tile', direction: false },
    { text: 'status', cols: 2, rows: 1, class: 'title-tile', direction: false },
    { text: 'size', cols: 2, rows: 1, class: 'title-tile', direction: false },
    { text: 'serverVersion', cols: 2, rows: 1, class: 'title-tile', direction: false },
    { text: 'lastModified', cols: 5, rows: 1, class: 'title-tile', direction: false },
    { text: 'segmentName', cols: 2, rows: 1, class: 'title-tile', direction: false },
  ];

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }

  constructor() {
  }

  sortOnClick(tile) {
    this.elements = orderBy(this.elements, [tile.text], [tile.direction ? 'asc' : 'desc']);
    tile.direction = !tile.direction
  }

}

css

.flex {
  display: flex;
}

You can find the stackblitz there:

https://stackblitz.com/edit/add-angular-material-4aaevt

If you give me the sort criteria i will create a stackblitz for you. — Fmerco, Feb 25 '20 at 08:32
Sort criteria is when you click on Name table header or Extension. Like classic table with sorting headers. This is possible on mat-list? — Yamdi, Feb 25 '20 at 08:33
Can you update your question with some Data? So I can recreate in the right way — Fmerco, Feb 25 '20 at 08:38
Which data you needed? I can provide everything is necessary. — Yamdi, Feb 25 '20 at 08:43
I lost hope for doing that :( another try - drag&drop didn't work — Yamdi, Feb 25 '20 at 11:20

How to add sorting into mat-list?

Attepmt 1

Update 1

1 Answers1