由渲染器选中的ag-grid复选框列

npm install --save ag-grid-community ag-grid-react

import React, { useState } from 'react';

const CheckboxRenderer = ({ value, onClick }) => {
  const [isChecked, setIsChecked] = useState(value);

  const handleChange = (event) => {
    setIsChecked(event.target.checked);
    onClick(event.target.checked);
  };

  return (
    <input
      type="checkbox"
      checked={isChecked}
      onChange={handleChange}
    />
  );
};

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const GridExample = () => {
  const columnDefs = [
    {
      headerName: "Select",
      field: "select",
      cellRendererFramework: (params) => (
        <CheckboxRenderer
          value={params.value}
          onClick={(newValue) => params.context.onCheckboxClick(params.rowIndex, newValue)}
        />
      ),
      width: 50,
    },
    // ... other column definitions
  ];

  const rowData = [
    // ... your row data
  ];

  const onCheckboxClick = (rowIndex, newValue) => {
    console.log(`Checkbox at row ${rowIndex} was clicked. New value: ${newValue}`);
    // Update your data model here
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        context={{ onCheckboxClick }}
      />
    </div>
  );
};

export default GridExample;

{
  headerName: "Select All",
  checkboxSelection: true,
  headerCheckboxSelection: true,
  width: 50,
},