Text getting populated in empty rows in tree table

[lakshaysap]

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

if I try to use fdp-table-cell in fdp column in fundamental platform ngx tree table the rows are which are empty are also getting populated with text when i click collapse button

Can you handle that on the application side

NO

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

Angular version 17.2.1 and Fundamental Library 0.48.4

If this is a bug, please provide steps for reproducing it; the exact components you are using;

COMPONENT USED- Fundamentalngx/platfrom - Table.

1. In tree table code just place fdp-table-cell inside fdp-column

Please provide relevant source code (if applicable).

<fdp-table
[dataSource]="source"
[isTreeTable]="true"
selectionMode="multiple"
[enableTristateMode]="true"
relationKey="children"
selectedKey="selected"
emptyTableMessage="No data found"
[dropPredicate]="dropPredicate"
(rowSelectionChange)="onRowSelectionChange($event)"
(rowToggleOpenState)="onRowToggleOpenState($event)"
(rowsRearrange)="onRowsRearrange($event)"

{{ data.name }} {{ data.name }}

Please provide stackblitz example(s).

https://stackblitz.com/edit/szf3ep?file=src%2Fapp%2Fplatform-table-tree-example.component.html
https://szf3ep-2ags--4200--0314a412.local-credentialless.webcontainer.io/

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Not applicable

Did you check the documentation and the API?

Yes

Did you search for similar issues?

Yes

Is there anything else we should know?

NO
IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.

[mikerodonnell89]

Sorry but I don't understand the issue here. There are no "empty rows" in your data source. If you are referring to text being populated in the cells (not rows) - why are you putting {{ data.name }} in every cell?

[lakshaysap]

There are 2 scenarios that are happening.

1. The first Code below is the one which was already written by my team you can see the video for better understanding.
   https://github.com/SAP/fundamental-ngx/assets/142865933/797fa36f-f1b6-4919-a5e3-0af194996894

{{ 'PACKAGE.actions.TEXT' | translate }} ({{ totalActions }})

{{ data.name }}

2. I tried to fix this issue by removing the fdp table cell. But you can see the video it affects the responsiveness.
   https://github.com/SAP/fundamental-ngx/assets/142865933/75722fe8-9a2a-44d6-b634-854a61414e27

{{ 'PACKAGE.actions.TEXT' | translate }} ({{ totalActions }})

			<fdp-column name="description" key="description" label="Description"> </fdp-column>
		</fdp-table>
	</fd-card-content>
</fd-card>

AFTER TRYING THESE APPROACHES I THINK THERE IS SOME ISSUE WITH FDP-TABLE-CELL. Please look into it.

[mikerodonnell89]

I think I see the problem you're describing in your first video (the text "Use this endpoint to delete a customer's..." being populated in the "Description" column of the "Action" row), and I am concerned with how that is happening but I don't see how the stackblitz you've provided is relevant. With this code:

  <fdp-column name="description" key="description" label="Description">
    <fdp-table-cell *fdpCellDef="let data">
      {{ data.name }}
    </fdp-table-cell>
  </fdp-column>

You are taking every row in the description column and deliberately placing data.name inside of every cell. So I don't think the stackblitz is pertinent to the problem in the video. If I adjust your stackblitz to have the contents of the description cell be data.description which I think is what you want, I'm not able to recreate the problem from your video. See below:

Screen.Recording.2024-05-28.at.5.56.01.PM.mov

I would like to get to the bottom of this, so if you could update your stackblitz to more accurately demonstrate the problem you're seeing in your application, that would be great