sorting based on column click in angular material with hidden headers

I am using angular material version 15, here i need to sort the table but without headers, so based on click of column, sorting must take place.
HTML:

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="sortData('name')"> {{element.name}} </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Ts:

   sortData(event) {
    let booleanValue:boolean = false;
    let boolean:any;
    if (boolean == true){
      this.dataSource.sort((a, b) => a[event] < b[event] ? 1 : a[event] > b[event] ? -1 : 0)
      booleanValue = !booleanValue
      boolean = booleanValue
  }
  else{
      this.dataSource.sort((a, b) => a[event] > b[event] ? 1 : a[event] < b[event] ? -1 : 0)
      booleanValue = !booleanValue
      boolean = booleanValue
  }
  }

Demo

You can use an object sort like material angular use

sort={active:'',direction:'asc'}

Then your function sortData use this object. Teh function will become like

sortData(event:string) {
    this.sort.direction=this.sort.active==event?this.sort.direction=='asc'?'desc':
                                                                         'asc':'asc'
    this.sort.active=event
      
    const factor=this.sort.direction=='asc'?1:-1;
     this.dataSource.sort((a:any, b:any) => a[event] < b[event] ? factor :
                                            a[event] > b[event] ? -factor : 0)
     this.table.renderRows()
  }

See that it's necesary use renderRows(). To get the table use ViewChild

  @ViewChild(MatTable) table: MatTable<any>;

stackblitz