custom pagination and filtering not working in react js

Question

i want to do pagination with api ,when i fileter with with NO and when i want to go to next page within that filter its redirecting to default filter,below is my code i want to do pagination with api ,when i fileter with with NO and when i want to go to next page within that filter its redirecting to default filter,below is my code

        try {

                let val = (typeof status[0] == "undefined" ? '' : status[0]);
                if(val.toLowerCase() === 'yes'){
                    val = false;
                } else {
                    val = true;
                }

                let res = await axios(`${process.env.REACT_APP_API_URL}messages?page=${page}&limit=10&limit=10&status=${val}`, {
                    headers: {
                        "x-access-token": cookies.get("token"),
                        "Content-Type": "application/json",
                    },
                });

                console.log(res,'test')
                setData({ tableData: res.data.messages, isFetching: false });
                setCurrentPage(res.data.currentpage);


        } catch (err) {
            console.log("############");
        }
    };
  let opt = {
        selectableRows: "none",
        responsive: "scrollFullHeight",
        serverSide: true,
        count: count,
        onTableChange: (action, tableState) => {
            // a developer could react to change on an action basis or
            // examine the state as a whole and do whatever they want

            switch (action) {
                case "changePage":
                    fetchData1(tableState.page,tableState.rowsPerPage);
                    break;
                case "filterChange":
                    fetchData1(tableState.page,tableState.rowsPerPage,tableState.filterList[4]);
                    break;

            }
        }
    }

 <React.Fragment>
            {data.isFetching ? (
                <div className={classes.progressBarCont}>
                    <CircularProgress color="secondary" />
                </div>
            ) : (
                <React.Fragment>
                    <PageTitle title="List Of Messages" />
                    <Grid container spacing={3}>
                        <Grid item xs={12}>
                            <MUIDataTable
                                title="Messages List"
                                data={messageArr}
                                columns={[
                                    {
                                        name: "room",
                                        label: "Room",
                                        options: {
                                            filter: true,
                                            sort: true,
                                        },
                                    },
                                    {
                                        name: "sender",
                                        label: "Sender",
                                        options: {
                                            filter: false,
                                        },
                                    },
                                    {
                                        name: "message",
                                        label: "Message",
                                        options: {
                                            filter: false,
                                        },
                                    },
                                    {
                                        name: "sender",
                                        label: "Sender",
                                        options: {
                                            filter: false,
                                        },
                                    },
                                    {
                                        name: 'unanswered',
                                        label: 'Status',
                                        options: {
                                            filterType: 'dropdown',
                                            customFilterListRender: value => `Status: ${value}`,
                                            filterOptions: {
                                                names: ["No","Yes"],
                                                logic(unanswered, filters) {

                                                }
                                            },
                                        },
                                    },
                                ]}
                                options={opt}
                            />
                        </Grid>
                    </Grid>
                </React.Fragment>
            )}
            <ToastContainer />
        </React.Fragment> ```

Answer 1

First of you did not use page in you opt json for paging. you have to use page like:

let opt = {
    selectableRows: "none",
    responsive: "scrollFullHeight",
    serverSide: true,
    count: count,
    page: page,
    onTableChange: (action, tableState) => {
            switch (action) {
                case "changePage":
                case "changeRowsPerPage":
                    changePage(tableState);
                    break;
                case "search":
                    search(tableState);
                    break;
            }
        },

Then you should write two function changePage and search where you should call your api. but keep it mind that you must store correct tableState using searchText, filtering criteria and page information like pageNo, rowsPerPage and so on.