What does this PR do?

This PR makes it possible in DataTable to use rowProps to target group header rows. The 'key' for a group header is the value of the data member property specified by groupBy.

For example, in the code below the data is grouped by the data property location. One of the values of location is "Fort Collins". By including an member in the rowProps object with the key Fort Collins we specify row properties for the group header for the "Fort Collins" group.

Where should the reviewer start?

GroupedBody.js

What testing has been done on this PR?

Manual and Storybook

How should this be manually tested?

I tested this by adding rowProps to the DataTable/Grouped storybook example:

import React from 'react';

import { Box, DataTable } from 'grommet';

// Source code for the data can be found here
// https://github.com/grommet/grommet/blob/master/src/js/components/DataTable/stories/data.js
import { groupColumns, DATA } from './data';

const rowProps = {
  'Fort Collins': { background: 'yellow' },
};

export const GroupedDataTable = () => (
  // Uncomment <Grommet> lines when using outside of storybook
  // <Grommet theme={grommet}>
  <Box align="center" pad="large">
    <DataTable
      columns={groupColumns}
      rowProps={rowProps}
      data={DATA}
      groupBy="location"
      sortable
    />
  </Box>
  // </Grommet>
);

GroupedDataTable.storyName = 'Grouped';

export default {
  title: 'Visualizations/DataTable/Grouped',
};

Do Jest tests follow these best practices?

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

Any background context you want to provide?

What are the relevant issues?

Fixes #6625

Screenshots (if appropriate)

Do the grommet docs need to be updated?

No

Should this PR be mentioned in the release notes?

Yes

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

backwards compatible