canonical / react-components

A set of components based on Vanilla Framework
https://canonical.github.io/react-components
93 stars 51 forks source link

[ModularTable] Add unique row identifiers #444

Open hatched opened 3 years ago

hatched commented 3 years ago

III  Action logs - Default view

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 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...

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

bartaz commented 3 years ago

TBH personally I prefer the getRowProps approach, seems more in line with what useTable tries to do. I think that data should contain just the data for the table, not config for the ModularTable component.

Defining a getRowProps function that returns set of custom props based on row data seems in line with how other useTable features are implemented.