如何在PrimeNG中使用RowGroup交换组位置？

Question

I'm trying to swap groups but not having any luck. Basically I have to group them in this order:

ROOM3
 - Yoga, Martha   busy-3
 - Bacon, Anna    busy-3
   .........
   ...............
ROOM1
 - Brady, Marsha     busy
 - McDonald, Jane    busy
 ...............
 ....................
ROOM2 
 - Steve, Ana      busy-2
 - tester          busy-2
 .........
 ...............

In simple words I want to keep the order of the grouping like this:

ROOM3 --> ROOM1 --> ROOM2

Here's my working code:

PLUNKER

Answer 1

There might be a better solution but if you add a roomOrderId to each row of your data object, then you can sort by this field :

sortField="roomOrderId"

Edit You can manually add roomOrderId to each row :

    this.data.forEach(function(row) {
      if(row.room==="ROOM1") {
        row.roomOrderId = 2;
      } else if(row.room==="ROOM2") {
        row.roomOrderId = 3;
      } else if(row.room==="ROOM3") {
        row.roomOrderId = 1;
      }
    });

See my Plunker

Answer 2

i added extra pos field in data object:

data = [
    { box: '',  name: 'Brady, Marsha', status: 'busy', room: 'ROOM1' ,pos:2},
    { box: '1', name: 'Davis, Kevin', status: 'busy-1' , room: 'ROOM1',pos:2},
    { box: '1', name: 'Carter, Dawn',  status: 'busy-1' , room: 'ROOM1',pos:2},
    { box: '',  name: 'McDonald, Jane',status: 'busy', room: 'ROOM1',pos:2 },
    { box: 'MA',name: 'Bacon, Anna', status: 'wbusy-3', room: 'ROOM3',pos:1 },
    { box: 'MA',name: 'Yoga, Martha', status: 'busy-3', room: 'ROOM3' ,pos:1},
    { box: '1', name: 'Steve, Ana', status: 'busy-2', room: 'ROOM2',pos:3},
    { box: '2', name: 'tester', status: '', room: 'ROOM2',pos:3},
    { box: '3', name: 'Jhonson, Francisco', status: 'busy-2' , room: 'ROOM2',pos:3},
    { box: '4', name: 'Mathews, Susan', status: 'busy-2' , room: 'ROOM2',pos:3},
    { box: '5', name: 'Davis, Christine', status: 'busy-2' , room: 'ROOM2',pos:3},
    { box: '6', name: 'Wheaters, Bob', status: 'busy-2' , room: 'ROOM2',pos:3},
    { box: '7', name: 'Kinsky, Annabelle' , status: 'busy-2' , room: 'ROOM2',pos:3},
    { box: '8', name: '', status: '', room: 'ROOM2',pos:3},
    { box: '9', name: 'Stephanapolous', status: 'busy-2' , room: 'ROOM2',pos:3},
    { box: '10',name: 'Kelley, Tom', status: 'busy-2' , room: 'ROOM2',pos:3},
    { box: 'T', name: 'Peterson, James', status: 'busy-2' , room: 'ROOM2',pos:3}
]

and in html :

<p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" expandableRowGroups="true"
        [sortableRowGroup]="false" sortField="pos" sortOrder="1">
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template>
    <p-column field="status" header="ID"></p-column>
    <p-column field="name" header="Title"></p-column>

</p-dataTable>

which will sort in your given order.