canonical / canonical/react-components

[ModularTable] Add unique row identifiers

Open
#444 1 comment 0 reactions 0 assignees View on GitHub
P3 Needs decision
Dominant language
TypeScript
Stars
151
Forks
74
Avg merge
1d 2h
Merged PRs (30d)
11

Description

![III Action logs - Default view](https://user-images.githubusercontent.com/532033/115276747-abd70700-a100-11eb-941b-d0ecf8a707ab.png)

After implementing the above it would be easier to test if we could select rows based on some criteria, a `data-test` prop so that we can isolate the 'parent' of grouped rows. It appears that to add such a feature we have to extend the `getRowProps` function.

Using a data driven approach as discussed in the [previous issue](https://github.com/canonical-web-and-design/react-components/issues/440) we could add a prop to the row data that we would inspect to generate this value. There is already precedent for this with the `useExpand` plugin and `subRows.

A data object might look like...
```javascript
const data = {
application: "glance",
operationID: "17 / openstack-upgrade",
rowProps: {
"data-test": "parent-row-glance",
},
};
```

Another approach would be to allow a custom `getRowProps` function to be passed in as in the following examples. This allows for more flexibility but increases the API flexibility which we've previously discussed is undesirable at this time.

ex) https://github.com/tannerlinsley/react-table/blob/master/examples/data-driven-classes-and-styles/src/App.js
ex) https://jbetancur.github.io/react-data-table-component/?path=/story/conditional-styling--conditional-rows

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.