AGGrid v32社区版复选框位置控制问题（从v29升级）

旧方式的状态 #

v29里直接在ColDef中设置checkboxSelection和headerCheckboxSelection的方式，在v32中已被官方标记为废弃，TypeScript报错就是明确提示——虽然部分场景下运行时可能还能生效，但官方不建议继续使用，后续版本大概率会彻底移除这些属性，建议尽快迁移到新API。

v32中控制复选框位置的正确做法 #

v32默认会自动添加选择列，但要自定义位置，你需要手动定义选择列的ColDef，使用新的组件API实现复选框和全选功能，再把这个列定义放到columnDefs数组的对应位置即可：

1. 定义选择列的ColDef，使用新的渲染器和表头组件：

const columnDefs = [
  // 将选择列放在数组的第1位（或你需要的任意位置）
  {
    maxWidth: 45,
    sortable: false,
    suppressMenu: true,
    filter: false,
    pinned: true,
    resizable: false,
    // 单元格复选框渲染器
    cellRenderer: 'agSelectionCheckbox',
    // 表头全选组件
    headerComponent: 'agSelectAllHeader',
    // 对应原headerCheckboxSelectionFilteredOnly的配置
    headerComponentParams: {
      filterOnly: true
    }
  },
  // 你的业务列
  { field: 'name', headerName: '名称' },
  { field: 'age', headerName: '年龄' },
  // ...其他列
];

2. 在AgGridReact组件中启用多行选择模式：

<AgGridReact
  columnDefs={columnDefs}
  selection={{
    mode: 'multiRow' // 启用多行选择，对应原多选场景
  }}
  // 其他必要配置（如rowData等）
/>

关键说明 #

• 通过手动定义选择列并插入到columnDefs的指定位置，就能完全复刻v29中控制复选框位置的效果。
• headerComponentParams.filterOnly对应原headerCheckboxSelectionFilteredOnly，实现仅选中过滤后行的功能。
• 不要同时启用自动添加的选择列和手动定义的列，避免出现重复选择列。

内容的提问来源于stack exchange，提问作者Jordan Freeman