Table Row Reordering - Can't get it to work

UI Components for Angular
Post Reply
aaronb
Posts: 5
Joined: 08 May 2021, 20:23

19 Sep 2022, 00:28

I have the latest primeng installed 14.1.1. I am trying to implement the table row reordering feature. I followed the simple example in the docs, but I am unable to drop the element in the new position. The mouse cursor changes to the block cursor. I have stared at it and can't see what I am doing wrong. I am staring at this code and can't figure it out. Would someone take a look at it to see what my mistake could be?

HTML Template Code:

Code: Select all

   <p-table [value]="testNodes" [columns]="testCols">
          <ng-template pTemplate="header" let-columns>
            <tr>
              <th style="width:2em"></th>
              <th *ngFor="let col of columns">
                {{col}}
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-index="rowIndex" let-columns="columns">
            <tr [pReorderableRow]="index">
              <td>
                <i class="pi pi-bars" pReorderableRowHandle></i>
              </td>
              <td>
                {{rowData['label']}}:{{index}}
              </td>
            </tr>
          </ng-template>
    </p-table>
javascript code

Code: Select all

export class AppRightpanelComponent{
     ...
    testCols: Array<any> = [
      'label',
    ];
    testNodes: Array<any> = [
      { label: 'R1' },
      { label: 'R2' },
      { label: 'R3' },
      { label: 'R4' },
    ];

    constructor(public appMain: AppMainComponent, public renderer: RendererService) {
        ....
    }

    onRowReorder(event: any): void {
      console.log('reorder');
    }
}

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests