如何为MUI X Data Grid行添加额外组件？

一、是否有无需修改核心组件的API？ #

有，MUI X Data Grid提供了**自定义单元格渲染器（cellRenderer）和行高动态配置（getRowHeight）**这两个原生API，无需修改核心组件就能实现需求。

二、具体实现步骤 #

1. 动态设置目标行高

要在原有行内容下方添加额外文本，需给目标行（比如ID为5的行）设置更高的行高，避免内容被截断：

const getRowHeight = (params) => {
  // 给ID为5的行设置更高高度，其余行用默认高度
  return params.id === 5 ? 80 : 52;
};

2. 编写自定义单元格渲染器

针对需要显示额外内容的列（比如First name列），自定义渲染逻辑，在原内容下方插入额外文本：

const CustomFirstNameRenderer = (params) => {
  if (params.id === 5) {
    return (
      <div style={{ padding: '8px 0' }}>
        <div>{params.value}</div>
        {/* 额外添加的文本，可自定义样式 */}
        <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
          这里是额外添加的内容
        </div>
      </div>
    );
  }
  // 非目标行直接返回原内容
  return params.value;
};

3. 在DataGrid中配置属性

将自定义渲染器和行高配置传入DataGrid组件：

<DataGrid
  rows={rows}
  columns={[
    {
      field: 'firstName',
      headerName: 'First name',
      width: 150,
      cellRenderer: CustomFirstNameRenderer // 应用自定义渲染器
    },
    // 其他列配置...
  ]}
  getRowHeight={getRowHeight}
  // 其他必要属性
/>

补充：整行扩展的实现方式（可选） #

如果需要在整行下方添加内容而非单个单元格，可以使用rowRenderer属性自定义整行结构：

const CustomRowRenderer = (params) => {
  const defaultRow = params.getDefaultRowRenderer();
  if (params.id === 5) {
    return (
      <div>
        {defaultRow}
        <div style={{ padding: '0 16px', fontSize: '12px', color: '#666', borderTop: '1px solid #eee' }}>
          整行下方的额外内容
        </div>
      </div>
    );
  }
  return defaultRow;
};

// 在DataGrid中配置
<DataGrid
  rowRenderer={CustomRowRenderer}
  getRowHeight={(params) => params.id === 5 ? 100 : 52}
  // 其他属性...
/>

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