Advice on how to make pagination inside row detail work independently of containing table

[billmcknight1953]

Current behavior

I have an ngx-datatable which has expandable row detail. Inside the row detail is another ngx-datatable. Both tables are using an ngx-datatable-footer with a datatable-pager (client-side paging on both). After any row is expanded, the containing outer table's pager begins to affect the row detail table's paging rather than its own paging.

Is there a proper way to configure each datatable-pager so that they work independently? i.e. so expanding a row does not cause the containing table's pager to directly impact the contained table's page offset?

See this stackblitz for illustration of behavior (Sorry about missing icons)

Please tell us about your environment:

• Table version: 17.0.0

• Angular version: 9.1.1

[billmcknight1953]

See also https://github.com/swimlane/ngx-datatable/issues/1696 which seems to find the exact opposite: The inner table pager controls the outer table paging whereas for me the containing table pager controls the inner table pages

[jessicadennis]

See also #1696 which seems to find the exact opposite: The inner table pager controls the outer table paging whereas for me the containing table pager controls the inner table pages

That's not actually the opposite problem — that person has a custom footer template (as do I), so it's probably more obvious what's happening — when you expand row-detail, if that row-detail contains another ngx-datatable, the inner table's footer replaces that of the outer table.

Without a custom footer template, this is less obvious, since the apparent active current page does not change — with a custom template it does, depending how your custom template is constructed. So clicking on what appears to be the outer footer is actually, effectively, clicking the inner table's footer.

I've forked your stackblitz to demonstrate.