title: Material-UI: DataGrid server-side pagination issue when setting rowCount
body: <p>So I just started using <a href="https://material-ui.com/" rel="nofollow noreferrer">Material UI</a> and pretty much I am loving it. Now, we are working on a project that involves data from users, employees and addresses in a specific city here in Philippines and I decided to use a table to display it to the client since I find this much easier. So, this table needs to be paginated, sorted, filtered, etc. and we are doing it in the server's side. Apparently, client needs to send couple of data like <code>{ page: 1, page_size: 50, ....}</code> and that's what we did in my react.</p>
  <p>The problem that I have right now is I think it is with the <a href="https://material-ui.com/components/data-grid/" rel="nofollow noreferrer"><code>DataGrid</code></a>. I think the table does not re-render the <code>rowCount</code> after fetching the <code>totalRows</code> data in the database. I have the sandbox <a href="https://codesandbox.io/s/prod-wood-m5nit?file=/src/App.js" rel="nofollow noreferrer">here</a> <em>(PS: You have to enlarge the output screen to have the <code>rowsPerPageOptions</code>  visible.)</em> But as you can notice in there the first time it loads the <strong>next arrow</strong> is disabled and it does not re-render the time the <strong>actual data</strong> including the number of rows was loaded. But if you keep navigating like changing the page size it goes available like nothing is wrong.</p>
  <p>I'm kind of stuck with this issue right now and I don't even know if I am using it the right way. Any help will be appreciated.</p>
  <pre class="lang-js prettyprint-override"><code>import { useState, useEffect } from &quot;react&quot;;
  import { DataGrid } from &quot;@material-ui/data-grid&quot;;
  import { Box } from &quot;@material-ui/core&quot;;
  
  const dummyColorsDB = [
    { id: 1, color: &quot;red&quot; },
    { id: 2, color: &quot;green&quot; },
    { id: 3, color: &quot;blue&quot; },
    { id: 4, color: &quot;violet&quot; },
    { id: 5, color: &quot;orange&quot; },
    { id: 6, color: &quot;burgundy&quot; },
    { id: 7, color: &quot;pink&quot; },
    { id: 8, color: &quot;yellow&quot; },
    { id: 9, color: &quot;magenta&quot; },
    { id: 10, color: &quot;random color&quot; },
    { id: 11, color: &quot;another random color&quot; },
    { id: 12, color: &quot;last one&quot; }
  ];
  
  export default function App() {
    const [data, setData] = useState({
      loading: true,
      rows: [],
      totalRows: 0,
      rowsPerPageOptions: [5, 10, 15],
      pageSize: 5,
      page: 1
    });
  
    const updateData = (k, v) =&gt; setData((prev) =&gt; ({ ...prev, [k]: v }));
  
    useEffect(() =&gt; {
      updateData(&quot;loading&quot;, true);
  
      setTimeout(() =&gt; {
        const rows = dummyColorsDB.slice(
          (data.page - 1) * data.pageSize,
          (data.page - 1) * data.pageSize + data.pageSize
        );
  
        console.log(rows);
  
        updateData(&quot;rows&quot;, rows);
        updateData(&quot;totalRows&quot;, dummyColorsDB.length);
        updateData(&quot;loading&quot;, false);
      }, 500);
    }, [data.page, data.pageSize]);
  
    return (
      &lt;Box p={5}&gt;
        &lt;DataGrid
          density=&quot;compact&quot;
          autoHeight
          rowHeight={50}
          //
          pagination
          paginationMode=&quot;server&quot;
          loading={data.loading}
          rowCount={data.totalRows}
          rowsPerPageOptions={data.rowsPerPageOptions}
          page={data.page - 1}
          pageSize={data.pageSize}
          rows={data.rows}
          columns={[{ field: &quot;color&quot;, headerName: &quot;Color&quot;, flex: 1 }]}
          onPageChange={(data) =&gt; {
            updateData(&quot;page&quot;, data.page + 1);
          }}
          onPageSizeChange={(data) =&gt; {
            updateData(&quot;page&quot;, 1);
            updateData(&quot;pageSize&quot;, data.pageSize);
          }}
        /&gt;
      &lt;/Box&gt;
    );
  }
  </code></pre>