title: Auto Refresh React Table upon success of the delete action server side
body: <p>How can i refresh the react-table upon editing/deleting a data (server-side based), Here's my code so far</p>
  <pre><code>import React,{useState,useEffect} from 'react'
  import { useTable, usePagination } from 'react-table'
  // import {TableContainer} from './?'
  import Table from './TableContainer'
  import axios from 'axios';
  
  // Let's add a fetchData method to our Table component that will be used to fetch
  // new data when pagination state changes
  // We can also add a loading state to let our table know it's loading new data
  
  function App() {
    const columns = React.useMemo(
      () =&gt; [
        {
          Header: 'Name',
          columns: [
            {
              Header: 'name',
              accessor: 'name',
            },
            {
              Header: 'Last Name',
              accessor: 'lastName',
            },
          ],
        },
        {
          Header: 'Info',
          columns: [
            {
              Header: 'Age',
              accessor: 'age',
            },
            {
              Header: 'Visits',
              accessor: 'visits',
            },
            {
              Header: 'Status',
              accessor: 'status',
            },
            {
              Header: 'Profile Progress',
              accessor: 'progress',
            },
            {
              Header: 'Action',
              accessor: '',
              id: 'edit',
              accessor: 'id',
              Cell: ({value}) =&gt; (&lt;button onClick={() =&gt; editData(value)} data-id={value}&gt;Edit&lt;/button&gt;)
            },
            
          ],
        },
      ],
      []
    )
  
    // We'll start our table without any data
    const [data, setData] = React.useState([])
    const [loading, setLoading] = React.useState(false)
    const [pageCount, setPageCount] = React.useState(0)
    const [ totalPages, setTotalPages ] = useState(0);
    const [ sizePerPage, setSizePerPage ] = useState(10);
    const [ page, setPage ] = useState(0);
    const [ filtered, setFiltered ] = useState(&quot;&quot;);
    const fetchIdRef = React.useRef(0)
  
    const fetchData = React.useCallback(({ pageSize, pageIndex,filtered }) =&gt; {
        console.log(filtered);
        setLoading(true);
  
          axios.get(`http://127.0.0.1:8000/api/schools?q=${filtered}&amp;sizePerPage=${pageSize}&amp;page=${pageIndex+1}`)
          .then((res)=&gt; {
              setData(res.data.data);
              setSizePerPage(res.data.meta.per_page)
              setPage(res.data.meta.current_page)
              setPageCount(Math.ceil(res.data.meta.total  / pageSize))
              setLoading(false)
          });
    }, [])
  
    function editData(name) { 
      setLoading(true);
      console.log(name)
      console.log(sizePerPage);
      axios.delete(`http://127.0.0.1:8000/api/schools/${name}`)
  
      .then((res) =&gt;{
        
        //  fetchData(sizePerPage);
      })
    }
  
  
    return (
        &lt;Table
          columns={columns}
          data={data}
          fetchData={fetchData}
          loading={loading}
          pageCount={pageCount}
          filtered={filtered}
          filterable
        /&gt;
    )
  }
  
  export default App
  </code></pre>
  <p>When I call the fetch data upon the response, it can't access the callback param of <em>pageSize,pageIndex, filtered</em> I've already try to call it with params but it gives me an error that the pageSize,pageIndex are now undefined</p>
  <p>What am I doing wrong?</p>