[Datagrid]: using useNestedRows and DatagridPagination results in rows broken up into different pages

[gkang999]

Package

Carbon for IBM Products

Description

When trying to expand a parent row with nested children rows, the nested rows are rendered on the next page(s) if the total row count (parent + nested children) is greater than the current page's item count limit. This could break up nested rows across multiple pages depending on how many nested rows there are. I would expect the nested rows to be rendered on the same page as the parent row.

Component(s) impacted

Datagrid

Screenshots of issue:

For reference (how it should look):

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

1.72.1

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Product/offering

Global Cloud UI

CodeSandbox or Stackblitz example

https://codesandbox.io/p/devbox/ancient-thunder-rmyxjg

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[elycheea]

@gkang999 shared this via the Slack support channel. Tagging it as an enhancement currently but also unsure if this is a limitation of react-table v7. Think we can use this issue to track and investigate whether we’re able to address this or if it’ll require update to react-table v8 (which would put this in the Icebox). 😓

[elycheea]

@gkang999 The original design guidance recommends against using items per page with nested rows. https://pages.github.ibm.com/cdai-design/pal/components/data-table/nested-rows/usage#behaviors

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. Remove the stale label or add a comment, otherwise this issue will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has received no activity for 14 days.