How do you style the grouping rows when you group rows in React-Data-Grid?

Question

Is it possible to style the grouping row that you can see in the attached screenshot? What I would like to do is provide a React component that is rendered in place of that.

Here is the codesandbox for the attached screenshot.

The screenshot shows that the class of the div that represents that grouping row is react-grid-row-group, and the only place this appears in the React-Data-Grid codebase is in RowGroup.tsx.

const RowGroup = forwardRef<HTMLDivElement, Props>(function RowGroup(props, ref) {
  function onRowExpandToggle(expand?: boolean) {
    const { onRowExpandToggle } = props.cellMetaData;
    if (onRowExpandToggle) {
      const shouldExpand = expand == null ? !props.isExpanded : expand;
      onRowExpandToggle({ rowIdx: props.idx, shouldExpand, columnGroupName: props.columnGroupName, name: props.name });
    }
  }

  function onRowExpandClick() {
    onRowExpandToggle(!props.isExpanded);
  }

  function onClick() {
    props.eventBus.dispatch(EventTypes.SELECT_CELL, { rowIdx: props.idx, idx: 0 });
  }

  const lastColumn = props.columns[props.columns.length - 1];
  const style = { width: lastColumn!.left + lastColumn!.width };
  const Renderer = props.renderer || DefaultBase;

  return (
    <div className="react-grid-row-group" style={style} onClick={onClick}>
      <Renderer {...props} ref={ref} onRowExpandClick={onRowExpandClick} onRowExpandToggle={onRowExpandToggle} />
    </div>
  );
});

export default RowGroup;

So it seems that if that component receives a renderer prop, it will use it to render the group row under the div with aforementioned class name.

Usages of RowGroup.tsx are basically in Canvas.tsx, and Canvas instantiates RowGroup with the renderer prop being this.props.rowGroupRenderer. Canvas is rendered in Viewport.tsx. Viewport is rendered in Grid.tsx, and Grid is rendered in ReactDataGrid.

evianpring · Answer 1 · 2019-07-09T17:25:54.580

In the docs for React-Data-Grid we see the prop rowGroupRenderer described as

rowGroupRenderer
Function called whenever keyboard key is pressed down

type: func

However as described in the question above, looking at the code, we can see that this prop controls also what the row looks like when you have a group.

However, one question that remains is why this prop is not available in the TypeScript type definitions for the props of ReactDataGrid?

How do you style the grouping rows when you group rows in React-Data-Grid?

1 Answers1