Как вы стилизуете группирование строк, когда вы группируете строки в React-Data-Grid?

Question

Можно ли стилизовать строку группировки, которую вы видите на прикрепленном скриншоте? То, что я хотел бы сделать, это предоставить компонент React, который будет создан вместо этого.

Здесь - это коды и поле для прикрепленного снимка экрана.

На снимке экрана показано, что класс div, представляющий эту строку группировки, равен react-grid-row-group, и единственное место, которое появляется в кодовой базе React-Data-Grid, находится в 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;

Таким образом, похоже, что если этот компонент получит renderer prop, он будет использовать его для рендеринга строки группы в div с указанным выше именем класса.

Использование RowGroup.tsx в основном в Canvas.tsx, и Canvas создает экземпляр RowGroup с renderer prop, равным this.props.rowGroupRenderer. Холст оформлен в Viewport.tsx. Окно просмотра отображается в Grid.tsx, а сетка отображается в ReactDataGrid.

Answer 1

В документах для React-Data-Grid мы видим опору rowGroupRenderer, описанную как

rowGroupRenderer
Function called whenever keyboard key is pressed down

type: func

Однако, как описано в вопросе выше, глядя на код, мыможно видеть, что этот реквизит контролирует также, как выглядит строка, когда у вас есть группа.

Однако остается один вопрос: почему этот реквизит недоступен в определениях типов TypeScript для реквизитов ReactDataGrid