Turbo table can not sort column

Question

I am using turbo table of PrimeNG angular, I want to sort column width, length, and thickness. I applied to follow the code example but it doesn't work I don't know why and here is my code :

<p-table [value]="section" sortField="Thickness" sortMode="single" *ngFor="let section of sections">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th>Quantity</th>
                                    <th>Length</th>
                                    <th>Width</th>
                                    <th [pSortableColumn]="Thickness">Thickness</th>
                                    <th>T</th>
                                    <th>B</th>
                                    <th>L</th>
                                    <th>R</th>
                                    <th>EAR</th>
                                    <th>D/S</th>
                                    <th>m^2</th>
                                    <th></th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowData>
                                <tr>
                                    <th colspan="4">
                                        <div (click)="EditSection(rowData.IsCustom, rowData)" class="text-left">{{rowData.SectionName +" "+ rowData.Description.Description + " " + (rowData.Extras
                                            != undefined ? rowData.Extras.join(" ") : "") + " " + rowData.Colour + " " +
                                            rowData.Finish.Description + " - $" + rowData.Rate +" / sqm" }}
                                        </div>
                                    </th>
                                    <th colspan="8" *ngIf="!rowData.IsCustom">
                                        <div class="md-inputfield">
                                            <p-autoComplete field="text" name="acPiece" delay="1000" (onSelect)="selectedPieces($event, rowData.SectionName)" [suggestions]="acPieces"
                                                (completeMethod)="autoCompletePiece($event, rowData.SectionName)"></p-autoComplete>
                                        </div>
                                    </th>
                                </tr>
                                <tr *ngFor="let piece of rowData.Pieces; let i = index">
                                    <td>
                                        <p-spinner [name]="rowData.SectionName+'_spQuantity_'+i" #spQuantity="ngModel" [(ngModel)]="piece.Quantity"></p-spinner>
                                    </td>
                                    <td pEditableColumn>
                                        <p-cellEditor *ngIf="!rowData.IsCustom">
                                            <ng-template pTemplate="input">
                                                <input type="text" [name]="rowData.SectionName+'_length_'+i" [(ngModel)]="piece.Length">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{piece.Length}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td pEditableColumn>
                                        <p-cellEditor *ngIf="!rowData.IsCustom">
                                            <ng-template pTemplate="input">
                                                <input type="text" [name]="rowData.SectionName+'_width_'+i" [(ngModel)]="piece.Width">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{piece.Width}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td pEditableColumn>
                                        <p-cellEditor *ngIf="(!rowData.IsCustom)">
                                            <ng-template pTemplate="input">
                                                <input type="text" [name]="rowData.SectionName+'_thickness_'+i" [(ngModel)]="piece.Thickness">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{piece.Thickness}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Top'+i" binary="true" [(ngModel)]="piece.Top"></p-checkbox>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Bottom'+i" binary="true" [(ngModel)]="piece.Bottom"></p-checkbox>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Left'+i" binary="true" [(ngModel)]="piece.Left"></p-checkbox>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Right'+i" binary="true" [(ngModel)]="piece.Right"></p-checkbox>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_EAR'+i" binary="true" [(ngModel)]="piece.EAR"></p-checkbox>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_DoubleSide'+i" binary="true" [(ngModel)]="piece.DoubleSide"></p-checkbox>
                                    </td>
                                    <td *ngIf="(!rowData.IsCustom)">
                                        {{calculateTotalArea(piece)}}
                                    </td>
                                    <td *ngIf="(!rowData.IsCustom)">
                                        <button pButton type="button" icon="fa-close" (click)="removePieceItem(i, rowData.SectionName)"></button>
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>

I added two attributes to turbo table : sortField="Thickness" sortMode="single" but it doesn't work, anyone helps me fix this, thank http://plnkr.co/edit/vEsGORleWpf3YKBGwYDx?p=preview

Answer 1

Here is an example with Thickness column sorting.

Because I don't know if you can sort only specific fields according to the documentation, I created a custom click event :

<th (click)="sortByThickness(sectionIndex)">Thickness</th>

And here is the sorting logic :

sortByThickness(sectionIndex) {
    const thisRef = this;
    this.sections[sectionIndex][0].Pieces.sort(function(a, b){
      return (a.Thickness - b.Thickness)*thisRef.descThicknessOrder;
    });

    // save order choice
    this.descThicknessOrder *= -1;
}

Here is a working Plunker

Is that what you need ? Do you have any questions ?