Mui-datatables: Delete Rows

[mazenelorbany]

I am using this library to display data from Mysql database, in order to delete I am going to need any value from the row , the function onRowsDelete returns the index of the row but i need to access the row data itself,
the only function that i saw that returns the rowdata was onRowClick

Expected Behavior

what I need whenever I select a row and click on delete it returns the row data so i can delete the data from the database i.e SQL command

Current Behavior

I can only get the row Index

[gabrielliwerant]

onRowsDelete will also return the dataIndex which is the initial position of the data in the array you passed into the table. That should be enough for you to find that value and do whatever you want with it, as in the following pseudo code:

const data = [
  {
    foo: '1',
    bar: '2',
    id: 3
  },
  {
    foo: '4',
    bar: '5',
    id: 6
  },
  {
    foo: '7',
    bar: '8',
    id: 9
  }
];

const options = {
  onRowsDelete: (rowsDeleted, dataRows) => {
    const idsToDelete = dataRows.map(d => data[d.dataIndex].id); // array of all ids to to be deleted
    http.delete(idsToDelete, res).then(window.alert('Deleted!')); // your delete request here
  }
};

<MUIDataTable data={data} columns={columns} options={options} />

[mazenelorbany]

Thanks a lot for your time, I understand what your concept and i will try to apply it into my code
however the value of dataRows in the code is undefined

[gabrielliwerant]

Ah, sorry about that, should be

const options = {
  onRowsDelete: (rowsDeleted) => {
    const idsToDelete = rowsDeleted.data.map(d => data[d.dataIndex].id); // array of all ids to to be deleted
    http.delete(idsToDelete, res).then(window.alert('Deleted!')); // your delete request here
  }
};

[cristianeto]

@gabrielliwerant Great, It works!

I was confused because at the begining I didn't understand from where come in "data" variable.
So I tried to do this:
onRowsDelete: (rowsDeleted) => { const data = this.props.datas; const projectsToDelete = rowsDeleted.data.map((d) => data[d.dataIndex]); this.props.onDelete(projectsToDelete); }
The key is to use "dataIndex" to read the ID of my object, not only "index".

So, Thank you so much..