title: How to delete a specific row in Material UI DataGrid (Reactjs)
body: <p>I'm starting this project in react &amp; currently it's going well.
  However, I'm having an issue.</p>
  <p>My desired functionality is this: I desire to delete every row that you see where the checkbox for that row is clicked. For example, if I click the checkbox in rows 1 &amp; 3, I want rows 1 &amp; 3 to be deleted. I also want to keep track of the rows that I decide to delete.</p>
  <p>The issue is that I have no idea how to do that, and even after doing research I still feel stuck on how to approach this problem.</p>
  <p>Currently I'm populating this table with some sample JSON data I found online, so don't mind the weird data that's present. Also, if anybody has recommendations for an easier or cleaner way to achieve this, then feel free to let me know about it in the comments.</p>
  <p>Here's the code:</p>
  <pre><code>import React, { Component } from 'react';
  import { DataGrid } from '@material-ui/data-grid';
  import Button from '@material-ui/core/Button';
  
  
  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('firstName') || ''} ${params.getValue('lastName') || ''}`,
      },
      { field: 'city', headerName: 'City', width: 100 },
      { field: 'state', headerName: 'State', width: 100 },
    ];
    
    const rows = [
      { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35, city: 'Milwaukee', state: 'Wisconsin' },
      { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42, city: 'Dubuque', state: 'Iowa' },
      { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45, city: 'Appleton', state: 'Wisconsin'},
      { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16, city: 'Madison', state: 'Wisconsin' },
      { id: 5, lastName: 'Targaryenmnsdlfbsjbgjksbgksbfksfgbk', firstName: 'Daenerys', age: null, city: 'Green Bay', state: 'Wisconsin' },
      { id: 6, lastName: 'Melisandre', firstName: null, age: 150, city: 'San Antonio', state: 'Texas' }, 
      { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44, city: 'Dallas', state: 'Texas' },
      { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36, city: 'Brooklyn', state: 'New York' },
      { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65, city: 'Toledo', state: 'Ohio' },
      { id: 10, lastName: 'Larry', firstName: 'King', age: 105, city: 'Chicago', state: 'Illiniois' },
      { id: 11, lastName: 'Snow', firstName: 'Jon', age: 35, city: 'Milwaukee', state: 'Wisconsin' },
      { id: 12, lastName: 'Lannister', firstName: 'Cersei', age: 42, city: 'Dubuque', state: 'Iowa' },
      { id: 13, lastName: 'Lannister', firstName: 'Jaime', age: 45, city: 'Appleton', state: 'Wisconsin'},
      { id: 14, lastName: 'Stark', firstName: 'Arya', age: 16, city: 'Madison', state: 'Wisconsin' },
      { id: 15, lastName: 'Targaryenmnsdlfbsjbgjksbgksbfksfgbk', firstName: 'Daenerys', age: null, city: 'Green Bay', state: 'Wisconsin' },
      { id: 16, lastName: 'Melisandre', firstName: null, age: 150, city: 'San Antonio', state: 'Texas' }, 
      { id: 17, lastName: 'Clifford', firstName: 'Ferrara', age: 44, city: 'Dallas', state: 'Texas' },
      { id: 18, lastName: 'Frances', firstName: 'Rossini', age: 36, city: 'Brooklyn', state: 'New York' },
      { id: 19, lastName: 'Roxie', firstName: 'Harvey', age: 65, city: 'Toledo', state: 'Ohio' },
      { id: 20, lastName: 'Larry', firstName: 'King', age: 105, city: 'Chicago', state: 'Illiniois' },
    ];
  
  class ElgibleContracts extends Component {
      render(){
          return (
              &lt;div style={{textAlign: &quot;center&quot;}}&gt;
                  &lt;h1 style={{fontFamily: &quot;Stone&quot;}}&gt;Elgible Contracts&lt;/h1&gt;
                  &lt;span className=&quot;horizontal-line&quot; /&gt;
                  &lt;div className=&quot;centerDiv&quot; style={{ height: 380, width: 950}}&gt;
                      &lt;DataGrid rows={rows} columns={columns} pageSize={10} checkboxSelection /&gt;
                  &lt;/div&gt;
                  &lt;br /&gt;
                  &lt;Button variant=&quot;contained&quot; color=&quot;primary&quot; onClick={this.getInfo} &gt;Purge&lt;/Button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default ElgibleContracts;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/3RR0f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3RR0f.png" alt="The Screen that's displayed" /></a></p>