title: Showing the new row in react-table on the current page
body: <p>I have been playing with ReactTable v7 for a while and have encountered the following problem: when the table is sorted and uses paginator sometimes adding (or editing) a row causes it to be outside the current page.</p>
  <p>You can see the problem here:
  <a href="https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-kitchen-sink" rel="nofollow noreferrer">https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-kitchen-sink</a></p>
  <ol>
  <li>Sort the table by First Name</li>
  <li>Press add</li>
  <li>Enter a record with First Name &quot;zzzzz&quot;</li>
  </ol>
  <p>The record is added but is currently hidden which confuses users.
  Is there a &quot;standard&quot; way to fix the issue? Am I missing something?</p>
  <p>In v6 I have done a workaround for it:</p>
  <pre><code>    React.useEffect(() =&gt; {
          if (editedElementId &amp;&amp; reactTable) {
              const { data } = reactTable.props;
  
              if (data &amp;&amp; data.length &gt; 0) {
                  const internal = reactTable.getResolvedState();
  
                  let position = -1;
                  internal.sortedData.forEach((row, i) =&gt; {
                      if (row._original.id === editedElementId) position = i;
                  });
  
                  if (position &gt;= 0) {
                      const pageNumber = Math.floor(position / pageSize);
                      setPage(pageNumber);
                  } else {
                      alert.info(&quot;Element not visible&quot;);
                  }
              }
          }
      }, [editedElementId]);
  
  ...
  
      &lt;ReactTable
         ref={(r) =&gt; {setReactTable(r);}}
  ...
  </code></pre>
  <p>But maybe there is a bulit-in way to achieve it?</p>