Unable to create a button such as "show more" at the end of the sub row list in analytical table(tree Table) to handle pagination

[roshnijalan97new]

Bug Description

A clear and concise description of what the bug is.
Unable to create a button such as "show more" in sub rows at the end of the list in the analytical table(tree Table) to handle pagination.

Expected Behavior

A clear and concise description of what you expect to happen.
There should be some feature to attach the reactNode component at the end of the sub row list.

Steps to Reproduce

1. Create an analytical table and set "isTreeTable" to true.
2. Try to handle the number of sub-rows using a button("show more") at the end of sub row list.

The sandbox template is: https://codesandbox.io/s/upbeat-lehmann-jdc83j?file=/src/App.js

Priority

• Low
• Medium
• [ X ] High
• Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

• Organization: {...}
• Business impact: {...}

[Lukas742]

Hi @roshnijalan97new

You are mixing up two different components here. The AnalyticalTable is developed in the ui5-webcomponents-react repo and the Table and TableColumn, in the ui5-webcomponents repo.
Also you have a typo in your columns prop (-> coloumn) and it only accepts an array of objects as value. (See docs)

Since I believe (please correct me if I'm wrong), that this issue is about the AnalyticalTable, I'm going to forward the issue to the ui5-webcomponents-react repo.

Please recheck your example. If the issue still occurs, and it's not connected to an already opened issues regarding the sub-components implementation, please create a reproducible example by leveraging this codeSandbox template.

[roshnijalan97new]

Code Sandbox template - https://codesandbox.io/s/upbeat-lehmann-jdc83j?file=/src/App.js

[Lukas742]

The button is displayed as expected for me. Could you elaborate on where you see a problem?

[roshnijalan97new]

I want this button to appear at the end of the subrow list @Lukas742

[roshnijalan97new]

Something LIke this:

[Lukas742]

For this you could either use a flag in your data structure (easiest and most efficient way), or calculate which row is the last one and persist it in a Set or similar.
https://codesandbox.io/s/floral-waterfall-fps4nj?file=/src/App.js

Since this is not a bug or a feature request, but a question about implementation details, I'm going to convert this issue into a discussion.

[roshnijalan97new]

The Button is coming inside the last row element, I don't want it like that, I want it to be in a separate row.

[roshnijalan97new]

How can I implement pagination here?
Suppose I want only one friend to be visible in the sub-row when I click on the parent component for the first time. Then there is a "show more items " button below that subcomponent in the separate row and on click of that button I will get the next subrow.

[roshnijalan97new]

I have drawn a rough diagram , I hope it is understandable

[Lukas742]

The Button is coming inside the last row element, I don't want it like that, I want it to be in a separate row.

This is unfortunately not supported.

How can I implement pagination here?
Suppose I want only one friend to be visible in the sub-row when I click on the parent component for the first time. Then there is a "show more items " button below that subcomponent in the separate row and on click of that button I will get the next subrow.

You cannot add or remove rows without updating the data array, so I don't see another way to achieve such (or similar) behavior than I provided earlier with the codeSandbox. All rows that are contained inside your data array will be rendered, either directly or when the parent row is expanded.