title: How to set row data when clicking button inside the row material-ui DataGrid?
body: <p>I have a Material-UI DataGrid component that has edit and delete buttons in a row, but I can only do alert or console log,</p>
  <p>Why there are buttons in a row because need dialogs when clicking the button, for example when the user clicks the delete button there will be a confirm dialog for delete action, or when click an edit button there will be a form dialog that updates the row,</p>
  <p>Need to push the user to edit or delete only one item at the same time. So multiple selection is not allowed.</p>
  <p>My question is how to get the row data in the component when clicking the button inside the column definition, in that case, click the <code>Edit</code> or <code>Delete</code> button.</p>
  <p>Using <code>&quot;@material-ui/data-grid&quot;: &quot;^4.0.0-alpha.26&quot;</code></p>
  <pre><code>import Container from &quot;@material-ui/core/Container&quot;;
  import Grid from &quot;@material-ui/core/Grid&quot;;
  import Paper from &quot;@material-ui/core/Paper&quot;;
  import DeleteIcon from &quot;@material-ui/icons/Delete&quot;;
  import EditIcon from &quot;@material-ui/icons/Edit&quot;;
  import Button from &quot;@material-ui/core/Button&quot;;
  import AddIcon from &quot;@material-ui/icons/Add&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import {
    DataGrid,
    GridColDef,
    GridApi,
    GridCellValue
  } from &quot;@material-ui/data-grid&quot;;
  
  const columns: GridColDef[] = [
    { field: &quot;id&quot;, headerName: &quot;ID&quot;, width: 70 },
    { field: &quot;name&quot;, headerName: &quot;First name&quot;, width: 130 },
    { field: &quot;surname&quot;, headerName: &quot;Last name&quot;, width: 130 },
    {
      field: &quot;edit&quot;,
      headerName: &quot;Edit&quot;,
      sortable: false,
      width: 130,
      disableClickEventBubbling: true,
      renderCell: (params) =&gt; {
        const onClick = () =&gt; {
          const api: GridApi = params.api;
          const fields = api
            .getAllColumns()
            .map((c) =&gt; c.field)
            .filter((c) =&gt; c !== &quot;__check__&quot; &amp;&amp; !!c);
          const thisRow: Record&lt;string, GridCellValue&gt; = {};
  
          fields.forEach((f) =&gt; {
            thisRow[f] = params.getValue(f);
          });
  
          // set to state rather then alert
          return alert(JSON.stringify(thisRow, null, 4));
        };
        return (
          &lt;Button
            variant=&quot;contained&quot;
            color=&quot;primary&quot;
            startIcon={&lt;EditIcon /&gt;}
            onClick={onClick}
          &gt;
            Edit
          &lt;/Button&gt;
        );
      }
    },
    {
      field: &quot;delete&quot;,
      headerName: &quot;Delete&quot;,
      sortable: false,
      width: 130,
      disableClickEventBubbling: true,
      renderCell: (params) =&gt; {
        const onClick = () =&gt; {
          const api: GridApi = params.api;
          const fields = api
            .getAllColumns()
            .map((c) =&gt; c.field)
            .filter((c) =&gt; c !== &quot;__check__&quot; &amp;&amp; !!c);
          const thisRow: Record&lt;string, GridCellValue&gt; = {};
  
          fields.forEach((f) =&gt; {
            thisRow[f] = params.getValue(f);
          });
  
          // set to state rather then alert
          return alert(JSON.stringify(thisRow, null, 4));
        };
        return (
          &lt;Button
            variant=&quot;contained&quot;
            color=&quot;secondary&quot;
            startIcon={&lt;DeleteIcon /&gt;}
            onClick={onClick}
          &gt;
            Delete
          &lt;/Button&gt;
        );
      }
    }
  ];
  
  const rows = [
    { id: 1, name: &quot;Example 1&quot;, surname: &quot;example&quot; },
    { id: 2, name: &quot;Example 2&quot;, surname: &quot;example&quot; }
  ];
  
  export type User = {
    id: number;
    name: string;
    surname: string;
  };
  
  const useStyles = makeStyles((theme) =&gt; ({
    content: {
      flexGrow: 1,
      height: &quot;100vh&quot;,
      overflow: &quot;auto&quot;
    },
    appBarSpacer: theme.mixins.toolbar,
    container: {
      paddingTop: theme.spacing(4),
      paddingBottom: theme.spacing(4)
    },
    paper: {
      padding: theme.spacing(2),
      display: &quot;flex&quot;,
      overflow: &quot;auto&quot;,
      flexDirection: &quot;column&quot;,
      elevation: 3
    }
  }));
  
  const App = () =&gt; {
    const classes = useStyles();
  
    return (
      &lt;main className={classes.content}&gt;
        &lt;div className={classes.appBarSpacer} /&gt;
        &lt;Container maxWidth=&quot;lg&quot; className={classes.container}&gt;
          &lt;Grid item xs={12}&gt;
            &lt;Paper className={classes.paper}&gt;
              &lt;DataGrid
                rows={rows}
                columns={columns}
                pageSize={10}
                columnBuffer={8}
                autoHeight
              /&gt;
            &lt;/Paper&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={3} style={{ padding: 20 }}&gt;
            &lt;Button
              variant=&quot;contained&quot;
              color=&quot;primary&quot;
              startIcon={&lt;AddIcon /&gt;}
              onClick={() =&gt; {
                console.log(&quot;new&quot;);
              }}
            &gt;
              New
            &lt;/Button&gt;
          &lt;/Grid&gt;
        &lt;/Container&gt;
      &lt;/main&gt;
    );
  };
  
  export default App;
  
  </code></pre>