材质 UI 数据网格第一列已修复

Question

在材质数据网格中水平滚动时是否可以使第一列固定？我尝试选择第一个孩子并申请

position: sticky

但没有成功。

Answer 1

列固定只能通过 MUI Pro Plan 使用，但就像将以下行添加到 DataGrid div 中的initialState 属性一样简单。

pinnedColumns: {left: ['actions']}

所以，它看起来像这样：

<DataGrid 
    initialState={{
        pinnedColumns: { left: ['actions'] },
    }}
/>

“动作”当然是

headerName/column

您想要固定的任何内容并“离开”方向。

如果您要固定多个，或者想要将多个固定到不同的一侧，只需将它们添加到后面，每个之间用逗号分隔即可。

<DataGridPro
  rows={rows}
  columns={columns}
  checkboxSelection
  initialState={{
    pinnedColumns: {
      left: [GRID_CHECKBOX_SELECTION_COL_DEF.field],
      right: ['actions', 'title', 'director', '...'],
    },
  }}
/>

Answer 2

要通过initialState设置固定列，请将具有以下形状的对象传递给此道具：

interface GridPinnedColumns {
  left?: string[]; // Optional field names to pin to the left
  right?: string[]; // Optional field names to pin to the right
}

此功能仅在 Data Grid Pro 中可用。您可以在这里看到更多内容https://mui.com/components/data-grid/columns/#column-pinning