Pagination in material-react-table disabled

Question

I'm using material-react-table library and I fetching my data from api and sort and search easily without problems but the pagination is not working cause the buttons of the pagination are disabled I try to read documentation but I found no thing

import { useMemo, useState } from "react";
import {
  MaterialReactTable,
  type MRT_ColumnDef,
  // type MRT_ColumnFiltersState,
  type MRT_PaginationState,
  type MRT_SortingState,
} from "material-react-table";
import {
  IconButton,
  MenuItem,
  Tooltip,
  ListItemIcon,
  Typography,
  Rating,
} from "@mui/material";
import RefreshIcon from "@mui/icons-material/Refresh";
import DeleteIcon from "@mui/icons-material/Delete";
import DeleteModal from "../../../components/admin/modals/DeleteModal";
import useTableQueryHook from "../../../hooks/useTableQueryHook";
import {Link as RouterLink} from "react-router-dom"
import Link from "@mui/material/Link";


type Props = {
    id:string
}    

const ProductReviews = ({id}: Props) => {

 
   const [globalFilter, setGlobalFilter] = useState("");
   const [sorting, setSorting] = useState<MRT_SortingState>([]);
   const [pagination, setPagination] = useState<MRT_PaginationState>({
     pageIndex: 1,
     pageSize: 10,
   });
   const {
     data: cateegories,
     isError,
     isRefetching,
     isLoading,
     refetch,
   } = useTableQueryHook({
     sorting,
     globalFilter,
     pagination,
     url: `review/${id}`,
     selectedProp: "reviews",
     queryName: "getReviews",
   });

    const columns = useMemo<MRT_ColumnDef<RivewsListType>[]>(
      () => [
        // columns here
      ],
      []
    );
   const [openDelete, setOpenDelete] = useState(false);
   const [idToDelete, setIdToDelete] = useState("");
  return <>
    <MaterialReactTable
      columns={columns}
      data={cateegories ?? []} //data is undefined on first render
      // initialState={{ showColumnFilters: true }}
      // manualFiltering
      // enableFilters={false}
      manualPagination
      enablePagination
      manualSorting
      enableRowActions
      renderRowActionMenuItems={({ closeMenu, row }) => [
        <MenuItem
          key={1}
          onClick={() => {
            setIdToDelete(row.original._id);
            setOpenDelete(true);
            closeMenu();
          }}
          sx={{ m: 0, color: "red" }}
        >
          <ListItemIcon>
            <DeleteIcon sx={{ color: "red" }} />
          </ListItemIcon>
          Delete
        </MenuItem>,
      ]}
      muiToolbarAlertBannerProps={
        isError
          ? {
              color: "error",
              children: "Error loading data",
            }
          : undefined
      }
      // onColumnFiltersChange={setColumnFilters}
      onGlobalFilterChange={setGlobalFilter}
      onPaginationChange={setPagination}
      onSortingChange={setSorting}
      renderTopToolbarCustomActions={() => (
        <Tooltip arrow title="Refresh Data">
          <IconButton onClick={() => refetch()}>
            <RefreshIcon />
          </IconButton>
        </Tooltip>
      )}
      state={{
        globalFilter,
        isLoading,
        pagination,
        showAlertBanner: isError,
        showProgressBars: isRefetching,
        sorting,
      }}
    />
    
      </>
  
}

export default ProductReviews
enter image description here

import { useQuery, keepPreviousData } from "@tanstack/react-query";
import {
  type MRT_PaginationState,
  type MRT_SortingState,
} from "material-react-table";
import fetchData from "../utils/fetchData";
type Props = {
  sorting: MRT_SortingState;
  globalFilter: string;
  pagination: MRT_PaginationState;
  url:string;
  selectedProp?:string;
  queryName:string
};

const useTableQueryHook = ({
  sorting,
  globalFilter,
  pagination,
  url,
  selectedProp,
  queryName
}: Props) => {
  return useQuery({
    queryKey: [
      queryName,
      globalFilter, //refetch when globalFilter changes
      pagination.pageIndex, //refetch when pagination.pageIndex changes
      pagination.pageSize, //refetch when pagination.pageSize changes
      sorting, //refetch when sorting changes
    ],
    queryFn: async () => {
      const res: any = await fetchData({
        url: `/${url}?page=${pagination.pageIndex}&size=${
          pagination.pageSize
        }&search=${globalFilter ? globalFilter : ""}&sort=${sorting
          .map((s) => `${s.desc ? "-" : ""}${s.id}`)
          .join(",")}`,
        method: "GET",
        token: localStorage.getItem("token") || "",
      });
      return selectedProp&&res.data[selectedProp] || res.data;
    },
    refetchOnWindowFocus: false,
    refetchOnMount: false,
    placeholderData: keepPreviousData,
    staleTime: 300000,
  });
};

export default useTableQueryHook;

I tried to read docs and ask chatGBT and bard but I can't solve it

Answer 1

You need to pass in the enablePagination={true} prop to enable pagination. Read more on here