gregnb / gregnb/mui-datatables
Impossible to customise data-testid
- Dominant language
- JavaScript
- Stars
- 2.7k
- Forks
- 906
- PR merge metrics
- No merged PRs in 30d
Description
## Expected Behavior
I'd expect to be able to choose my `data-testid` labels for unit testing, instead of having MUI-datable, a 3rd party library, to define them for me.
Even if I try to define it manually using the `setRowProps()` option, it gets overwritten by the current default implementation.
A current hack would be to provide a custom row component, which clearly is overkill for a testing label.
## Current Behavior
`data-testid` is currently forced to `'MUIDataTableBodyRow-' + dataIndex` ([see current implementation](https://github.com/gregnb/mui-datatables/blob/7d3a19062b6eb441bf2a6d4a2bb2f6f6879db592/src/components/TableBody.js#L269))
Feature was added in [PR 667](https://github.com/gregnb/mui-datatables/pull/667) after being first reported in issue [#618](https://github.com/gregnb/mui-datatables/issues/618)
## Your Environment
| Tech | Version |
|--------------|---------|
| Material-UI | 5.2.2 |
| MUI-datatables | 4.0 |

```javascript
function foo(data) {
const columns = [...];
const options = {
/**
* This is ignored and replaced by current
* default implementation
*/
setRowProps: () => ({ "data-testid": "CUSTOM-TEST-ID" }),
};
return (
);
}
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in src/components/TableBody.js around the implementation linked near line 269, and trace how setRowProps is applied to each row. Confirm the completed behavior by rendering a table with a custom data-testid and verifying that the caller-provided label is preserved instead of the default.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100