行分组时有没有办法关闭嵌套行数？答案

【问题标题】：Is there a way to turn off number of nested rows when row grouping?行分组时有没有办法关闭嵌套行数？
【发布时间】：2021-10-19 16:02:27
【问题描述】：

使用 AG Grid 的行分组功能时，组列在括号中显示一个数字，表示该组内嵌套的行数。

In this example of row grouping, 数据按不同国家分组，相关数字显示在国家名称之后。例如。美国之后的数字 1109。有什么办法可以关闭或隐藏这些数字？

【问题讨论】：

为什么要隐藏这些事件？他们很有帮助。

标签： javascript reactjs ag-grid

【解决方案1】：

您只需要使用以下属性配置您的<AgGridReact> 组件。如果没有将groupUseEntireRow 属性设置为true，suppressCount 将被忽略。

<AgGridReact
  groupRowRendererParams={{ suppressCount: true }}
  groupUseEntireRow
>

或者您可以将groupRowInnerRenderer 绑定到frameworkComponents 属性以用于自定义渲染器。

<AgGridReact
  frameworkComponents={{ groupRowInnerRenderer: GroupRowInnerRenderer }}
  groupRowRendererParams={{
    innerRenderer: 'groupRowInnerRenderer',
    suppressCount: true,
  }}
  groupUseEntireRow
>

这是Full Width Groups Rendering 渲染器的精简版。

import React, { useEffect, useState } from 'react';

const GroupRowInnerRenderer = (props) => {
  const { api, node: { key } } = props;
  const [groupKey, setGroupKey] = useState(key);

  const onDataChanged = () => {
    const { node: key } = props;
    setGroupKey(key);
  };

  useEffect(() => {
    api.addEventListener('cellValueChanged', onDataChanged);
    api.addEventListener('filterChanged', onDataChanged);

    return () => {
      api.removeEventListener('cellValueChanged', onDataChanged);
      api.removeEventListener('filterChanged', onDataChanged);
    };
  }, [api]);

  
  return (
    <div className="groupTitle">
      {groupKey}
    </div>
  );
};

export default GroupRowInnerRenderer;

【讨论】：