p-dataTable expand rows when page load

Question

<p-dataTable id="table" class="pc-datatable myTable" #dataTable [value]="dataList" [editable]="true" [rows]="10"
                [responsive]="true" [rowsPerPageOptions]="[5,10,20]" expandableRows="true" [paginator]="true" [pageLinks]="3" expandedIcon="ui-icon-expand-less"
                collapsedIcon="ui-icon-expand-more" rowIndexVar="index">
                <p-column expander="true" [style]="{'width':'0.5%'}"></p-column>
                <p-column field="" [style]="{'width':'15%'}">
                  <ng-template let-ele="rowData" pTemplate="body" let-i="rowIndex">
                    <ng-container>
                      <a style="color:#F5A623; cursor: pointer;" > Route{{i + 1}} ({{ele['name']}}) </a>
                    </ng-container>

                  </ng-template>
                </p-column>

                <ng-template let-rowData pTemplate="rowexpansion" style="width: 100%">
                  <app-view-component [pList]="rowData['pList']"></app-view-component>
                </ng-template>

              </p-dataTable>

Refer the attached image. Current view is like this

current view

Expect this kind of view expand all when load

expected view

score 2 · Answer 1 · answered Dec 18 '18 at 12:58

As per PrimeNg Documentation https://www.primefaces.org/primeng/#/table you can use expandedRowKeys property for default expanded rows.

All rows are collapsed initially and providing expandedRowKeys property whose value is the dataKeys of the rows to be expanded enables rendering these rows as expanded. A dataKey must be defined for this feature.

Here is a demo link: https://stackblitz.com/edit/primeng-turbo-table-u53rsg

p-dataTable expand rows when page load

1 Answers1