CODEWITHSUNDEEP
javascriptreactjsmui-datatable
aleena reji
aleena reji

Reputation: 109

Search is not working in mui-datatable, reactjs?

I am beginner to react js and using mui datatable search for the first time. But its not working.

I have a Callback function onSearchChange, that triggers when the search text value has changed.

function(searchText: string) => void

  onSearchChange: searchText => {
    console.log(searchText, 'searchText'); 
    const { apiFunctionToPassSearchValue } = this.props.actions;
    apiFunctionToPassSearchValue(
      { page: this.state.currentPage, size: this.state.pageLimit },
      searchText,
    );
  },

When I removed api function and put a console to check searchText , will show the correct text which I searched,it will take the value on onchange. But when I tried to make api call I am not able to enter a single alphabet in the search bar and also searchText is not taking the value property like when I entered "test" in the search bar and I put a console then search Text is taking one alphabet at a time. I am not able to pass the value to the api function.

Please help me.

Upvotes: 0

Views: 1515

Answers (1)

user10504922
user10504922

Reputation: 11

I had this issue earlier today. I found out that if you have "serverSide" set to true in your options, the search won't work.

Here's what worked for me:

const options = {
            responsive: "stacked",
            //serverSide: true,
            onSearchChange: (searchText) => {
                console.log("search: " + searchText);
            },
        };

Upvotes: 1

Related Questions