PrimeNg Turbotable Expand/Collapse All Rows at once.

3 min readMay 4, 2019

Today will see how to solve a very common question “How to expand and collapse all rows of a datatable on single click in PrimeNg ?”
Many times I have seen this question has been asked on stackoverflow and PrimeNg community. Answers are available there but let’s discuss more into this.

I am using PrimeNg v 6 or above and angular 6. And It will work perfectly with PrimeNg and angular version 7 as well.

Before getting started I hope you are familiar with PrimeNg and Angular6. PrimeNG is a rich set of open source native Angular UI components and having 80+ component.

So we will be creating below feature in our table:

. We will add an (+)icon inside table header
. Once you click on it, it will expand all the rows of table
. Once all rows expanded (-) icon will appear instead of (+)
. And when you click on (-) icon, all rows will collapse and (+)
  icon will be shown.
. Also if user expands all rows manually, then also (+) icon will be
  changed to (-) and vice-versa.

So lets starts working on creating table. I will use same HTML code given in PrimeNg to create our table.

Our table will looks like below (+) icon inside header:

Important Points:

dataKey : this is most important otherwise row expand will not work.
. It must be unique.
. It should be the part of your json data.
. It should not be in nested dataset
Example :

Right data :
{
 "id":"a1653d4d",
 "brand":"VW",
 "year":1998,
 "color":"White",
 "price":10000
}
Wrong Data 
{
 "brand":"VW",
 "year":1998,
 "color":"White",
 "price":10000,
 "detail":{"id":"a1653d4d", "modelId":"ZXXXY"}
}

So if you make id as dataKey then the right data will work because id is not inside any nested obj. But it will fail for wrong data set.

2. [expandedRowsKeys]: It is a table template property. We pass the data in this property using an Object “which we will call expandedRows” It takes value as an object of key value pair. Now you must be thinking what is key and value here.

So the key is your dataKey and value is 1. So if you expand one row you will see expandedRows object look like this : {“a1653d4d” : 1}

So that’s the trick :) If we add all they dataKeys as a key and value of all the dataKeys 1. Then all the rows will be expanded. That’s what we are doing when you click on (+) icon. Your expandedRows looks like below on all row expand

3. (onRowExpand) and (onRowCollapse) : These two methods are really helpful to toggle the (+)(-) icon when user expands or collapses all the rows manually.

That’s all about expand/collapse all rows.

GitHub Code : https://github.com/alokkarma/angular6-primeNg/tree/development/src/app/prime-table

BONUS : In github code I am handling row expansion in Paginated table and thats another tricky thing. So if you don’t want to see the pagination please remove below code from <p-table> HTML template :

[paginator]="true"[rows]="10" [totalRecords]="cars.length" pageLinkSize="3" (onPage)="onPage($event)"

In pagination, if you expanded rows at any page. Then on the next or previous page you will not see the expanded rows. You can change this logic based on your requirement.

Thanks for reading !!

PrimeNg Turbotable Expand/Collapse All Rows at once.

Written by Alok Vishwakarma