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>,
   },
   ];
   });