Pagination and Phange Change with MaterialReactTable

44 Views Asked by At

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:

enter image description here

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,
          }}
/>
0

There are 0 best solutions below