1

Using primereact expandable rowgroup https://primereact.org/datatable/#rowgroup_expandable works nice. But there is an evil effect when also using pagination.

The question is how to get rid of that?

Let there be 30 lines of data. let they be gouped into buckets of 3 rows each. Pagination setting shows 10 rows only.

Due to pagination there only shown 10 rows. This leads to:

page 1

'------------

row1-3 = group1

row4-6 = group2

row7-9 = group3

row10 = group 4 (rows 11 + 12 are shifted to the next page)

page 2

'---------

row1-2 = group 4

...

enter image description here

This is the table definition:

<DataTable value={this.state.data}
    rowGroupMode="subheader" groupRowsBy="internal_id"
    expandableRowGroups expandedRows={this.state.expandedRows} onRowToggle={(e) => this.setExpandedRows(e.data)}
    rowGroupHeaderTemplate={headerTemplate}
    reorderableColumns size="small"
    paginator
    paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
    rows={25} rowsPerPageOptions={[25, 50, 100]}
    header={this.headerTemplate}
    filters={this.state.filters}
    emptyMessage="No entry found."
>
    <Column field="id" header="#" align="right" alignHeader="center" sortable></Column>
    <Column field="last_name" header={this.t('last_name')} filter sortable></Column>
    <Column field="first_name" header={this.t('first_name')} filter sortable></Column>
    ...
</DataTable>
Kaspatoo
  • 1,223
  • 2
  • 11
  • 28

1 Answers1

0

You are correct the issue has been reported and a PR provided.

Issue Reported: https://github.com/primefaces/primereact/issues/2213

PR Provided: https://github.com/primefaces/primereact/pull/4192

Melloware
  • 10,435
  • 2
  • 32
  • 62
  • I just checked the links. Seems they are about some sub-sub-grouping? I do not see that the problem descriped there is about pagination. Pagination splits my data-array into separate buckets. Hard splitted by the amount of rows. After that rowgroups come into place and group the current page. Through pagination not all elements are available to the grouping of the first page. So on second page with a frehs pagination all remaining objects which were not availavle on page 1 are now grouped on page 2. – Kaspatoo Apr 03 '23 at 08:45
  • I could be wrong but it looks like it works fine for me. Can you edit my reproducer and show me how its not working? Try this: https://stackblitz.com/edit/react-wv1o6r?file=src%2FApp.js – Melloware Apr 03 '23 at 12:34
  • y, just change rows=10 to rows=9. because uhr first people Amy Elsner has 7 rows and your second guy Anna Fali has 3 rows (7+3=10). But with page set to 9 rows you will see Anna Fali will have 2 rows on first page and the third row on second page. Anna Fali is split up over two pages. – Kaspatoo Apr 04 '23 at 08:04
  • Yes I agree that is what is happening but that is expected behavior. That is the number of rows its not the "number of groups". – Melloware Apr 04 '23 at 11:28
  • y, but the question here is to find a way to handle it in any better way – Kaspatoo Apr 04 '23 at 20:29