数据表格 - 列分组

对列进行分组。

列分组允许您在标题中拥有多级列层次结构。

定义列分组

您可以使用 columnGroupingModel prop 定义列分组。此 prop 接收列分组的数组。

一个列分组至少由两个属性定义

• groupId：用于标识组的字符串
• children：包含组子项的数组

children 属性可以包含两种类型的对象

• 类型为 { field: string } 的叶节点，它将具有相应 field 的列添加到此组。
• 其他列分组，允许您拥有嵌套组。

<DataGrid
  columnGroupingModel={[
    {
      groupId: 'internal data',
      children: [{ field: 'id' }],
    },
    {
      groupId: 'character',
      children: [
        {
          groupId: 'naming',
          children: [{ field: 'lastName' }, { field: 'firstName' }],
        },
        { field: 'age' },
      ],
    },
  ]}
/>

自定义列分组

除了必需的 groupId 和 children 之外，您可以使用以下可选属性来自定义列分组

• headerName：显示为列名称的字符串（而不是 groupId）。
• description：工具提示的文本。
• headerClassName：用于样式自定义的 CSS 类。
• renderHeaderGroup：返回自定义 React 组件的函数。

组标题高度

默认情况下，列组标题的高度与列标题相同。这将是默认的 56 像素或使用 columnHeaderHeight prop 设置的自定义值。

columnGroupHeaderHeight prop 可用于独立于列标题调整列组标题的大小。

列重新排序

默认情况下，属于组的列不能拖动到其组外部。您可以通过在列组对象中设置 freeReordering: true 来自定义特定组的此行为。

在下面的示例中，Full name 列组可以被拆分，但其他列组不能。

可折叠列分组

下面的演示使用 renderHeaderGroup 添加一个按钮来折叠/展开列分组。

管理组可见性 🚧

列分组应允许在扩展/折叠视图之间切换，以隐藏/显示某些列。

列组排序 🚧

用户可以拖放组标题以一次移动所有组子项，就像他们已经可以对普通列执行的操作一样。

API

• DataGrid
• DataGridPro
• DataGridPremium