I have as datasource in a Material table a signal.

  dataSource: WritableSignal<PeriodicElement[]> = signal([]);

The data of the table is displayed properly

I add according to the description the matSort to the header.

<table mat-table matSort [dataSource]="dataSource()" class="mat-elevation-z8">
<!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell mat-sort-header *matHeaderCellDef>No.</th>
...

But somehow this won't work. I've seen and tried without Signals and this worked. Any idea how to use it properly with Signals?

Stackblitz

I have as datasource in a Material table a signal.

  dataSource: WritableSignal<PeriodicElement[]> = signal([]);

The data of the table is displayed properly

I add according to the description the matSort to the header.

<table mat-table matSort [dataSource]="dataSource()" class="mat-elevation-z8">
<!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell mat-sort-header *matHeaderCellDef>No.</th>
...

But somehow this won't work. I've seen and tried without Signals and this worked. Any idea how to use it properly with Signals?

Stackblitz

• angular
• angular-material
• angular-material-table

Share Improve this question Follow asked Mar 3 at 9:44 LeOLeO 5,31666 gold badges6262 silver badges110110 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

A DataSource of a mat-table can be an Array OR a MatTableDataSource. If you use an Array as dataSource, you have NOT "sort" properties. So you need define some like

  dataSource:  WritableSignal<MatTableDataSource<PeriodicElement>>=
                      signal(new MatTableDataSource([] as PeriodicElement[]))

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.dataSource.set(new MatTableDataSource(ELEMENT_DATA));
  }

  ngAfterViewInit() {
    this.dataSource().sort=this.sort
  }