v.8 - I need an example for pagination-controlled with v.8 alpha

[talatkuyuk]

I am implementing a react-table example for pagination-controlled (server side pagination) with v.8.

I use RTK Query for data fetching. Everything is fine, and RTK Query provides the fetched data into react-table instance without problem.

But, when I click the pagination button (next page, or previous page, or last page), pagination state in the react-table (pagination.pageIndex) changes accordingly without problem, this triggers re-fetching the data with the new pageIndex argument, then RTK Query provides the new data into the table instance, the fetched data shows for a couple of milliseconds, and then the pageIndex in the pagination state in the react-table is changed to zero (0) automatically which I couldn't understand. (Only pageIndex changes to zero, the other two (pageCount, pageSize) don't change.)

I tried to solve the problem during 2 days, but couldn't figure out what is the reason of pageIndex turns into zero automatically after the fetched data is supplied into table instance when I click the pagination buttons.

I omitted the rest of the code !

  type SuccessGetRecordsData<T> = {
    data: T[];
    totalCount: number;
    pagination:{
      pageIndex: number;
      pageCount: number;
      pageSize: number;
    };
  }; 

  const [tableData, setTableData] = useState<SuccessGetRecordsData<Authuser>>();

  const [queryOptions, setQueryOptions] = useState<GetAuthusersQueryParams>({ page: 4, size: 10 });
  const { isLoading, currentData } = useGetAuthusersQuery(queryOptions);  // RTK Query Hook

  // I supplied the weird initial pagination state, in order to figure out why pageIndex becomes 0 zero
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 1111,
    pageCount: 1111, // greater than 0 zero to ensure instance.getPageCount() returns the pagination.pageCount
    pageSize: 1111,
  }); 

  const [columns] = useState<typeof defaultColumns>(() => [...defaultColumns]);

  const instance = useTableInstance(table, {
    columns,
    data: tableData ? tableData.data : [], 
    manualPagination: true,
    state: {
      pagination,
    },
    onPaginationChange: setPagination,
    getCoreRowModel: getCoreRowModelSync(),
    debugTable: true,
  });

  useEffect(() => {
    if (currentData) {
      setTableData(currentData);

      // to ensure that the operation is very first fetch operation, if it is, update the react-table pagination state
      if (pagination.pageSize === 1111) {
        instance.setPagination(currentData.pagination); 
        // or setPagination(currentData.pagination) also works, I tried.
      }
    }
  }, [currentData]);

  useEffect(() => {
    // I don't want the useEffect is applied for the initial render for initial weird pagination state
    if (pagination.pageSize === 1111) return;  

    // if pagination.pageIndex is changed through clicking the buttons (prev button, or next button, or last button etc.)
    if (pagination.pageIndex !== tableData?.pagination.pageIndex) {
      setQueryOptions({. // update the query parameter for RTK query trigger for new fetch changing the page param
        ...queryOptions,
        page: pagination.pageIndex + 1,
      });
    }
  }, [pagination.pageIndex]);

As you see, I use setPagination function only once in the first useEffect, just for providing server side pagination information after the very first fetch. All the codes work, the first fetched data shows in the table, but as I said, when click the the pagination buttons, the new data is fetched, shows and after a couple of milliseconds the pageIndex in the react-table pagination state returns to zero unintentionally. (Consequently, this triggers additional data fetching to the first data page, If I continue to click the pagination buttons, the above behavior repeats, fetch-show-return to zero and the table shows only the first-data-page)

There is no example for pagination-controlled with v.8 alpha yet. I saw for the ver.7 https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/pagination-controlled

I suppose we need an example for pagination-controlled with v.8 alpha.

Maybe this is a bug for the react-table.

[tannerlinsley]

There's a new pagination-controlled example available for v8 now.

[talatkuyuk]

And I would like to mention that the author @tannerlinsley reminded Set options.autoResetPageIndex to false. And he made options.manualSorting default that to false. For more info #3900

Thank you for the example pagination-controlled

[Jamalahmad123]

Hi! @tannerlinsley is there any example with url parameter of react router dom