带有 ID 的 React Datatable 组件中的编辑按钮

Question

how to pass id in edit button of column cell in reactJS datatable component?

Answer 1

I have done it using "react-table" npm package. Without knowing your requirement exactly, it is bit hard to suggest use the package I have mentioned above.

React Table - npm package

You can just have a look and see whether this is suitable for your requirement.

Answer 2

You need to use the cell property of the Columns.

const columns = [
{
 name: "Name",
 selector: "name",
 sortable: true,
},
{
 name: "Phone",
 selector: "phone",
 sortable: true,
 right: true,
},
{
key: "action",
text: "Action",
className: "action",
width: 100,
align: "left",
sortable: false,
cell: (record) => {
  return (
    <Fragment>
      <button
        className="btn btn-primary btn-sm"
        onClick={() => {
          onEdit(record);
        }}
      >
        Edit
      </button>
    </Fragment>
  );
 },
},
];

In the onEdit method, you can manipulate the data or make the axios call and update the state to rerender.