title: How to add buttons in material-ui data grid rows?
body: <p>I want to add buttons in each row of the material-ui data grid... But when I'm trying to do so, I see the output as follows (rather than the button it shows something like [object Object].
  <a href="https://i.stack.imgur.com/eg3NL.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Below is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { DataGrid } from "@mui/x-data-grid";
  import React, { useState } from "react";
  
  function App() {
    const columns = [
      { field: "id", headerName: "ID", width: 70 },
      { field: "firstName", headerName: "First name", width: 130 },
      { field: "lastName", headerName: "Last name", width: 130 },
      {
        field: "age",
        headerName: "Age",
        type: "number",
        width: 90,
      },
      {
        field: "fullName",
        headerName: "Full name",
        description: "This column has a value getter and is not sortable.",
        sortable: false,
        width: 160,
        valueGetter: (params) =&gt;
          `${params.getValue(params.id, "firstName") || ""} ${
            params.getValue(params.id, "lastName") || ""
          }`,
      },
      {
        field: "click",
        headerName: "Click",
        type: &lt;button /&gt;,    /*this field stores the buttons*/
        width: 90,
      },
    ];
    const [rows, setRows] = useState([
      {
        id: 1,
        lastName: "Snow",
        firstName: "&lt;a&gt;hello&lt;/a&gt;",
        age: 35,
        click: &lt;button&gt;Hello&lt;/button&gt;,   /*given a button to first row*/
      },
      { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
      { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
      { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
      { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
      { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
      { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
      { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
      { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
    ]);
    // setRows(
  
    // setRows(rows);
    // );
    const [count, setCount] = useState(0);
  
    const [arr, setArr] = useState([1, 2, 3]);
    return (
      &lt;&gt;
        &lt;p&gt;you pressed {count} times&lt;/p&gt;
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;/button&gt;
        &lt;div style={{ height: 400, width: "50%" }}&gt;
          &lt;DataGrid
            rows={rows}
            columns={columns}
            pageSize={5}
            rowsPerPageOptions={[5]}
            checkboxSelection
          /&gt;
        &lt;/div&gt;
        &lt;table&gt;
          {arr.map((n) =&gt; (
            &lt;tr&gt;${n}&lt;/tr&gt;
          ))}
        &lt;/table&gt;
        &lt;button
          onClick={(e) =&gt; {
            e.preventDefault();
            arr.push(4);
            console.log(arr);
            var t = [...rows, { id: 3 }];
            // rows.push({ lastName: "hello" });
            // setRows(t);
            setRows(t);
            console.log(rows);
            // document.title = arr;
            setArr(arr);
          }}
        &gt;
          add
        &lt;/button&gt;
      &lt;/&gt;
    );
  }
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>Also, after the button is inserted, how can I reference the current index or id of the row inside the button, suppose if at every click of button I need to show an alert which displays the information such as id and firstname for that row... how can i do that?</p>