跳到主要內容
+

資料格 - 列高

自訂您的列的高度。

靜態列高

預設情況下，列的高度為 52 像素。這符合 Material Design 指南中的正常高度。

使用 rowHeight 屬性來變更此預設值，如下所示

按下 Enter 鍵開始編輯

可變列高

如果您需要某些列具有不同的列高，可以使用 getRowHeight 屬性來實現。此函式會針對每個可見的列呼叫，如果傳回值是 number，則該 number 將設定為該列的 rowHeight。如果傳回值為 null 或 undefined，則 rowHeight 屬性將對給定的列生效。

按下 Enter 鍵開始編輯
const getRowHeight = React.useCallback(() => { ... }, []);

<DataGridPro getRowHeight={getRowHeight} />

動態列高

您可以讓資料格根據每列的內容計算高度，而不是使用固定的列高。若要這樣做，請在傳遞給 getRowHeight 屬性的函式中傳回 "auto"。

<DataGrid getRowHeight={() => 'auto'} />

以下示範展示了此功能的使用方式

動態列高的實作是基於延遲方法，這表示列是在渲染時測量的。因此，您可能會看到滾動條滑塊的大小在滾動期間發生變化。發生此副作用的原因是在列未渲染時使用列高估計值，然後一旦獲得真實測量值，此值就會被替換。您可以透過將函式傳遞給 getEstimatedRowHeight 屬性來配置使用的估計值。如果未提供，則預設列高 52px 用作估計值。如果內容與預設值偏差太大，建議傳遞此屬性。

<DataGrid getRowHeight={() => 'auto'} getEstimatedRowHeight={() => 200} />

欄虛擬化

預設情況下，欄的虛擬化已停用，以強制同時渲染所有欄並正確計算列高。但是，當渲染大量欄時，這可能會導致效能不佳。

如果您需要欄虛擬化，可以將 virtualizeColumnsWithAutoRowHeight 屬性設定為 true。使用這種方法，資料格會根據可見的欄測量列高。但是，列高可能會在水平滾動期間發生變化。

按下 Enter 鍵開始編輯

列密度

讓您的使用者可以選擇變更預設列密度以符合他們的偏好 — 緊湊、標準或舒適。密度是根據 rowHeight 和/或 columnHeaderHeight 屬性（如果存在）計算的。有關詳細資訊，請參閱密度。

列間距

您可以使用 getRowSpacing 屬性來增加列之間的間距。此屬性會使用 GridRowSpacingParams 物件呼叫。

const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
  return {
    top: params.isFirstVisible ? 0 : 5,
    bottom: params.isLastVisible ? 0 : 5,
  };
}, []);

預設情況下，設定 getRowSpacing 將變更每列的 marginXXX CSS 屬性。若要改為新增邊框，請將 rowSpacingType 設定為 "border" 並自訂顏色和樣式。

<DataGrid
  getRowSpacing={...}
  rowSpacingType="border"
  sx={{ '& .MuiDataGrid-row': { borderTopColor: 'yellow', borderTopStyle: 'solid' } }}
/>

API