Help Needed: Encountering Challenges while doing Pagination.

[mjombanorman]

I'm encountering a challenge with pagination in Material-UI React Table. My API sends four variables to the next page: next page, previous page, row count, and data. The pagination works fine when I test it through the API, but when using Material-UI React Table, the rows don't seem to change when I click the next page button. The default page size is set to 10, and I have a total of 100 records. To enhance efficiency and speed, I want to send only the required records at a time. Can you help me understand how to make the rows update dynamically when I navigate to the next page in Material-UI React Table?

Fetch response

{
  "nextPage": "http://localhost:8000/store/products/?page=1&page_size=10",
  "prevPage": null,
  "rowCount": 100,
  "data": [...]
}

Below is my code

import React, { useEffect, useMemo, useState } from "react";
import {
  MaterialReactTable,
  useMaterialReactTable,
} from "material-react-table";
import api from "./helpers/Gateway";

const Products = () => {
    
  // State to hold product data
  const [data, setData] = useState([]);
  // State to track if there is an error during data fetching
  const [isError, setIsError] = useState(false);

  // State to indicate loading state
  const [isLoading, setIsLoading] = useState(false);
  // State to indicate refetching state
  const [isRefetching, setIsRefetching] = useState(false);

  // State to hold the total number of rows for pagination
  const [rowCount, setRowCount] = useState(0);

  // State to manage pagination settings (current page index and page size)
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });

 
    // Effect hook to fetch data when the component mounts or pagination changes
  useEffect(() => {
    const fetchData = async () => {
      // Set loading or refetching state based on whether data is already present
      if (!data.length) {
        setIsLoading(true);
      } else {
        setIsRefetching(true);
      }

      try {
        // Fetch data from the API based on pagination settings
        const response = await api.get(
          `store/products/?page=${pagination.pageIndex + 1}&page_size=${
            pagination.pageSize
          }`
        );
        const output = response.data;

        // Update state with fetched data and total row count
        setData(output.results);
        setRowCount(output.count);
      } catch (error) {
        // Set error state if there is an issue with data fetching
        setIsError(true);
        console.error(error);
        return;
      }

      // Reset loading, refetching, and error states after data fetch
      setIsError(false);
      setIsLoading(false);
      setIsRefetching(false);
    };

   fetchData();
   
  }, [data.length,pagination.pageIndex, pagination.pageSize]);

  // Definition of columns for the MaterialReactTable
  const columns = useMemo(
    () => [
      { accessorKey: "title", header: "Product", size: 150 },
      { accessorKey: "unit_price", header: "Unit Price", size: 150 },
      { accessorKey: "description", header: "Description", size: 200 },
      { accessorKey: "inventory", header: "Inventory", size: 200 },
      { accessorKey: "price_with_tax", header: "Price + Tax", size: 200 },
      { accessorKey: "collection", header: "Collection", size: 200 },
    ],
    []
  );

  // Create a MaterialReactTable using the custom hook
  const table = useMaterialReactTable({
    columns,
    data,
    rowCount,
   
    onPaginationChange: setPagination, // Callback for pagination changes
    state: {
      isLoading,
      pagination,
      showAlertBanner: isError,
      showProgressBars: isRefetching,
    },
  });

  // Render the MaterialReactTable component
  return <MaterialReactTable table={table} />;
};

export default Products;

Anyone with ideas on how to move forward ?

[KevinVandy]

I can help, but you're making a bunch of mistakes where it is clear that you have not looked that hard at the docs. It sounds like you want manual pagination, but have not included any of those table options at all in your code here
https://www.material-react-table.com/docs/examples/react-query

[mjombanorman]

Thanks!