Table: Enable row selection event

[CristianDDias]

This issue is related to this UI5 Web Components React issue.

Is your feature request related to a problem? Please describe.
We are using the Table component but we need to select a table row, which is not possible. We tried to use the AnalyticalTable (UI5 Web Components React) component but it needs a rowHeight props, which is not possible in our case, because the row height can be different for each table row (dynamic height).

Describe the solution you'd like
An onClick callback function for the table row, which is fired when the user selects a table row. This callback function receives as a parameter the selected row.

Describe alternatives you've considered
Access the shadowRoot of the Table web component and add an onClick event listener for each tr element and expose this callback function.

Here is a Codesandbox example about what we would expect from the table (without the onclick feature).

[fifoosid]

Hi @CristianDDias

Thanks for the feature request!

I was wondering if you have tried to add event listener for the click event on the ui5-table-row. This way you can use the standard DOM event.

Please let me know if this solution works for you.

Best regards,
Filip

[fifoosid]

Here I have made a demo how you can use the DOM event(I think that codesandbox are having troubles right now and CS works on my side only in incognito tab): https://codesandbox.io/s/ui5-table-row-click-event-zm53o

It requires some additional checks to be done, so we will discuss your feature request internally and get back to you with a statement whether this needs to be implemented on our side.

[CristianDDias]

Hi @fifoosid

I've just tried the idea that you suggested and it worked! Here is the Codesandbox where I tried it.

But I couldn't change the background color of the selected row. In order to achieve this using the UI5 Web Components React, I think that I would need to access the shadow root of the ui5-table-row and change the background color of the tr element. But I think this is not a good idea.

[fifoosid]

Hi,

I must point out that what you are trying to achieve is something that is not fiori compliant.

But if you have to stick to that design you have a couple of options:

Go with the approach of accessing the shadow root(just like in the example), which indeed is not a good idea.

If you go with this approach my hint would be to change this selector
row.shadowRoot.firstElementChild
to something like this
row.shadowRoot.querySelector("tr")
because if we change the HTML structure of the ui5-table-row, the first one is more likely to fail

You can use our experimental method called addCustomCss.

In order to use it, you have to import it like this:

import { addCustomCSS } from '@ui5/webcomponents-base/dist/theming/CustomStyle.js';

And then use it:

addCustomCSS("ui5-table-row", `
// css you wish to add
`)

Here you have to make a selector that only matches the selected row(because otherwise it would be applied to all ui5-table-row's), which might be challenging, depending the way you are keeping track of it.

No matter which option you choose, you should have in mind:

• It might not work on IE11 as expected(It is not a concern, if you are not supporting it)
• If you have support for more than one theme in your app, you should add css for all your themes
  by yourself.(If you have only 1 team it should work as expected)

[CristianDDias]

Hi

Why isn't this fiori compliant?

I'll try this addCustomCSS.

By the moment, we won't support IE11 and we only have 1 theme.

[fifoosid]

Hi @CristianDDias ,

It's my bad actually, I checked the specs and everything looks fine. 😄
Please let us know if you have any further issues.

In the meantime, I will keep this issue open as a feature request for the click event.

Best regards,
Filip

[CristianDDias]

Thank you for the help @fifoosid!