如何在DevExtreme React DataGrid中实现双层表头布局？

核心思路 #

DevExtreme DataGrid支持通过列分组嵌套实现双层表头，将需要包含子列的父列配置为组列（包含caption和columns属性），其余列保持常规配置即可。新增行功能可通过获取DataGrid实例调用addRow()方法实现。

完整示例代码 #

import React, { useRef } from 'react';
import { DataGrid, Column, ToolbarItem } from 'devextreme-react/data-grid';

const StorageGrid = () => {
  const gridRef = useRef(null);

  // 模拟数据源
  const [dataSource, setDataSource] = React.useState([
    {
      Shed: 'Shed A',
      LocationDescription: 'Zone 1, Left Side',
      StorageType: 'Dry Storage',
      Comment: 'Temperature controlled',
      AssignedBags: 50,
      Capacity: 100,
      MaxBags: 120,
      Lead: 2,
      BagsPerLayer: 10
    }
  ]);

  return (
    <DataGrid
      ref={gridRef}
      dataSource={dataSource}
      showBorders={true}
      editing={{
        mode: 'row',
        allowUpdating: true,
        allowDeleting: true,
        allowAdding: true
      }}
    >
      {/* 工具栏默认新增按钮 */}
      <ToolbarItem name="addRowButton" />

      {/* 第一层表头：Shed 组列，包含子列 LocationDescription */}
      <Column caption="Shed">
        <Column dataField="Shed" caption="Shed Name" />
        <Column dataField="LocationDescription" caption="Location Description" />
      </Column>

      {/* 第一层表头：StorageType 组列，包含子列 Comment */}
      <Column caption="StorageType">
        <Column dataField="StorageType" caption="Type" />
        <Column dataField="Comment" caption="Comment" />
      </Column>

      {/* 其余单层表头列 */}
      <Column dataField="AssignedBags" />
      <Column dataField="Capacity" />
      <Column dataField="MaxBags" />
      <Column dataField="Lead" />
      <Column dataField="BagsPerLayer" />
    </DataGrid>
  );
};

export default StorageGrid;

关键配置说明 #

1. 双层表头实现

   • 将Shed、StorageType设为组列：通过caption定义第一层表头文字，内部嵌套Column组件作为子列，子列的caption即为第二层表头内容。
   • 子列的dataField必须与数据源中的字段一一对应，确保数据正常渲染。

2. 新增行功能

   • 开启editing配置并设置allowAdding: true，DataGrid会自动在工具栏生成新增按钮。
   • 若需自定义新增按钮，可通过ToolbarItem嵌套自定义按钮，点击时调用gridRef.current.instance.addRow()触发新增（需确保ref已正确绑定DataGrid实例）。

常见问题排查 #

• 双层表头不显示：检查父列是否正确设置columns属性，子列必须嵌套在父列的<Column>标签内部。
• 数据渲染异常：确认子列的dataField与数据源字段名称完全一致，注意大小写敏感。

内容的提问来源于stack exchange，提问作者Sri12866