Issue title: How to update/delete row(s) with 'customBodyRender'
 Issue body: <!--- Provide a general summary of the issue in the Title above -->
I would like to enable Delete/Update of column with buttons I defined in 'customBodyRender'

<!--
    Thank you very much for contributing to MUI-datatables by creating an issue! ❤️
-->

## Expected Behavior
<!---
    If you're describing a bug, tell us what should happen.
    If you're suggesting a change/improvement, tell us how it should work.
-->
mui-datatables support customized components inside table cells, I like that. I have made it to put some buttons in one column of the table, so user can interact with each row's data.
For each row, I have some columns with data, and one  columns with 'delete' and 'update' button, I need to enable the buttons to work.

For example, one row of table look like this:

Name | Age | Options
--------------------------------------------------------
Alex   | 30    | <Delete_Button>  <Update_Button>

## Current Behavior
<!---
    If describing a bug, tell us what happens instead of the expected behavior.
    If suggesting a change/improvement, explain the difference from current behavior.
-->

I cannot delete rows from customized component with 'customBodyRender'

## Steps to Reproduce (for bugs)
<!---
    Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
    Include code to reproduce, if relevant (which it most likely is).
-->

1. First I have created a component <Option/> with includes a few buttons such as delete/update, etc.
2. I have put this component in mui-datatable with customBodyRender, it works fine.
  {
    name: "Options",
    options: {
      customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <Options
              value={value}
              tableMeta={tableMeta}
              change={event => updateValue(event)}
            />
          );
      },
      filter: false,
      sort: false
    },
3. I know how to change the value of the current cell, from the example provided, I can also use the value of that cell to make some backend requests. but what I can do to:
Delete the row in table from where I clicked the 'delete' button in my <Option /> component; Or how I can update some data of the current row.
4. I suppose there should be some methods that I can pass to <Option /> as props so I can call them to delete/update the row. 

## Your Environment
<!--- Include as many relevant details about the environment with which you experienced the bug. -->

| Tech         | Version |
|--------------|---------|
| Material-UI  |    latest     |
| MUI-datatables  |    latest          |
| React        |    latest          |
| browser      |   chrome      |
| etc          |         |

@gregnb 
 Comments: 
 Comment 0: Hey Alex!  This is exactly the problem I'm facing with my current MUI-datatable build.  I'm trying to add an edit and delete button as well utilizing the custom body render, I'm very close to getting right, but can't seem to refactor properly using I'm utilizing react  and redux for state management.  Really, I'm struggling with making button links to edit forms for each row, which would require maintaining the id for each row.  

Would you be willing to assist or share your code?  Thanks!
 Comment 1: @nultron 
Default solution for your problem is  options part.
like this:
const options = {
        filterType: 'checkbox',
        onRowsDelete: this.handleDelete,
      };

Then write your code for deleting data in function handleDelete.


 Comment 2: @nultron Were you able to figure this out?  I was able to figure out a working solution and could help you if need be.  There were some interesting configurations that I had to do, but for the most part the package wasn't as opinionated as I initially thought.  Let me know!
 Comment 3: [yekijnuy](/yekijnuy) Can you help me with the configuration you did? 
 Comment 4: @marianalucut7 Sure - first what are you trying to render?  Send me some details and I'll be more than happy to help if you are still stuck
 Comment 5: If you are trying to find the row id , everything you need is located in the tableMeta.
 Try this  inside your customBodyRender function
const rowId = tableMeta.rowData
console.log(rowId)
 Comment 6: I had mine working the other day to render a edit icon but now for some reason it is not working.  
Please let me know if you see a problem with this code.

const columns = [
      {
        name: "ID",
        options: {
          display: false,
        }
      },
      "Client Name",
      "Date",
      "Type",
      "Memo",
      "Status",
      "Reatainer Rec",
      {
        name: "Edit",
        options: {
          display: true,
           onCellClick: (rowIndex) => {this.handleEdit(rowIndex)},
          customBodyRender: (value, tableMeta, updateValue) => {
            const rowId = tableMeta.rowData
            console.log(rowId)
            // tableMeta contains all the info that is needed
            return (
                
                <Icon name="edit" size="large" color="green" onClick={ e => this.handleEdit(rowId, e)}> 
                </Icon>
            );
          },         
        }
      }
    ];
 Comment 7: How can we update the changed data to the database without using redux in the custom body render?
 Comment 8: Hello, 

I added my action buttons using customBodyRender:

```javascript
{
           name: "Action",
                options: {
                    filter: true,
                    sort: false,
                    empty: true,
                    customBodyRender: () => {
                        return (
                            <ActionButtons
                                onView={this.onView}
                                onEdit={this.onEdit}
                                onDelete={this.onDelete}
                            />
                        );
                    }
                }
            },
```
And in table options, I use onRowClick to get the data (included an object of the component <ActionButtons/>) from the row clicked:

```javascript
const options = {
            filter: true,
            download: false,
            selectableRows: false,
            filterType: "dropdown",
            responsive: "scroll",
            rowsPerPage: 10,
            customToolbar: () => (
                <CustomToolbar
                    handleFormOpen={this.handleFormOpen}
                />
            ),
            onRowClick: (event, rowData) => {
               this.handleClickedActionButton(event, rowData);
            },
        };
```
As I have 3 buttons in one cell (view, edit and delete) for each row, I need to know which button was clicked in order to perform an action to the data (call a function).

I tried using event.currentTarget to get the id of the button clicked, use that id in a switch statement in order to identify which one was and base on that call the correct function.

Something like this:

```javascript
            onRowClick: (event, rowData) => {
               this.handleClickedActionButton(event, rowData);
            },
        };
//
handleClickedActionButton = (event, rowData ) => {
        const buttonID = event.currentTarget.dataset.id;
        switch (buttonID) {
            case "btnView":
                console.log("View");
                break;
            case "btnEdit":
                console.log("Edit");
                break;
            case "btnDelete":
                console.log("Delete");
                break;
            default: console.log("No action button clicked.");
            }
        };
```
But I just get an error saying "Type error: event.currentTarget is undefined".

How can I implement this idea in a better way? T.T

 Comment 9: Hi, i read all comments and i had similar issue in my project i solve it using React hooks, sharing state and actions using a local context, here my example, i hope helping any;

**context.js**
```
import React from "react";

const TableContext = React.createContext({
  actions: {},
  stateTable: {},
  filterOptions: {}
});

export function useTableContext() {
  return React.useContext(TableContext);
}

export default TableContext;
```


**index.js**
```
import TableContext from './context';

function EnrolledContainer() {
  const classes = useStyles();
  const { actions, stateTable, filterOptions, handleClose, handleAddButton } = useEnrolledTable();
  const { title, isLoading, open, tableData } = stateTable;

  return (<TableContext.Provider value={{ actions, stateTable, filterOptions }}>
    <Grid container spacing={8} className={classes.container}>
      <Grid item xs={12} sm={12}>
        <MUIDataTable
          title={
            <React.Fragment>
              <span>
                <span style={{ fontSize: "1.5em", fontWeight: 'bolder', textAlign: 'center' }} >{title}</span>
              </span>
              <span>
                {!!isLoading && <CircularProgress size={24} thickness={6} style={{ marginLeft: 15, position: 'relative', top: 4, textAlign: 'center' }} />}
              </span>
            </React.Fragment>
          }
          data={tableData}
          columns={getColumns(stateTable, actions, filterOptions)}
          options={getOptions(stateTable, actions)}
        />
....
```
**customBodyRender 👍** 
```
import { useTableContext } from '../context';

const ToggleButton = React.memo(props => {
  const value = props[0]
  const tableMeta = props[1]
  const updateValue = props[2]
  const { actions } = useTableContext();
  const { modificatePeople, getRowData, openAlertDialog, closeAlertDialog, updateRow, enqueueSnackbar, closeSnackbar } = actions
  const people = getRowData(tableMeta.rowIndex);

  return <FormControlLabel
    control={<Switch color="primary" checked={people && people.status} value={people && people.status ? "Activo" : "Inactivo"}
      onChange={event => {
        const value = event.target.checked;
        people && openAlertDialog({
          title: 'Cambiar estado ',
          message: "Está seguro(a) de " + ((status) ? "bloquear" : "activar") + " a " + people.fname
        })
          .then((accept) => {
            if (accept) {
              closeAlertDialog();
              people.status = value;
              updateRow(tableMeta.rowIndex, people)
              people && modificatePeople({
                id: people.id,
                params: {
                  status: Number(value)
                }
              })
            }
          })
      }}
    />}
  />
})

export default (...args) => {
  return <ToggleButton {...args} />
}

```
 Comment 10: Hi, I'm new to React and MUI-datatables. I have been creating a datatable where I am implementing CRUD. Everything else works perfectly apart from Update. I can only update the first row even when I click on the edit icon on other rows. Whenever I click on each edit icon in every row. A modal form pops up where I am supposed to update the details of a particular item (in this case, company). I am also using redux.

** Edit Clolumn**

```
{
            name: "Edit",
            options: {
              filter: false,
              sort: false,
              empty: true,
              customBodyRender: (value, tableMeta, updateValue) => {
                const rowId = tableMeta.rowData[0]
                return (
                    <div>
                      <EditIcon onClick={this.toggle} />
                       <Modal isOpen={this.state.modal} toggle={this.toggle}>
                       <ModalHeader toggle={this.toggle}>Update Company</ModalHeader>
                       <ModalBody>
                           <Form onSubmit={this.handleSubmit.bind(this, rowId)}>
                               <FormGroup>
                                   <Label for='name'>Name</Label>
                                   <Input
                                       type='text'
                                       name='name'
                                       id='item'
                                       placeholder='update name'
                                       onChange={this.handleChange}
                                   />
                                   <Label for='email'>Email</Label>
                                   <Input
                                       type='email'
                                       name='email'
                                       id='email'
                                       placeholder='update email'
                                       onChange={this.handleChange}
                                   />
                                   <Label for='phone'>Phone</Label>
                                   <Input
                                       type='text'
                                       name='phone'
                                       id='phone'
                                       placeholder='update phone'
                                       onChange={this.handleChange}
                                   />
                                   <Label for='website'>Website</Label>
                                   <Input
                                       type='url'
                                       name='website'
                                       id='website'
                                       placeholder='update website'
                                       onChange={this.handleChange}
                                   />
                                   <Label for='address'>Address</Label>
                                   <Input
                                       type='text'
                                       name='address'
                                       id='address'
                                       placeholder='update address'
                                       onChange={this.handleChange}
                                   />
                                   <Button color='dark' style={{ marginTop: '2rem' }} block>
                                       Update Company
                                   </Button>
                                </FormGroup>
                            </Form>
                        </ModalBody>
                       </Modal>
                   </div>
                );
              }
            }
          }, 
```

**handleSubmit**

```
handleSubmit = id => {  
      const company = {
        name: this.state.name,
        email: this.state.email,
        phone: this.state.phone,
        website: this.state.website,
        address: this.state.address
      };

      // update company via updateCompany action
      this.props.updateCompany(company, id);
      
      //Close modal
      this.toggle();
  
    };

```

What could I be doing wrong. Or is there a better way to do this?
 Comment 11: > Hi, I'm new to React and MUI-datatables. I have been creating a datatable where I am implementing CRUD. Everything else works perfectly apart from Update. I can only update the first row even when I click on the edit icon on other rows. Whenever I click on each edit icon in every row. A modal form pops up where I am supposed to update the details of a particular item (in this case, company). I am also using redux.
> 
> ** Edit Clolumn**
> 
> ```
> {
>             name: "Edit",
>             options: {
>               filter: false,
>               sort: false,
>               empty: true,
>               customBodyRender: (value, tableMeta, updateValue) => {
>                 const rowId = tableMeta.rowData[0]
>                 return (
>                     <div>
>                       <EditIcon onClick={this.toggle} />
>                        <Modal isOpen={this.state.modal} toggle={this.toggle}>
>                        <ModalHeader toggle={this.toggle}>Update Company</ModalHeader>
>                        <ModalBody>
>                            <Form onSubmit={this.handleSubmit.bind(this, rowId)}>
>                                <FormGroup>
>                                    <Label for='name'>Name</Label>
>                                    <Input
>                                        type='text'
>                                        name='name'
>                                        id='item'
>                                        placeholder='update name'
>                                        onChange={this.handleChange}
>                                    />
>                                    <Label for='email'>Email</Label>
>                                    <Input
>                                        type='email'
>                                        name='email'
>                                        id='email'
>                                        placeholder='update email'
>                                        onChange={this.handleChange}
>                                    />
>                                    <Label for='phone'>Phone</Label>
>                                    <Input
>                                        type='text'
>                                        name='phone'
>                                        id='phone'
>                                        placeholder='update phone'
>                                        onChange={this.handleChange}
>                                    />
>                                    <Label for='website'>Website</Label>
>                                    <Input
>                                        type='url'
>                                        name='website'
>                                        id='website'
>                                        placeholder='update website'
>                                        onChange={this.handleChange}
>                                    />
>                                    <Label for='address'>Address</Label>
>                                    <Input
>                                        type='text'
>                                        name='address'
>                                        id='address'
>                                        placeholder='update address'
>                                        onChange={this.handleChange}
>                                    />
>                                    <Button color='dark' style={{ marginTop: '2rem' }} block>
>                                        Update Company
>                                    </Button>
>                                 </FormGroup>
>                             </Form>
>                         </ModalBody>
>                        </Modal>
>                    </div>
>                 );
>               }
>             }
>           }, 
> ```
> 
> **handleSubmit**
> 
> ```
> handleSubmit = id => {  
>       const company = {
>         name: this.state.name,
>         email: this.state.email,
>         phone: this.state.phone,
>         website: this.state.website,
>         address: this.state.address
>       };
> 
>       // update company via updateCompany action
>       this.props.updateCompany(company, id);
>       
>       //Close modal
>       this.toggle();
>   
>     };
> ```
> 
> What could I be doing wrong. Or is there a better way to do this?

You would need to make your id column in the table to have display:'excluded' 
 Comment 12: is very easy, check this.... it's ok for me:

1. Add the event onRowsDelete on the options section:

 const options = {
    onRowsDelete: (rowData, rowState) => {
      handleDeleteCat(rowData, rowState);
    },
    filter: false,
    selectableRows: true,
    filterType: 'dropdown',
    responsive: 'stacked',
    rowsPerPage: 10,
  } 

2. Create a function for getting the event, and get the row data index. Finally, get from the object list the index position and get the id. With it you can delete the row in your database:

  const handleDeleteCat = (rowIndex, dataIndex) => {
    const rowToDelete = rowData.data[0].dataIndex;
    var idCatToDelete =  props.state.productCategories.categoryList.categoriesList[rowToDelete][0];
  };
 Comment 13: Can someone explain what is the best approach to add actions as edit and delete to a row of the table?
 Comment 14: The 2021 solution of this issue could be like this: 

```es6
const ROW_MODIFY_STATES = Object.freeze(
  Object.fromEntries(["INITIAL", "EDITING"].map((t) => [t, t]))
);

const getColumnValue = (originalColumnIndex, tableMeta) =>
  tableMeta.rowData[
    tableMeta.tableState.columnOrder?.indexOf(originalColumnIndex) ??
      originalColumnIndex
  ];

const rebuildObjFromRow = (columns, tableMeta) =>
  Object.fromEntries(
    columns.map((c, originalColumnIndex) => [
      c.name,
      getColumnValue(originalColumnIndex + 1, tableMeta)
    ])
  );


const DefaultActionButton = ({ value, onEditStart, onEditFinish }) =>
  value === ROW_MODIFY_STATES.INITIAL ? (
    <Button onClick={onEditStart}> Edit </Button>
  ) : (
    <Button onClick={onEditFinish}> Save </Button>
  );

const EditableCell = ({ editing, value, onChange, columnMeta, tableMeta }) =>
  editing
    ? columnMeta.options?.customBodyEditRender?.(value, tableMeta, onChange) ??
       (<input value={value} onChange={(e) => onChange(e.target.value)} />)
    : columnMeta.options?.customBodyRender?.(value, tableMeta, onChange) ??
      value;

const actionColumnRenderFactory = (columns, onRowSave, actionButtonCmp) => (
  value,
  tableMeta,
  update
) =>
  actionButtonCmp({
    value,
    onEditStart: () => update(ROW_MODIFY_STATES.EDITING),
    onEditFinish: () => {
      const rowObj = rebuildObjFromRow(columns, tableMeta);
      onRowSave(rowObj);
      update(ROW_MODIFY_STATES.INITIAL);
    }
  });

const injectColumnRender = (columns) =>
  columns.map((c) => ({
    ...c,
    options: {
      ...c.options,
      customBodyRender: (value, tableMeta, onChange) => {
        const uiState = getColumnValue(0, tableMeta);
        return (
          <EditableCell
            editing={uiState === ROW_MODIFY_STATES.EDITING}
            columnMeta={c}
            {...{ value, tableMeta, onChange }}
          />
        );
      }
    }
  }));

const MuiDataTableEditable = ({
  data,
  columns,
  onRowSave,
  actionButtonCmp = DefaultActionButton,
  ...otherProps
}) => {
  const dataWithUiState = Array.isArray(data[0])
    ? data.map((t) => [ROW_MODIFY_STATES.INITIAL, ...t])
    : data.map((t) => ({ uiState: ROW_MODIFY_STATES.INITIAL, ...t }));

  const actionColumn = {
    name: "uiState",
    label: "Action",
    options: {
      customBodyRender: actionColumnRenderFactory(columns, onRowSave, actionButtonCmp)
    }
  };

  const columnsWithEditableRender = injectColumnRender(columns);

  const columnsWithCustomRenderAndActionColumn = [
    actionColumn,
    ...columnsWithEditableRender
  ];

  return (
    <MUIDataTable
      data={dataWithUiState}
      columns={columnsWithCustomRenderAndActionColumn}
      {...otherProps}
    />
  );
};

```

Usage: 

```jsx
      <MuiDataTableEditable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
        options={options}
        onRowSave={(mutatedRowObj) => {
          // backendCallPut(mutatedRowObj);
          // refresh();
          alert("Modified Object: " + JSON.stringify(mutatedRowObj, null, 2));
        }}
      />

```


Bonus: 

-  Modify `actionColumnRenderFactory` to handle async functions
-  Insert your own action button implementation by passing `actionButtonCmp`
-  Customize the input box for edit field with 
    ```jsx
        {
        name: "Location",
        options: {
          customBodyEditRender: (value, tableMeta, update) => (
            <textarea onChange={(e) => update(e.target.value)}>
              {value}
            </textarea>
          )
        }
      },

    ```




{'source': 'GithubIssues', 'repo_name_with_owner': 'gregnb/mui-datatables', 'issue_id': 386475861, 'repo_stars': 2545.0}