Pagination on Typescript

[iamrenzx]

I tried to follow the code here But the problem is if i convert it to Typescript pagination doesn't seem to work. If i change page and my data changes pageIndex state reverts back to 0. Here is my Table it does work if i convert it to JS.

Also i have created the react-table-config.ts

import React, { useEffect } from 'react';
import { useTable, useSortBy, usePagination } from 'react-table';
import { TableBasicProps } from './interface';
import TablePagination from '../pagination';


const TableBasic: React.FC<TableBasicProps> = ({ columns, data, fetchData, 
  pageCount: controlledPageCount, }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    pageOptions,
    page,
    gotoPage,
    previousPage,
    nextPage,
    setPageSize,
    canPreviousPage,
    canNextPage,

    state: { pageIndex, pageSize }
  } = useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0 }, // Pass our hoisted table state
      manualPagination: true, // Tell the usePagination
      // hook that we'll handle our own data fetching
      // This means we'll also have to provide our own
      // pageCount.
      pageCount: controlledPageCount,
    },
    useSortBy,
    usePagination
  );

  useEffect(() => {
    fetchData({ pageIndex, pageSize });
  }, [fetchData, pageIndex, pageSize]);

  return (
    <>
      <div className="table-basic table-container">
        <table
          className="table is-bordered is-striped is-fullwidth"
          {...getTableProps()}
        >
          <thead className="thead">
            {headerGroups.map((headerGroup) => (
              <tr className="tr" {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th
                    className="th"
                    {...column.getHeaderProps(column.getSortByToggleProps())}
                  >
                    {column.render('Header')}
                    <span>
                      {column.isSorted
                        ? column.isSortedDesc
                          ? '\u00a0\u00a0\u2193'
                          : '\u00a0\u00a0\u2191'
                        : ''}
                    </span>
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody className="tbody" {...getTableBodyProps()}>
            {page.map((row, i) => {
              prepareRow(row);
              return (
                <tr className="tr" {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return (
                      <td className="td" {...cell.getCellProps()}>
                        {cell.render('Cell')}
                      </td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <TablePagination
        pageIndex={pageIndex}
        pageSize={pageSize}
        pageOptions={pageOptions}
        gotoPage={gotoPage}
        previousPage={previousPage}
        nextPage={nextPage}
        setPageSize={setPageSize}
        canPreviousPage={canPreviousPage}
        canNextPage={canNextPage}
      />
    </>
  );
};

export default TableBasic;