数据表格 - 主明细
展开行以显示更多信息。
主明细功能允许展开行以在面板内显示更多信息。要使用此功能，请使用 `getDetailPanelContent` prop 传入要在面板内渲染的内容。任何有效的 React 元素都可以用作行明细，甚至可以是另一个表格。
默认情况下，明细面板的高度为 500px。可以通过将函数传递给 `getDetailPanelHeight` prop 来自定义它。此函数必须返回数字或 `"auto"` 字符串。如果它返回一个数字，则面板将使用该值（以像素为单位）作为高度。如果它返回 `"auto"`，则高度将从内容推导出来。
<DataGridPro
getDetailPanelContent={({ row }) => <div>Row ID: {row.id}</div>}
getDetailPanelHeight={({ row }) => 100} // Optional, default is 500px.
/>
// or
<DataGridPro
getDetailPanelContent={({ row }) => <div>Row ID: {row.id}</div>}
getDetailPanelHeight={({ row }) => 'auto'} // Height based on the content.
/>
要展开行，请单击 “+” 图标或在明细切换列中按 Space 键。返回 `null` 或 `undefined` 作为 `getDetailPanelContent` 的值将阻止展开相应的行。
从内容推导高度
像 动态行高 一样，您也可以从其内容推导出明细面板的高度。为此，将函数传递给 `getDetailPanelHeight` prop，返回 `"auto"`，如下所示
<DataGridPro getDetailPanelHeight={() => 'auto'} />
以下示例演示了此选项的实际应用
控制展开的明细面板
要控制哪些行展开，请将行 ID 列表传递给 `detailPanelExpandedRowIds` prop。将回调传递给 `onDetailPanelExpandedRowIds` prop 可用于检测行何时展开或折叠。
另一方面，如果您只想使用一些已展开的行初始化数据表格，请按如下方式使用 `initialState` prop
<DataGridPro initialState={{ detailPanel: { expandedRowIds: [1, 2, 3] } }}>
懒加载明细面板内容
您不需要预先提供明细面板的内容。相反，您可以在行展开时懒加载它。
在以下示例中，`DetailPanelContent` 组件在挂载时获取数据。此组件由 `getDetailPanelContent` prop 用于渲染明细面板内容。
自定义明细面板切换
要更改用于切换的图标，您可以为 图标插槽 提供不同的组件，如下所示
<DataGridPro
slots={{
detailPanelExpandIcon: CustomExpandIcon,
detailPanelCollapseIcon: CustomCollapseIcon,
}}
/>
如果这还不够，则可以覆盖整个切换组件。要完全自定义它，请将另一个列添加到您的列集中，其中 `field: GRID_DETAIL_PANEL_TOGGLE_FIELD`。表格将检测到已经定义了一个切换列，并且不会在默认位置添加另一个切换。新的切换组件可以通过 renderCell 提供，与任何其他列相同。仅设置 `field`，由您决定配置其余选项（例如禁用列菜单、筛选、排序）。要以已配置的一些建议选项开始，请在定义列时展开 `GRID_DETAIL_PANEL_TOGGLE_COL_DEF`。
<DataGridPro
columns={[
{
field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
renderCell: (params) => <CustomDetailPanelToggle {...params} />
},
]}
/>
// or
<DataGridPro
columns={[
{
...GRID_DETAIL_PANEL_TOGGLE_COL_DEF, // Already contains the right field
renderCell: (params) => <CustomDetailPanelToggle {...params}>
},
]}
/>
此方法也可用于更改切换列的位置，如下所示。
明细面板列的自定义标题
要为明细面板列渲染自定义标题，请在列定义中使用 renderHeader 属性。此属性接收一个 GridRenderHeaderParams 对象，其中包含 colDef（列定义）和 field。以下示例演示如何为明细面板列渲染自定义标题
const columns = [
{
...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
renderHeader: (params) => (
<div>
<span>{params.colDef.headerName}</span>
<button onClick={() => console.log('Custom action')}>Custom action</button>
</div>
),
},
//... other columns
];
禁用明细面板内容滚动
默认情况下，明细面板的宽度是所有列宽的总和。这意味着当存在水平滚动条时，滚动它也会滚动面板内容。为避免此行为，请将明细面板的大小设置为数据表格的外部大小。使用 `apiRef.current.getRootDimensions()` 获取最新的尺寸值。最后，为防止面板滚动，请设置 `position: sticky` 和 `left: 0`。
以下演示展示了如何实现这一点。请注意，切换列已固定，以确保在水平滚动数据表格时始终可见。