I am using MaterialReactTable on my pagae. I am fetching data from pgAdmin with endpoints. I can see my data both on the table and network. Right now I have 13 test data but that is going to change so it should be dynamic. I can see my total number of data at network as well. The problem is page change buttons wont activate and the total number of data shows incorrectly at that part:
I followed the document at MaterialReactTable page but I don't identify what is causing the problem.
const [pagination, setPagination] = useState({
pageIndex: 0,
pageSize: 10,
});
const myFunc = () => {
const start = pagination.pageIndex * pagination.pageSize;
let query = "?start=" + start + "&pageSize=" + pagination.pageSize;
...
dispatch(getDriverFilter({ query }))
.then((res) => {
setIsRefetching(false);
setRowCount(res.payload.data.total);
})
.then(setIsLoading(true));
};
...
<MaterialReactTable
displayColumnDefOptions={{
"mrt-row-actions": {
muiTableHeadCellProps: {
align: "center",
},
size: 120,
},
}}
columns={columns}
data={drivers}
editingMode="modal" //default
enableGlobalFilter={false}
manualFiltering
manualPagination ={true}
manualSorting
enableEditing
onColumnFiltersChange={setColumnFilters}
onGlobalFilterChange={setGlobalFilter}
onPaginationChange={setPagination}
onSortingChange={setSorting}
rowCount={rowCount}
state={{
columnFilters,
globalFilter,
isLoading: driverLoading,
pagination,
showProgressBars: isRefetching,
sorting,
}}
/>