What does this PR do?

This PR fixes an issue from Kari where DataTables rowDetails expansion was tied to a table index. Being based on index wasn't working very well with filter/sort or pagination.

These changes also introduce the ability to use the details row expansion in a "controlled" mode. For example:

const [expand, setExpand] = useState([]);
...
<DataTable rowDetails={{
  render: (datum) => <SomeComponent data={datum} />,
  expand,
  onExpand: (expanded, datum) => setExpand(expanded),
}} />

This pattern more closely follows how we do selections as well as grouped row expansions.

I re-wrote the rowDetails story to better show a rowDetails example using the StarWars api. It has more interesting details worth showing in a detail row.

Where should the reviewer start?

DataTable/Body.js

What testing has been done on this PR?

storybook and manual

How should this be manually tested?

Storybook Visualizations/DataTable/rowDetails

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• asFragment() is used for snapshot testing.

Any background context you want to provide?

From Kari's request:

We've been implementing a feature using the rowDetails prop on DataTable. There are some oddities about how it works, so I'd like to suggest a few enhancements:

• Which rows are expanded is tracked via their index instead of by the primary key. This means if you expand the fifth row and then resort, the fifth row is still expanded even if it has completely different data. If you tracked expanded rows using primary key, then this would lead to more natural result of the same data being expanded even if it is in a new location in the table
• Similarly, the indexes expanded is the same when you go to a new page of data in a paginated table. So if you had the 2nd row expanded and then go to the next page, the 2nd row of the new page is expanded. This doesn't seem obvious.
• It would also be nice to support get/set props like for select to track and control which rows are expanded.... Similar to select and onSelect props. And/or allow controlling this via Data context props.

What are the relevant issues?

Screenshots (if appropriate)

Do the grommet docs need to be updated?

Yes

Should this PR be mentioned in the release notes?

Yes

Is this change backwards compatible or is it a breaking change?

This change should be backwards compatible since we didn't expose the expansion keys before now. It will also use the index as a key if for some reason it can't find a primary key