数据表格 - 列尺寸

自定义列的尺寸和调整大小行为。

列宽

默认情况下，列的宽度为 100px。这是一个任意的、易于记忆的值。要更改列的宽度，请使用 GridColDef 中提供的 width 属性。

最小宽度

默认情况下，列的最小宽度为 50px。这是一个任意的、易于记忆的值。要更改列的最小宽度，请使用 GridColDef 中提供的 minWidth 属性。

流式宽度

通过在 GridColDef 中设置 flex 属性，可以实现列的流动性或响应性。

flex 属性接受介于 0 和 ∞ 之间的值。它的工作原理是将数据表格中的剩余空间按照比例分配给所有 flex 列，比例取决于它们的 flex 值。

例如，考虑一个总宽度为 500px 的网格，它有三列：第一列的 width: 200；第二列的 flex: 1；第三列的 flex: 0.5。第一列的宽度将为 200px，剩余 300px。 flex: 1 的列是 flex: 0.5 的列的两倍大小，这意味着最终大小将为：200px、200px、100px。

要为 flex 列设置最小和最大宽度，请在 GridColDef 中设置 minWidth 和 maxWidth 属性。

调整大小

默认情况下，数据表格允许通过拖动列分隔符的右侧部分来调整所有列的大小。

要防止调整列的大小，请在 GridColDef 中设置 resizable: false。或者，要禁用所有列的大小调整，请设置 prop disableColumnResize={true}。

要限制将列的大小调整到某个宽度以下，请在 GridColDef 中设置 minWidth 属性。

要限制将列的大小调整到某个宽度以上，请在 GridColDef 中设置 maxWidth 属性。

要捕获列宽度的更改，有两个回调函数会被调用

• onColumnResize：在调整列大小时调用。
• onColumnWidthChange：在列的宽度更改后调用，但在调整大小时不调用。

自动调整大小

数据表格允许根据列的内容自动调整列的尺寸。默认情况下启用自动调整大小。要关闭它，请将 disableAutosize prop 传递给数据表格。

可以通过以下方法之一使用自动调整大小

• 添加 autosizeOnMount prop，
• 双击网格上的列标题分隔符，
• 调用 apiRef.current.autosizeColumns(options) API 方法。

您可以直接在调用 API 方法时将选项传递给它。要为其他两种方法配置自动调整大小，请在 autosizeOptions prop 中提供选项。

请注意，对于分隔符双击方法，autosizeOptions.columns 将被用户双击的相应列替换。

在所有情况下，都将遵守 colDef.minWidth 和 colDef.maxWidth 选项。

<DataGrid
  {...otherProps}
  autosizeOptions={{
    columns: ['name', 'status', 'createdBy'],
    includeOutliers: true,
    includeHeaders: false,
  }}
/>

异步自动调整大小

来自 apiRef 的 autosizeColumns 方法也可以用于在指定的事件上调整列大小，例如当从服务器接收行数据时。

具有动态行高的自动调整大小

列自动调整大小与动态行高功能兼容。

具有分组行的自动调整大小

当使用行分组时，您可以利用 autosizeColumns 方法动态调整展开行的列宽。下面的演示展示了如何订阅 rowExpansionChange 事件。提供的处理函数然后调用 gridApi 中的 autosizeColumns 方法。

API

• DataGrid
• DataGridPro
• DataGridPremium