title: How do i place this DataGrid in Material Ui correctly?
body: <p><a href="https://i.stack.imgur.com/Cn4fg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cn4fg.png" alt="Dashboard Image" /></a></p>
  <p>I have tried  a lot of different solutions to make this grid perfectly fit in, i can not seem to understand material ui sizing within this space.
  As you can see the column titles are missing, and it's not centered in the middle.</p>
  <p>I have used the clipped drawer also from MUI which is placed inside of Box</p>
  <pre><code>import * as React from &quot;react&quot;;
  import { DataGrid } from &quot;@mui/x-data-grid&quot;;
  import { Container, Grid, Paper, Box } from &quot;@mui/material&quot;;
  
  const columns = [
    { field: &quot;id&quot;, headerName: &quot;ID&quot;, width: 90 },
    {
      field: &quot;firstName&quot;,
      headerName: &quot;First name&quot;,
      width: 150,
      editable: true,
    },
    {
      field: &quot;lastName&quot;,
      headerName: &quot;Last name&quot;,
      width: 150,
      editable: true,
    },
    {
      field: &quot;age&quot;,
      headerName: &quot;Age&quot;,
      type: &quot;number&quot;,
      width: 110,
      editable: true,
    },
    {
      field: &quot;fullName&quot;,
      headerName: &quot;Full name&quot;,
      description: &quot;This column has a value getter and is not sortable.&quot;,
      sortable: false,
      width: 160,
      valueGetter: (params) =&gt;
        `${params.row.firstName || &quot;&quot;} ${params.row.lastName || &quot;&quot;}`,
    },
  ];
  
  const rows = [
    { id: 1, lastName: &quot;Snow&quot;, firstName: &quot;Jon&quot;, age: 35 },
    { id: 2, lastName: &quot;Lannister&quot;, firstName: &quot;Cersei&quot;, age: 42 },
    { id: 3, lastName: &quot;Lannister&quot;, firstName: &quot;Jaime&quot;, age: 45 },
    { id: 4, lastName: &quot;Stark&quot;, firstName: &quot;Arya&quot;, age: 16 },
    { id: 5, lastName: &quot;Targaryen&quot;, firstName: &quot;Daenerys&quot;, age: null },
    { id: 6, lastName: &quot;Melisandre&quot;, firstName: null, age: 150 },
    { id: 7, lastName: &quot;Clifford&quot;, firstName: &quot;Ferrara&quot;, age: 44 },
    { id: 8, lastName: &quot;Frances&quot;, firstName: &quot;Rossini&quot;, age: 36 },
    { id: 9, lastName: &quot;Roxie&quot;, firstName: &quot;Harvey&quot;, age: 65 },
  ];
  
  export default function DataGridDemo() {
    return (
      &lt;Container&gt;
        &lt;Paper component={Box} width={1} height={700}&gt;
          &lt;DataGrid
            rows={rows}
            columns={columns}
            pageSize={5}
            rowsPerPageOptions={[5]}
            checkboxSelection
            disableSelectionOnClick
          /&gt;
        &lt;/Paper&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>