資料格 - 主從式明細
展開您的列以顯示額外資訊。
主從式明細功能允許展開列，以在面板內顯示額外資訊。若要使用此功能，請將函數傳遞至 getDetailPanelContent prop，並帶有要在面板內呈現的內容。任何有效的 React 元素都可以用作列明細，甚至是另一個格線。
預設情況下，明細面板高度為 500 像素。您可以透過將函數傳遞至 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.
/>
若要展開列，請點擊 + 圖示或在明細切換欄內按下 空白鍵。將 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。
以下示範顯示如何達成此目的。請注意，切換欄已釘選，以確保在水平滾動資料格時始終可見。