title: Material ui datagrid I want to change my table data upon button click
body: <p>so what I am trying to do is change a key value in my data that is being passed into datagrid component from material ui. I have a button that I am rendering. However on that button click I would like to change data. Is there a possible way I can get the index of my button click? Here is my code</p>
  <pre><code>import Button from &quot;@mui/material/Button&quot;;
  import { DataGrid, GridColDef, GridApi, GridCellValue } from &quot;@mui/x-data-grid&quot;;
  import {useState, useEffect} from 'react';
  
  
  
  function StarWarsTable({data}) {
      const [starWarsData, setStarWarsData] = useState([]);
      const columns = [
          {
            field: &quot;action&quot;,
            headerName: &quot;Action&quot;,
            sortable: false,
            renderCell: (params) =&gt; {
              const onClick = (e) =&gt; {
                e.stopPropagation(); // don't select this row after clicking
        
                const api = params.api;
                const thisRow = {};
        
                 api
                  .getAllColumns()
                  .filter((c) =&gt; c.field !== &quot;__check__&quot; &amp;&amp; !!c)
                  .forEach(
                    (c, i) =&gt; {
                        
                        (thisRow[c.field] = params.getValue(params.id, c.field))
                          alert(i)
                    }
                  );
                 
        
                return alert(JSON.stringify(thisRow, null, 4));
              };
        //I want to change data of the nth element upon this button click
              return &lt;Button onClick={onClick}&gt;Click&lt;/Button&gt;;
            },
          },
          { field: &quot;id&quot;, headerName: &quot;ID&quot;, width: 130 },
          { field: &quot;name&quot;, headerName: &quot;Name&quot;, width: 130 },
          { field: &quot;birthYear&quot;, headerName: &quot;Birth Year&quot;, width: 130 },
          { field: &quot;gender&quot;, headerName: &quot;Gender&quot;, width: 130 },
          { field: &quot;homeworld&quot;, headerName: &quot;Home world&quot;, width: 130 },
          { field: &quot;species&quot;, headerName: &quot;Species&quot;, width: 130 },
          { field: &quot;favorite&quot;, headerName: &quot;Is Favorite&quot;, width: 130},
        ];
    return (
      &lt;div style={{ marginLeft: '10%', height: 400, width: &quot;75%&quot; }}&gt;
        &lt;DataGrid rows={data} columns={columns} pageSize={5} rowsPerPageOptions={[10]} /&gt;
      &lt;/div&gt;
    );
  }
  
  export default StarWarsTable;
  </code></pre>