MUIDataTable server side pagination - "no matching records exist"- when I move to the next page. Even though data is returned on the network tab

Question

I am using MUIDatatable on a next js app. I have implemented server side pagination where I send the offset value and the limit as url params , and the data is returned as it should by the api -on each page change. However, the data is only displayed on the first page. When I navigate to the next page, i shows -"no matching records exist" - despite the data being returned by the api for that specific page. Also when I click to go back to the first page, the page 2 data displays in a flash on the first page before it defaults to the actual page 1 data. Could someone point me to what I have missed ?

Datatable.jsx

const   Datatable = () => {

const [data, setData] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [page, setPage] = useState(0);
  const offset = page * 10

  const getData = async () => {
    try {
      const response = await axios.get(`${process.env.url}/provider/api/v1/data&offset=${offset}&limit=10`)

    setData(response.data.items)
     setIsLoaded(true);
    } catch (error) {
      console.log(error)
      setIsLoaded(true);
    }
  }
}

const columns = [name: "xxx", label: "XXXX", options: {}]

const options = {
  viewColumns: true,
  selectableRows: "multiple" ,
  fixedSelectColumn: true,
  tableBodyHeight: 'auto',
  onTableChange: (action, tableState) => {
    if (action === "changePage") {
      
      setPage(tableState.page);
      setIsLoaded(false);
    } else {
      console.log("action not handled.");
    }
  },
  serrverSide: true,
  count: 100,
  textLabels: {
    body: {
      noMatch: isLoaded?"Sorry, no matching records exist"
      :<div className="flex-grow-1 d-flex align-items-center justify-content-end">
        <FadeLoader />
        </div>,
      toolTip: "Sort",
      columnHeaderTooltip: column => `Sort for ${column.label}`
    },
    pagination: {
      next: "Next Page",
      previous: "Previous Page",
      rowsPerPage: "Rows per page:",
      displayRows: "of",
    },
    viewColumns: {
      title: "Show Columns",
      titleAria: "Show/Hide Table Columns",
    },
  }
}

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

return (

        <MUIDataTable 
          columns={columns}
          data={data}
          options={options}
        />
  )

export default Datatable

Answer 1

What worked for me here was I had not set serverSide: true, in the options