Reset pagination to first page

[rafaelnogueira1]

Estou usando paginação com SSR e para obter os dados está funcionando corretamente.
Mas se quando uso a paginação para por exemplo ir até a página 10 e após isso faço uma nova busca, a paginação ativa não retorna para o 1.
No caso está fazendo uma nova busca enviando o pageIndex da pagina que estou no momento.
Como seria pra alterar o pageIndex e fazer uma busca correta?

I am using pagination with SSR and to get the data is working correctly.
But when i paginate, for example to go to page 10 and after that i make a new search, the active page does not return to 1.
It's send the actual pageIndex in every search.
How would it be to change the pageIndex and do a correct search?

Table Component

const Table = ({
    columns,
    data,
    rowStriped,
    columnStriped,
    columnClassName,
    rowClassName,
    rowFeatured,
    rowFeaturedClassName,
    pageNumber,
    loading,
    fetchData,
    pagination,
    handlePagination,
    rowsPerPage,
}) => {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        prepareRow,
        page,
        canPreviousPage,
        canNextPage,
        pageOptions,
        gotoPage,
        nextPage,
        previousPage,
        state: { pageIndex, pageSize },
    } = useTable(
        {
            columns,
            data,
            initialState: { pageIndex: 0, pageSize: rowsPerPage },
            pageCount:  data / rowsPerPage,
        },
        usePagination
    );

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

    return (
        <>
            <div className={style.container} {...getTableProps()}>
                {headerGroups.map((headerGroup) => (
                    <div {...headerGroup.getHeaderGroupProps()}>
                        <header className={classNames(style.header, style.block, rowClassName)}>
                            {headerGroup.headers.map((column) => (
                                <div
                                    className={classNames(
                                        style.header_item,
                                        {
                                            [style.columnStriped]: columnStriped,
                                        },
                                        columnClassName
                                    )}
                                    {...column.getHeaderProps()}
                                >
                                    {column.render('Header')}
                                </div>
                            ))}
                        </header>
                    </div>
                ))}
                <div className={style.body} {...getTableBodyProps()}>
                    {loading ? (
                        <TableShimmer rows={pageSize} />
                    ) : (
                        <>
                            {!page.length ? (
                                <div className={style.contentNotFound}>
                                    <p>Nenhuma informação foi encontrada.</p>
                                </div>
                            ) : (
                                page.map((row) => {
                                    prepareRow(row);
                                    const featured = Object.values(row.values).find(
                                        (value) => value === rowFeatured
                                    )
                                        ? style.rowFeatured
                                        : '';
                                    return (
                                        <div
                                            className={classNames(
                                                style.content,
                                                style.block,

                                                {
                                                    [style.rowStriped]: rowStriped,
                                                },
                                                rowClassName,
                                                featured
                                            )}
                                            {...row.getRowProps()}
                                        >
                                            {row.cells.map((cell) => {
                                                return (
                                                    <div
                                                        className={classNames(
                                                            style.content_item,
                                                            {
                                                                [style.columnStriped]: columnStriped,
                                                                [rowFeaturedClassName]: featured,
                                                            },
                                                            columnClassName
                                                        )}
                                                        data-name={cell.column.Header}
                                                        {...cell.getCellProps()}
                                                    >
                                                        <>
                                                            {cell.column.renderColumn
                                                                ? cell.render('renderColumn')
                                                                : cell.render('Cell')}
                                                        </>
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    );
                                })
                            )}
                        </>
                    )}
                </div>
            </div>
            {page.length > 0 && pagination && (
                <Pagination
                    active={pageIndex}
                    pages={pageOptions}
                    previousPage={previousPage}
                    nextPage={nextPage}
                    gotoPage={gotoPage}
                    canPreviousPage={canPreviousPage}
                    canNextPage={canNextPage}
                />
            )}
        </>
    );
};

App Component

const [dates, setDates] = useState([moment().startOf('month'), moment()]);
    const [transactions, setTransactions] = useState([]);
    const [pageNumber, setPageNumber] = useState(0);
    const [loading, setLoading] = useState(false);

    const { profile } = useSelector((state) => state.authentication);

    const getTransactions = useCallback(
        async ({ pageIndex, pageSize }) => {
            const params = {
                id: profile.id,
                start_date: moment(dates[0]).format('YYYY-MM-DD'),
                end_date: moment(dates[1]).format('YYYY-MM-DD'),
                limit: pageSize,
                offset: pageIndex * pageSize,
            };

            setLoading(true);
            try {
                    const { count, results } = await transactionById(params);

                    const transactionsData = results.map((item) => {
                        const description = item.points_type.name;
                        const transactionDate = item.created
                            ? moment(item.created).format('DD/MM/YYYY')
                            : '';
                        const expiresDate = item.valid_to
                            ? moment(item.valid_to).format('DD/MM/YYYY')
                            : '';

                        return { ...item, description, transactionDate, expiresDate };
                    });
                    setPageNumber(Math.ceil(count / pageSize));
                    setTransactions(transactionsData);
                    setLoading(false);
            } catch (err) {
                setLoading(false);
                throw new Error(err);
            }
        },
        [dates]
    );

    const handleDate = (date) => {
            setDates(date);
    };

    return (
                <Table
                    columns={columns}
                    data={transactions}
                    columnClassName={style.column}
                    rowClassName={style.row}
                    rowFeatured="C"
                    rowFeaturedClassName={style.featured}
                    pageNumber={pageNumber}
                    fetchData={getTransactions}
                    loading={loading}
                />
    );
};

[BrianMitchL]

I've solved for this by setting a ref to true to track if state is being updated from "internal table state" vs external state. setFetchInfo is a state updater for table state params that results in a fetch in the parent component.

After the useTable hook:

// use this ref to keep track of updating internal table state
const tableStateUpdateRef = React.useRef(false);

React.useEffect(() => {
  tableStateUpdateRef.current = true;
  setFetchInfo({ sorted: sortBy, pageIndex, pageSize });
}, [setFetchInfo, sortBy, pageIndex, pageSize]);

// reset the page index to 0 when sorting changes
React.useEffect(() => {
  gotoPage(0);
}, [gotoPage, sortBy]);

/* reset the page index to 0 when the table data updates due to something
other than internal table state changes
 */
React.useEffect(() => {
  if (!tableStateUpdateRef.current) {
    gotoPage(0);
  }
}, [data, gotoPage]);

// clear our ref when the data is loaded, after we perform any side effects
React.useEffect(() => {
  tableStateUpdateRef.current = false;
}, [data]);

[rafaelnogueira1]

Thanks man!! I have to make some changes for my project but it helps a lot 🎉

[justin-tufte]

@BrianMitchL Did you have to use this in combination with autoResetPage to stop the page index from resetting before calling gotoPage()?

[BrianMitchL]

I have manualPagination and manualSortBy enabled. I think that disabled the auto resetting too.

[justin-tufte]

Your solution worked out great, thank you! I added an extra ref to watch for the first time the table is loaded. My fetchData function was getting called before any data had been loaded from the server because the component was still mounting regardless of data being empty or populated.

[BrianMitchL]

Great! Good call-out, I'm fetching with react-query, so it seems to be de-duping/caching that for me.

[szmarci]

Isn't this result in duplicate fetch requests? When you:

1. Go the Nth page
2. Change a filter somewhere -> your request is fired for the first time
3. data have changed -> it is picked up by useEffect
4. gotoPage fires -> it changes pageIndex internally
5. It is picked up by the first useEffect -> your request is fired the second time

At least for me it does work like that.

const tableStateUpdateRef = React.useRef(false);

const fetchData = React.useCallback(({ pageSize, pageIndex }) => {
  getData({page: pageIndex + 1})
}, []);

// Listen for changes in pagination and use the state to fetch our new data
React.useEffect(() => {
  tableStateUpdateRef.current = true;
  fetchData({ pageIndex, pageSize });
}, [fetchData, pageIndex, pageSize]);

/* reset the page index to 0 when the table data updates due to something
other than internal table state changes */
React.useEffect(() => {
  if (!tableStateUpdateRef.current) {
    gotoPage(0);
  }
}, [data, gotoPage]);

// clear our ref when the data is loaded, after we perform any side effects
React.useEffect(() => {
  tableStateUpdateRef.current = false;
}, [data]);

getData is an action in my redux store that gets the data and it is fired on a Dropdown change.

[BrianMitchL]

Hmm, that doesn't surprise me. I am using react-query for my table, so the results from that first page/duplicate calls are cached so extra requests aren't being made. It's difficult to "reach into" react-table state and handling internal actions across multiple plugins. I think v8 will help make things like this a lot easier to implement.

[umarluqman]

Hi @BrianMitchL, I wonder how do you pass the async function to react-table if you are using react-query. Is it with refetch function? Because in current version of react-query, the refetch function doesn't accept params.

Curious on how do you pass the internal table state to react query hook

[BrianMitchL]

I added an example to the docs: https://react-table-omega.vercel.app/docs/examples/sub-components-lazy You would do your async data fetching (with react-query, or something else) in the SubRowAsync component in that example.

[A110SHT]

I solved for this these two lines of code.

let paglink = document.querySelectorAll('.page-item');
 paglink[1].firstChild.click();