Material-table: Searching in remote data

[yashSangai]

Describe the bug
When I try doing searching in the table, where the data is the remote data the page keeps on loading and searching does not happen. On every key press the page loads but no search happens. Also If i go on to next page and then perform searching it sends me back to the first page and the same above thing happens

To Reproduce
Go to https://mbrn.github.io/material-table/#/docz-examples-14-example-remote-data and try it out.

Expected behavior
Searching should happen on the page which I am currently in.

Additional context
Tell me any solution for this, if it is not a bug.

[mbrn]

Hi @yashSangai

If you use remoteData feature searching, filtering, paging, sorting should be handle in your query function. Table call data function on every change.

In example that you sent, i want to just show how remoteData works. In code data function does not care about search term.

[yashSangai]

Oh okay. Thanks for your response @mbrn
Can you tell me how will I implement searching through the query function for the remote data?

[mbrn]

Look at this sample code.

<MaterialTable
  data={query =>
    new Promise((resolve, reject) => {
      // use query to produce data. query contains search, filter, page and sort data. 
      fetch(url) // You can send query to your server directly. 
        .then(response => response.json())
        .then(result => {
          resolve({
            data: result.data,
            page: result.pageNumber
            totalCount: result.total,
          })
        })
    })
  }
/>

[cesoftinfo]

Or maybe disable search on key press, it would be better to start search on Enter press rather than sending request for remote data on every key press.

[yashSangai]

Oh okay. Thanks for the help @mbrn

[mbrn]

Or maybe disable search on key press, it would be better to start search on Enter press rather than sending request for remote data on every key press.

Hi @cesoftinfo ,

It uses debounce to minimize server requests. Currently interval is 200ms but it could be change with debounceInterval in options.

[cesoftinfo]

Yes,that can solve problem. Thanks

[yashSangai]

Actually I am not able to implement the functionality @mbrn .
Can you please tell me in terms of code with respect to the remote data you have used in your example?

[mbrn]

@yashSangai

You can use query.search in your server code to filter data.

[yashSangai]

Okay.Thanks, I will try it.

[iqasim-com]

Can you please share a code snippet with query.search code ?

Below is my code:

<Table tableData={query =>
           new Promise((resolve, reject) => {
                let url = `my_api`;
                axios.get(url, {
                  params: {
                    limit: query.pageSize,
                    page: (query.page + 1)
                  }
                })
                    //.then(response => response.json())
                    .then(result => {
                      resolve({
                        data: result.data.data.records,
                        page: result.config.params.page - 1,
                        totalCount: result.data.data.count,
                      })
                    });
              })
          }
                 columns={this.state.columns}

I will be very thankful to you for this act of kindness

[punnadittr]

@mqasim1990

Basically you want to use query.search as your search params.
query.search contains the text that is typed into search field.
Every time you type, it will make a request to the server.

[twhetzel]

@cesoftinfo can you share a snippet of how to start search on Enter press?

[bleuscyther]

Field | Type | Default | Description
-- | -- | -- | --
debounceInterval | number | 200 | debounce interval for search and filter

I increased it to 400 since i could not find a way to only trigger he provided input onEnter, besides this hack ( https://github.com/mbrn/material-table/issues/1119)

The full list of options is available here: https://material-table.com/#/docs/all-props