How to change pagination in MaterialReactTable by resizing the grid that is created by ResponsiveGridLayout?

Question

I am using ResponsiveGridLayout from "react-grid-layout" and MaterialReactTable from "material-react-table".at first I shows just 5 rows of table but when I resize the div that has GalleryItem I want to show 10 rows of table. 10 is set for pageSize but the table did not rerender and did not shows 10 rows.how can I show 10 rows of table when the height of div increases by resizing and show 5 rows of table when the height of div is its initial value?

  const Gallery = () => {
        const [pageSize, setPageSize] = useState<number>(5);
    const handleResize = (items: any) => {
    items
      .forEach((item: any) => {
        if (item.h === 2) {
          setContentHeight("850px");
          setPageSize(() => 10);
        } else if (item.h === 1) {
          setContentHeight("350px");
          setPageSize(() => 5);
        }
      });
  };
        return   ( <ResponsiveGridLayout
        layouts={{
          lg: defaultLayout,
        }}
        rowHeight={rowHeight}
        cols={{
          lg: 6,
          md: 2,
          sm: 2,
          xs: 1,
          xxs: 1,
        }}
        breakpoints={{
          lg: 1200,
          md: 996,
          sm: 768,
          xs: 480,
          xxs: 0,
        }}
        resizeHandles={["e", "w", "s"]}
        onResizeStop={handleResize}
        >
        {galleries.map((item) => (
          <div key={item.id}>
            <GalleryItem
              messageItem={item}
              contentHeight={contentHeight}
              pageSize={pageSize}
            />
          </div>
        ))}
        </ResponsiveGridLayout>
        ) 
        } 

GalleryItem:

const GalleryItem = ({
    pageSize,
  })=>{
return ( <Table pageSize={pageSize} data={data} props={props} />)
  }

Table:

  const Table = ({ data, props ,pageSize}) => {
    return (
      <MaterialReactTable
        columns={columns}
        data={data}
        {...props}
      />
    );
  };

Answer 1

in Gallery, I should define pageSize for each key and and key is the id of each gallery item.

 const [pageSize, setPageSize] = useState<{ [key: string]: any }>({});

      useEffect(() => {
        galleries.forEach((galleryItem) => {
          setPageSize((prevPageSize) => ({ ...prevPageSize, [galleryItem.id]: 5 }));       
        });
      }, [galleries]);



const handleResize = useCallback(
    (layout: any, oldItem: any, newItem: any) => {
      const filteredGalleryTable = galleries.find(
        (galleryItem) =>
          galleryItem.id === newItem.i 
      );
  
      if (filteredGalleryTable) {
        if (newItem.h === 2) {
          setPageSize((prevPageSize) => ({
            ...prevPageSize,
            [filteredGalleryTable.id]: 10,
          }));
        } else if (newItem.h === 1) {
          setPageSize((prevPageSize) => ({
            ...prevPageSize,
            [filteredGalleryTable.id]: 5,
          }));
        }
      }
    },
    [galleries]
  );

in Table component I should apply the below changes:

const Table = ({ data, props, pageSize }) => {
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 5,
  });

  useEffect(() => {
    if (pageSize) {
      setPagination((prevPagination) => ({
        ...prevPagination,
        pageSize,
      }));
    }
  }, [pageSize]);
  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      onPaginationChange={setPagination}
      state={{ pagination }}
      {...props}
    />
  );