SAP / fundamental-ngx

Fundamental Library for Angular is SAP Design System Angular component library
https://sap.github.io/fundamental-ngx
Apache License 2.0
263 stars 126 forks source link

[Sourcing][P1] Can we have cells clickable in fdp-table #11639

Closed sahanaN123 closed 5 months ago

sahanaN123 commented 5 months ago

Is this a bug, enhancement, or feature request? Enhancement request

Describe your proposal.

Currently in fdp-table we have row clickable. But our business use case we need each cell in the row to be clickable.

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 15 NGX 0.43.29

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

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

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

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

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.

droshev commented 5 months ago

@sahanaN123 There is nothing written in the ticket. Can you try to answer the questions and give us more context?

sahanaN123 commented 5 months ago

@droshev : Currently in fdp-table we have entire to be row clickable. But for our business use case we need each cell in the row to be clickable. Attaching the recording from our existing UX . So we are expecting the same with NGX platform table as well. what do we expect from NGX?? we would like to have an event triggered when cell is clicked. so we will have our own logic further at application end. Also the focus should be moved to clicked cell.

droshev commented 5 months ago

@sahanaN123 you need to remove the internal solutions from external tickets.

sahanaN123 commented 5 months ago

sure @droshev removed. But i had discussion with @mikerodonnell89 and shared the recording with him. So i hope he is clear on this issue.

droshev commented 5 months ago

@mikerodonnell89 @sahanaN123 - from the recording that i saw i think platform table doesn't look the best component for this feature. Maybe @sahanaN123 can go with a custom component?

mikerodonnell89 commented 5 months ago

@sahanaN123 the recording you shared with me was relating to your other issue, #11638. For this issue we need more details about what needs to be passed with this event you'd like to have

droshev commented 5 months ago

@sahanaN123 Can you create a stackblitz example with your usecase and explain why you need to use the platform table

sahanaN123 commented 5 months ago

@droshev : We are using fdp-table along with advance techniques to render complex tree table. So this component is the best option to render our data.

@mikerodonnell89 : We need an event to be triggered when user click on cell. So that we perform further actions at our end. Also the focus should be moved to that cell. Please consider that we have internally adding a input field for user to enter a value. So when they click on input field, that should not be consider as the cell click.

sahanaN123 commented 5 months ago

@sahanaN123 the recording you shared with me was relating to your other issue, #11638. For this issue we need more details about what needs to be passed with this event you'd like to have

I have shared the recording with you on teams. Please do check.

mikerodonnell89 commented 5 months ago

@sahanaN123 the recording you shared with me was relating to your other issue, #11638. For this issue we need more details about what needs to be passed with this event you'd like to have

I have shared the recording with you on teams. Please do check.

I just checked and the video you sent me is about the tree table row expansion issue you filed.

mikerodonnell89 commented 5 months ago

@mikerodonnell89 : Also the focus should be moved to that cell.

Platform table cells are focused when they are clicked already

https://github.com/SAP/fundamental-ngx/assets/2471874/64b662e1-3ba2-4ad9-ae5d-c274af5427ff

mikerodonnell89 commented 5 months ago

@mikerodonnell89 : We need an event to be triggered when user click on cell. So that we perform further actions at our end.

The table fires an event cellFocused you may find useful

Screenshot 2024-04-03 at 10 05 19 AM

You have explained that you'd like an event for a cell being clicked (and this should meet that criteria, but additionally this event is also fired when the user navigates to a cell using the keyboard). However you haven't explained what (if any) parameters you'd like to see passed through the event

cellFocused event looks like this in practice:

<fdp-table (cellFocused)="handleCellFocused($event)">

    handleCellFocused(event: any): void {
        console.log(event);
    }
sahanaN123 commented 5 months ago

Sure @mikerodonnell89 . Let me try this and get back to you. Thanks

droshev commented 5 months ago

@sahanaN123 I think there isn't any issue to be solved here so i will close the issue. You can explore our documentation and you don't have to stop here. You can even check out the typescript source in the repository

sahanaN123 commented 4 months ago

@mikerodonnell89 / @droshev : We tested the suggested solution. but its meeting our expectation where in each cells are not clickable which deviates from our current UX. So we would ask to re-open the issue and provide us the solution where each cell be clickable and emit the event with cell details in the emitted event. I hope the concern is understood.

mikerodonnell89 commented 4 months ago

@mikerodonnell89 / @droshev : We tested the suggested solution. but its meeting our expectation where in each cells are not clickable which deviates from our current UX. So we would ask to re-open the issue and provide us the solution where each cell be clickable and emit the event with cell details in the emitted event. I hope the concern is understood.

Cells are "clickable" - as made evident in some videos above. As for the event, what do you mean regarding "cell details"? The element itself? fd-table-cell component? Some object representing the data within a cell? Are you able to utilize the cellFocused event to get the cell you're looking for? You could also add event listeners to the cells after they're rendered: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

sahanaN123 commented 4 months ago

Are you saying that now cells are clickable in fdp-table?? Also yes, we would expect the object representing the cell data.