时间戳

首页 > 解决方案 > 在 React-Data-Grid 中对行进行分组时，如何设置分组行的样式？

reactjs - 在 React-Data-Grid 中对行进行分组时，如何设置分组行的样式？

问题描述

是否可以设置您可以在随附的屏幕截图中看到的分组行的样式？我想做的是提供一个 React 组件来代替它。

这是所附屏幕截图的代码框。

在此处输入图像描述

屏幕截图显示div表示该分组行的类是react-grid-row-group，并且它出现在React-Data-Grid代码库中的唯一位置是 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;

因此，似乎如果该组件接收到一个renderer道具，它将使用它来呈现div具有上述类名的组行。

的用法RowGroup.tsx基本上是 in Canvas.tsx，并且 CanvasRowGroup用rendererprop 来实例化this.props.rowGroupRenderer。画布以Viewport.tsx. Viewport 在 中渲染Grid.tsx，Grid 在 中渲染ReactDataGrid。

标签： reactjsreact-data-grid

解决方案

在 React-Data-Grid 的文档中，我们看到 proprowGroupRenderer描述为

rowGroupRenderer
Function called whenever keyboard key is pressed down

type: func

但是，如上面问题中所述，查看代码，我们可以看到这个道具还控制了当你有一个组时行的样子。

但是，仍然存在的一个问题是，为什么 TypeScript 类型定义中没有这个 props 的 props 可用ReactDataGrid？

推荐阅读