在单元格的react-bootstrap-table上创建可点击的按钮

import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';

const data = [
  { id: 1, name: 'John', button: 'Click me' },
  { id: 2, name: 'Jane', button: 'Click me' },
  { id: 3, name: 'Mike', button: 'Click me' },
];

const handleClick = (id) => {
  alert(`Button clicked for row with id ${id}`);
};

const buttonFormatter = (cell, row) => {
  return <button onClick={() => handleClick(row.id)}>{cell}</button>;
};

const columns = [
  { dataField: 'id', text: 'ID' },
  { dataField: 'name', text: 'Name' },
  { dataField: 'button', text: 'Button', formatter: buttonFormatter },
];

const MyTable = () => {
  return (
    <BootstrapTable
      keyField="id"
      data={data}
      columns={columns}
      cellEdit={cellEditFactory({ mode: 'click', blurToSave: true })}
    />
  );
};

export default MyTable;