如何在 Ag-Grid React 中向列 Header 添加 select-all 复选框？

Question

在 Ag Grid 中，有一个选项可以将复选框添加到 select 的行。这可以在 columnDefinitions 中定义如下：

{
   checkboxSelection: true
}

此复选框已添加到行本身。现在我的问题是，如何在 header 列本身中添加 select-all 复选框？

Answer 1

你快到了。您所要做的就是按照 docs

中的说明添加 colDef.headerCheckboxSelection=true

那就是

<AgGridReact
  // needed if you want to select multiple rows. Default is single
  rowSelection="multiple"
  // not required here. Enable this if you only want checkbox selection, and don't want      
  // to also select the row when the row is clicked.
  suppressRowClickSelection
  columnDefs={[{
    field: 'id',
    checkboxSelection: true,
    headerCheckboxSelection: true,},
    ...
  ]}
/>

Live Demo