title: How to remove the status row in data grid table?
body: <p>Goal:<br />
  Not displaying the status row in the bottom.</p>
  <p>Problem:<br />
  How do you do it?</p>
  <p><a href="https://i.stack.imgur.com/jVuOC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jVuOC.png" alt="enter image description here" /></a></p>
  <p>CodeSandbox:<br />
  <a href="https://codesandbox.io/s/69384072-how-to-delete-multiple-rows-with-select-checkboxes-from-material-ui-data-grid-re-forked-p75sku?file=/demo.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/69384072-how-to-delete-multiple-rows-with-select-checkboxes-from-material-ui-data-grid-re-forked-p75sku?file=/demo.tsx</a></p>
  <p>Thank you!</p>
  <hr />
  <pre><code>import * as React from &quot;react&quot;;
  import IconButton from &quot;@mui/material/IconButton&quot;;
  import { DataGrid, GridRowsProp, GridColDef } from &quot;@mui/x-data-grid&quot;;
  import DeleteIcon from &quot;@mui/icons-material/Delete&quot;;
  
  const _rows: GridRowsProp = [
    { id: 1, col1: &quot;Hello&quot;, col2: &quot;World&quot; },
    { id: 2, col1: &quot;XGrid&quot;, col2: &quot;is Awesome&quot; },
    { id: 3, col1: &quot;Material-UI&quot;, col2: &quot;is Amazing&quot; },
    { id: 4, col1: &quot;Hello&quot;, col2: &quot;World&quot; },
    { id: 5, col1: &quot;XGrid&quot;, col2: &quot;is Awesome&quot; },
    { id: 6, col1: &quot;Material-UI&quot;, col2: &quot;is Amazing&quot; },
    { id: 7, col1: &quot;Material-UI&quot;, col2: &quot;is Amazing&quot; },
    { id: 8, col1: &quot;Hello&quot;, col2: &quot;World&quot; },
    { id: 9, col1: &quot;XGrid&quot;, col2: &quot;is Awesome&quot; },
    { id: 10, col1: &quot;Material-UI&quot;, col2: &quot;is Amazing&quot; },
    { id: 11, col1: &quot;Hello&quot;, col2: &quot;World&quot; },
    { id: 12, col1: &quot;XGrid&quot;, col2: &quot;is Awesome&quot; },
    { id: 13, col1: &quot;Material-UI&quot;, col2: &quot;is Amazing&quot; },
    { id: 14, col1: &quot;Hello&quot;, col2: &quot;World&quot; },
    { id: 15, col1: &quot;XGrid&quot;, col2: &quot;is Awesome&quot; },
    { id: 16, col1: &quot;Material-UI&quot;, col2: &quot;is Amazing&quot; },
    { id: 17, col1: &quot;Material-UI&quot;, col2: &quot;is Amazing&quot; },
    { id: 18, col1: &quot;Hello&quot;, col2: &quot;World&quot; },
    { id: 19, col1: &quot;XGrid&quot;, col2: &quot;is Awesome&quot; },
    { id: 20, col1: &quot;Material-UI&quot;, col2: &quot;is Amazing&quot; },
    { id: 21, col1: &quot;Hello&quot;, col2: &quot;World&quot; },
    { id: 22, col1: &quot;XGrid&quot;, col2: &quot;is Awesome&quot; },
    { id: 23, col1: &quot;Material-UI&quot;, col2: &quot;is Amazing&quot; },
    { id: 24, col1: &quot;Hello&quot;, col2: &quot;World&quot; },
    { id: 25, col1: &quot;XGrid&quot;, col2: &quot;is Awesome&quot; },
    { id: 26, col1: &quot;Material-UIII&quot;, col2: &quot;is Amazinggggg&quot; }
  ];
  
  export default function ControlledSelectionGrid() {
    const [rows, setRows] = React.useState(_rows);
    const [selectionModel, setSelectionModel] = React.useState([]);
    const columns: GridColDef[] = [
      { field: &quot;col1&quot;, headerName: &quot;Column 1&quot;, width: 150 },
      { field: &quot;col2&quot;, headerName: &quot;Column 2&quot;, width: 150 },
      {
        field: &quot;delete&quot;,
        width: 75,
        sortable: false,
        disableColumnMenu: true,
        renderHeader: () =&gt; {
          return (
            &lt;IconButton
              onClick={() =&gt; {
                const selectedIDs = new Set(selectionModel);
                // you can call an API to delete the selected IDs
                // and get the latest results after the deletion
                // then call setRows() to update the data locally here
                setRows((r) =&gt; r.filter((x) =&gt; !selectedIDs.has(x.id)));
              }}
            &gt;
              &lt;DeleteIcon /&gt;
            &lt;/IconButton&gt;
          );
        }
      }
    ];
  
    return (
      &lt;div style={{ width: &quot;100%&quot; }}&gt;
        &lt;DataGrid
          autoHeight
          rows={rows}
          columns={columns}
          checkboxSelection
          onSelectionModelChange={(ids) =&gt; {
            setSelectionModel(ids);
          }}
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>