在ag-grid中实现按钮

// CustomButtonRenderer.jsx
import React from 'react';

class CustomButtonRenderer extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // 处理按钮点击事件
    const { data, colDef } = this.props;
    // 执行相应的操作
    console.log(`按钮点击 - 行数据: ${JSON.stringify(data)}, 列定义: ${JSON.stringify(colDef)}`);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.props.value}
      </button>
    );
  }
}

export default CustomButtonRenderer;

// Grid.jsx
import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import CustomButtonRenderer from './CustomButtonRenderer';

class Grid extends React.Component {
  constructor(props) {
    super(props);
    this.columnDefs = [
      // 其他列定义...
      {
        headerName: '操作',
        field: 'button',
        cellRendererFramework: CustomButtonRenderer,
      },
    ];
    this.rowData = [
      // 行数据...
    ];
  }

  render() {
    return (
      <div className="ag-theme-alpine" style={{ height: '400px', width: '600px' }}>
        <AgGridReact
          columnDefs={this.columnDefs}
          rowData={this.rowData}
        />
      </div>
    );
  }
}

export default Grid;