数据表格 - 列固定
固定列以使其始终可见。
固定的（或冻结的、锁定的或粘性的）列是指用户水平滚动数据表格时始终可见的列。它们可以固定在左侧或右侧，并且不能重新排序。
要固定列，有几种方法
初始化固定的列
要通过 initialState 设置固定的列，请将具有以下形状的对象传递给此属性
interface GridPinnedColumnFields {
left?: string[]; // Optional field names to pin to the left
right?: string[]; // Optional field names to pin to the right
}
以下演示说明了此方法的工作原理
按 Enter 开始编辑
控制固定的列
虽然 initialState 属性仅在初始化期间用于设置固定的列，但 pinnedColumns 属性允许您随时修改哪些列被固定。传递给它的值遵循先前方法中的相同形状。将其与 onPinnedColumnsChange 一起使用，以了解何时固定或取消固定列。
按 Enter 开始编辑
禁用列固定
对于所有列
默认情况下启用列固定，但您可以通过设置 disableColumnPinning 属性轻松禁用此功能。
<DataGridPro disableColumnPinning />
对于某些列
要禁用单个列的固定，请在 GridColDef 中将 pinnable 属性设置为 false。
<DataGridPro columns={[{ field: 'id', pinnable: false }]} /> // Default is `true`.
以编程方式固定不可固定的列
可能需要允许以编程方式固定或取消固定一个或多个在 UI 上无法固定或取消固定的列（即属性 disableColumnPinning = true 或 colDef.pinnable = false 的列）。这可以通过以下方式之一完成。
- （A）初始化固定的列
- （B）控制固定的列
- （C）使用 API 方法
setPinnedColumns设置固定的列
// (A) Initializing the pinning
<DataGridPro
disableColumnPinning
initialState={{ pinnedColumns: { left: ['name'] } }}
/>
// (B) Controlling the pinned columns
<DataGridPro
disableColumnPinning
pinnedColumns={{ left: ['name'] }}
/>
// (C) Using the API method `setPinnedColumns` to set the pinned columns
<React.Fragment>
<DataGridPro disableColumnPinning />
<Button onClick={() => apiRef.current.setPinnedColumns({ left: ['name'] })}>
Pin name column
</Button>
</React.Fragment>
以下演示使用方法 (A) 初始化固定列的状态，即使禁用固定功能，也会固定列 name。
按 Enter 开始编辑
固定复选框选择列
要固定使用 checkboxSelection 添加的复选框列，请将 GRID_CHECKBOX_SELECTION_COL_DEF.field 添加到固定的列列表中。
按 Enter 开始编辑
与动态行高一起使用
您可以同时启用固定列和动态行高。但是，如果行在初始计算后更改其内容，您可能需要触发手动重新计算以避免不正确的测量。您可以通过每次内容更改时调用 apiRef.current.resetRowHeights() 来执行此操作。
以下演示包含启用这两个功能的示例
按 Enter 开始编辑