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.

Ex:

const data = {
  name: "Greg Miller",
  age: 35,
  friend: {
      name: "Rose Franco",
      age: 32,
  },
  status: "None",
  subRows: [
      {
          name: "Rick DeAngelo",
          age: 25,
          friend: {
              name: "Susanne Franco",
              age: 37,
          },
          status: "None",
      },
  ],
};

const renderRowSubComponent = (row): ReactNode => {
                 if(row.subRows)
                {
                        return (<Button>Show More</Button>);
                 }
                return null;
}

<AnalyticalTable
data={tableData}
  isTreeTable
  renderRowSubComponent={renderRowSubComponent}
coloumn={<>
<TableColoumn >Name</TableColoumn >
<TableColoumn >Age</TableColoumn >
<TableColoumn >Friend Name</TableColoumn >
<TableColoumn >Status</TableColoumn >
</>}
/>

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.