title: MUI: Moving pagination to the bottom of Datagrid
body: <p>I am trying to get my MUI Data grid component to the bottom it is currently sitting on top with the headers and I can't find anything about this in the MUI docs as their examples show the pagination always at the bottom by default. Also, I have no problem with the functionality of the Pagination</p>
  <p><a href="https://i.stack.imgur.com/kEwr2.png" rel="nofollow noreferrer">Pagination sitting on top of headers</a></p>
  <p>This is my Data grid</p>
  <pre><code>&lt;div style={{ height: &quot;100%&quot;, width: &quot;80%&quot; }}&gt;
        &lt;DataGrid
          rows={coinData}
          columns={columns}
          onPageChange={handlePageChange}
          page={currentPage}
          pageSize={25}
        /&gt;
      &lt;/div&gt;
  </code></pre>
  <p>This is my headers</p>
  <pre><code>const columns = [
      { field: &quot;name&quot;, headerName: &quot;Name&quot;, flex: 1 },
      { field: &quot;symbol&quot;, headerName: &quot;Symbol&quot;, wflex: 1 },
      { field: &quot;market_cap&quot;, headerName: &quot;Marketcap&quot;, flex: 1 },
      {
        field: &quot;market_cap_change_percentage_24h&quot;,
        headerName: &quot;Marketcap change&quot;,
        flex: 1,
      },
      { field: &quot;current_price&quot;, headerName: &quot;Current Price&quot;, flex: 1 },
      { field: &quot;low_24h&quot;, headerName: &quot;Low 24h&quot;, flex: 1 },
      { field: &quot;high_24h&quot;, headerName: &quot;High 24h&quot;, flex: 1 },
    ];
  </code></pre>