数据表格 - 布局

数据表格提供多种布局模式。

Flex 父容器

数据表格可以放置在 flex-direction: column 的 flex 容器内。在不设置最小和最大高度的情况下，数据表格会占用显示所有行所需的空间。

<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 开始编辑

最小和最大高度

在下面的演示中，数据表格放置在 flex 容器内，最小高度为 200px，最大高度为 400px，并在行数更改时调整其高度。

百分比尺寸

当使用百分比 (%) 设置高度或宽度时，请确保 Data Grid 的父容器具有固有尺寸。浏览器会根据其父元素尺寸的百分比调整元素。如果父元素没有尺寸，则百分比将为零。

预定义尺寸

您可以为数据表格的父元素预定义尺寸。

<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 开始编辑

数据表格 - 布局

Flex 父容器

最小和最大高度

百分比尺寸

预定义尺寸

覆盖层高度

自动高度

API