Deleting rows with Action Button

[hamodey]

Hi,

I have a datasheet that works great and fine, however I would like to add an "Action" column at the end of the datasheet to be able to delete the current row.

So all rows will have a delete button and I can delete that row and the size of the sheet will get smaller.

Thanks

[navidadelpour]

Hi @hamodey,

1. Define your delete function which updates your state of rows:

function deleteRow(indexToRemove) {
  setState((prevState) =>
    prevState.filter((row, index) => index !== indexToRemove)
  );
}

2. Add an actions column when you are creating your grid:

const grid = state.map((rowData, index) => {
  return [
    { value: rowData.firstName },
    { value: rowData.lastName },
    {
      forceComponent: true,
      component: <button onClick={removeRow.bind(this, index)}>Delete Row</button>,
    },
  ];
});