如何将MUI X Data Grid的复选框列放置在表格中间位置？

嘿，这个问题我之前踩过坑！默认情况下MUI X Data Grid的复选框列会硬怼在最左边，哪怕你在columns数组里把它放在中间也没用——这是因为组件的checkboxSelection属性开启时，会自动在列数组最前面插入一个内置的复选框列，直接覆盖了你手动定义的位置。

要解决这个问题很简单，只需要两步：

• 第一步：把DataGrid组件上的checkboxSelection属性设为false，关闭自动生成的默认复选框列
• 第二步：保留你在columns数组中间位置定义的GRID_CHECKBOX_SELECTION_COL_DEF配置，让它来接管行选择的功能

修改后的组件代码示例：

<ExDataGrid
  columns={columnsTable3pl}
  checkboxSelection={false} // 关键：关闭自动生成的复选框列
  hideFooter
  rows={productsWarehouse || []}
  loading={isPending || isPendingNotes}
/>

你的columns定义可以完全保留原来的配置，比如：

export const columnsTable3pl: GridColDef[] = [
  { field: 'notes', headerName: 'Note', /* ... 其他属性 */ },
  { ...BrandColumn },
  { ...ProductNameColumn },
  { field: 'asin', headerName: 'ASIN', /* ... 其他属性 */ },
  { field: 'quantity', headerName: 'Total Quantity', /* ... 其他属性 */ },
  { 
    ...GRID_CHECKBOX_SELECTION_COL_DEF, 
    headerClassName: 'bg-expander-light text-white', 
    renderHeader: () => '', 
    headerAlign: 'center', 
    align: 'center', 
  },
  // ... 其他列
];

这样调整后，你的复选框列就会乖乖显示在你指定的中间位置了。另外如果你需要表头的全选功能，也可以给renderHeader补上全选复选框的逻辑，比如：

renderHeader: (params) => (
  <Checkbox
    indeterminate={
      params.api.getSelectedRows().length > 0 && 
      params.api.getSelectedRows().length < params.api.getRows().length
    }
    checked={
      params.api.getRows().length > 0 && 
      params.api.getSelectedRows().length === params.api.getRows().length
    }
    onChange={(e) => params.api.selectAllRows(e.target.checked)}
  />
),

这样既保证了列的位置正确，也不会丢失批量选择的核心功能。

内容来源于stack exchange