Table : Set row id

[mathieu-fournier]

I would like to be able to set a custom id for my table rows.
Ex:

Current workaround:
Trick typescript by extanding the GetRowProps class manually.

[r100-stack]

You can use the getRowId prop to set the custom row ids.

<Table
  ...
  getRowId={(row) => row.productId}
/>

You can find all other Table props on our Table documentation page (WIP).

[mathieu-fournier]

The getRowId prop is not working.
I made a minimal codesandbox :
https://codesandbox.io/s/table-getrowid-notworking-hyr35w?file=/src/App.tsx

I added the getRowId props, but the row has no Id :

[r100-stack]

Actually, upon testing it myself, I noticed no type error when trying to do this. I made a codesandbox for this.

In the sandbox, on L95, we are modifying the internal row id using getRowId. Then on L83, we are setting the HTML id to the internal row id that we set using getRowId.

After discussing over DMs, looks like there was some confusion between getRowId that modifies the internal data ids and rowProps's id that sets the HTML div id. Our Table documentation page is WIP. We will document the difference between them when we work on that page. You can track our documentation progress in #961

[mathieu-fournier]

From a user perspective.
rowProps sets the html element properties.
I would also expect getRowId to set the html element id.

[mathieu-fournier]

@rohan-kadkol
Also, I did not found a way to add an id to expander button :

This makes writing tests less trivial.
I suggest that the expander button sets it's own id based on the row id.
Ex:
id="'custom row id'-expander-button"

[mayank99]

you could use aria-expanded that gets set on the row expander button

[mathieu-fournier]

aria-expanded is present on every rows, it does not help to select and click a specific expander button.
Currently, I must do document traversal to get a specific expander button, which is flaky by nature.
Example :

const myRow = $('#customRowId');
const myExpander = myRow.prev('.iui-table-row-expander');    // Jquery traversal to get a previous sibling.

[mayank99]

you can find the first instance of aria-expanded inside the row (since you already have the row id):

$(`#${rowId} [aria-expanded]`)

https://codesandbox.io/s/sparkling-water-683j53?file=/src/App.tsx

i don't think it makes sense to add ids to expander buttons by default, but we could theoretically support passing a custom id to the expander buttons if you have ideas on a comfortable API.

[mathieu-fournier]

I added a id to my cell, not the row. my bad.