MUIDataGrid

import React, { useEffect, useState } from "react";
import { DataGrid } from "@mui/x-data-grid";
import axios from "axios";

const DataGridWithDynamicPagination = () => {
  const [page, setPage] = useState(0);
  const [pageSize, setPageSize] = useState(5);
  const [rowCount, setRowCount] = useState(0);
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchData();
  }, [page, pageSize]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const response = await axios.get(
        `https://your-api-endpoint/data?page=${page}&pageSize=${pageSize}`
      );
      setData(response.data.items);
      setRowCount(response.data.totalCount); // Assuming your API returns total row count
    } catch (error) {
      console.error("Error fetching data: ", error);
    } finally {
      setLoading(false);
    }
  };

  const handlePageChange = (newPage) => {
    setPage(newPage);
  };

  const handlePageSizeChange = (newPageSize) => {
    setPageSize(newPageSize);
  };

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={data}
        columns={[
          { field: "id", headerName: "ID", width: 90 },
          { field: "name", headerName: "Name", width: 150 },
          { field: "age", headerName: "Age", width: 150 },
        ]}
        pagination
        paginationMode="server"
        rowCount={rowCount}
        pageSize={pageSize}
        onPageSizeChange={handlePageSizeChange}
        onPageChange={handlePageChange}
        loading={loading}
      />
    </div>
  );
};

export default DataGridWithDynamicPagination;