0

I've been doing some research and can't find what I'm looking for. Basically, I want to group my data in ONLY 3 groups from top to bottom starting from ROOM3 -> ROOM2 -> ROOM1 and I would also like to add 2 buttons to expand and collapse groups.

Example: 

ROOM3
 - Brady, Marsha   busy
 - Davis, Kevin    Ready-1
 .........
 ...............
ROOM1 
 - Steve, Ana      with MA
 - tester
 .........
 ...............
ROOM2
 - Bacon, Anna     with MA
 - Yoga, Martha    with MA
 ...............
 ....................

Here's my working code: PLUNKER.

halfer
  • 19,824
  • 17
  • 99
  • 186
Devmix
  • 1,599
  • 5
  • 36
  • 73

1 Answers1

1

It's a matter of changing sorting in your example from:

sortField="name"

to:

sortField="room"

Here is a working plunk.

Uğur Dinç
  • 2,415
  • 1
  • 18
  • 25
  • that worked! do you know how to change the order of the groups? Example: I want to order of the groups from top to bottom to be like this: ROOM3 ROOM1 and ROOM2 – Devmix Jan 09 '18 at 04:04
  • @progx That's not "ordered". That's random. You can write custom sorting in your component, for instance in ngOnInit(); otherwise, even if you make groups sortable, they will only sort in 3 > 2 > 1 or 1 > 2 > 3 and not 3 > 1 > 2. – Uğur Dinç Jan 09 '18 at 04:19
  • Oh I see, another quick question. Is there a way to add 2 buttons to expand and collapse all groups? if yes, can you please provide a quick help on that? Thanks a lot! – Devmix Jan 09 '18 at 04:21
  • @progx Check this > https://stackoverflow.com/questions/42838838/how-to-expand-row-from-datatable-programmatically – Uğur Dinç Jan 09 '18 at 04:25
  • @progx Feel free to create a new question :) – Uğur Dinç Jan 09 '18 at 04:29