Open nikilshetty6795 opened 12 months ago
I'm running into the same issue. I wonder if there's a way to attach those events after the data has loaded.
edit:
Using paginationComponent does not seem to trigger anything inside it on first load, so just a bit of extra work to create your own buttons and logic
Also getting this on the latest version of NextJs. Is there a workaround for this that doesn't involve reinventing the wheel by creating our own pagination component?
Issue Check list
styled-components
Describe the bug
On remote pagination when onChangeRowsPerPage={handlePerRowsChange} onChangePage={handlePageChange} is added with useEffect its sending multiple request to server i.e when ever a page loads handlePerRowsChange and handlePageChange runs without any interactions on pageload.
To Reproduce
Steps to reproduce the behavior:
create a page add useEffect
useEffect(() => { if (effectRan.current === true) { getUsers(1); }
}, []);
//get users to fetch the data const getUsers = async (page) => { setLoading(true); const response = await customFetch.get(
/api_endpont?page=${page}&per_page=${perPage}
); console.log("respone", response.data.result.userList); if (response.data.result.userList !== undefined) { setUsers(response.data.result.userList); } setTotalRows(response.data.result.totalCount.count); setLoading(false); };const handlePageChange = (page) => { console.log("handle page cjhange"); getUsers(page); };
// on change in page size change the data as per the request const handlePerRowsChange = async (newPerPage, page) => { console.log("handlePerRowChange"); setLoading(true);
};
<DataTable fixedHeader fixedHeaderScrollHeight="80vh" progressPending={loading} columns={columns} data={users} pagination paginationServer paginationTotalRows={totalRows} onChangeRowsPerPage={handlePerRowsChange} onChangePage={handlePageChange} />
Expected behavior
on page load handlePerRowsChange and handlePageChange runs and prints "handle page cjhange" and "handlePerRowChange" by default this is making the multiple request to server
Versions (please complete the following information)