資料格線 - 版面配置

資料格線提供多種版面配置模式。

彈性父容器

資料格線可以放置在 flex-direction: column 的彈性容器內。在不設定最小和最大高度的情況下，資料格線會佔用顯示所有列所需的空間。

<Stack direction="row" spacing={1} sx={{ mb: 1 }}>
  <Button size="small" onClick={removeRow}>
    Remove a row
  </Button>
  <Button size="small" onClick={addRow}>
    Add a row
  </Button>
</Stack>
<div style={{ display: 'flex', flexDirection: 'column' }}>
  <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
</div>

<Stack direction="row" spacing={1} sx={{ mb: 1 }}>
  <Button size="small" onClick={removeRow}>
    Remove a row
  </Button>
  <Button size="small" onClick={addRow}>
    Add a row
  </Button>
</Stack>
<div style={{ display: 'flex', flexDirection: 'column' }}>
  <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
</div>

按下 Enter 鍵開始編輯

最小和最大高度

在下面的示範中，資料格線放置在最小高度為 200px 和最大高度為 400px 的彈性容器內，並在列數變更時調整其高度。

百分比尺寸

當使用百分比 (%) 作為高度或寬度時，請確保資料格線的父容器具有固有尺寸。瀏覽器會根據其父容器尺寸的百分比調整元素。如果父容器沒有尺寸，則百分比將為零。

預定義尺寸

您可以為資料格線的父容器預定義尺寸。

<div style={{ height: 350, width: '100%' }}>
  <DataGrid {...data} />
</div>

<div style={{ height: 350, width: '100%' }}>
  <DataGrid {...data} />
</div>

按下 Enter 鍵開始編輯

覆蓋層高度

當資料格線沒有內容時，覆蓋層（例如「載入中」或「沒有列」）預設會佔用兩列的高度。

若要自訂覆蓋層高度，請使用 --DataGrid-overlayHeight CSS 變數。

<DataGrid
  columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
  rows={[]}
  slots={{ noRowsOverlay: CustomNoRowsOverlay }}
  sx={{ '--DataGrid-overlayHeight': '300px' }}
/>

<DataGrid
  columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
  rows={[]}
  slots={{ noRowsOverlay: CustomNoRowsOverlay }}
  sx={{ '--DataGrid-overlayHeight': '300px' }}
/>

按下 Enter 鍵開始編輯

自動高度

autoHeight 屬性使資料格線能夠根據其內容調整大小。這表示資料格線的高度將由列數決定，確保所有列都將同時對使用者可見。

<Stack direction="row" spacing={1} sx={{ mb: 1 }}>
  <Button size="small" onClick={removeRow}>
    Remove a row
  </Button>
  <Button size="small" onClick={addRow}>
    Add a row
  </Button>
</Stack>
<DataGrid
  autoHeight
  {...data}
  loading={loading}
  rows={data.rows.slice(0, nbRows)}
/>

<Stack direction="row" spacing={1} sx={{ mb: 1 }}>
  <Button size="small" onClick={removeRow}>
    Remove a row
  </Button>
  <Button size="small" onClick={addRow}>
    Add a row
  </Button>
</Stack>
<DataGrid
  autoHeight
  {...data}
  loading={loading}
  rows={data.rows.slice(0, nbRows)}
/>

按下 Enter 鍵開始編輯

資料格線 - 版面配置

彈性父容器

最小和最大高度

百分比尺寸

預定義尺寸

覆蓋層高度

自動高度

API