Material-table: Search is not working at Remote data code

[PATTANPARVIN]

Search is not working while calling rest call dynamically

[cbschuld]

I have search working fine with a dynamic REST (actually GraphQL, but still remote) can you share a code snippet?

[szkiecin]

@cbschuld are you using onSearchChange with material-table 1.54.2 ?

[tuliocll]

i have the same issue, the documentation example not working too.
https://material-table.com/#/docs/features/remote-data

[gaurav-agarwal27]

@cbschuld can you share your implementation of remote search ?

[narottamdattatrey]

i have the same issue, the documentation example not working too.
https://material-table.com/#/docs/features/remote-data

facing same issue . have you got solution?

[therohitjha]

Search is not working while calling rest call dynamically

simply first save your api data into variable instead of fetching directly from an api into MaterialTable data.
then add that variable data into materialTable data.

[pjshu]

hello,I solve this problem use

function handlePagingQuery(query) {
    if(query.search){
      return new Promise(resolve => {
        axios.get(`${api}?search=${query.search}`).then(res => {
          resolve(res)
        })
      })
    }else{
       // fetch your initial data
    }

  }
  return (
    <MaterialTable
      data={handlePagingQuery}
    />
  );

hope this will help you

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[e-hop]

This worked for me.

      <MaterialTable        
        title="Refresh Data Preview"
        tableRef={tableRef}
        columns={[
          { title: 'Id', field: 'id' },
          { title: 'First Name', field: 'object_id' },
          { title: 'Last Name', field: 'last_name' },
        ]}
        data={query =>
          new Promise((resolve, reject) => {

            if(query.search){
                console.log(query.search)

                fetch( `${props.route}?filter=${query.search}` )
                .then(response => response.json())
                .then(result => {
                  console.log(result)
                  resolve({
                    data: result.data,
                    page: result.page - 1,
                    totalCount: result.total,
                  })
                })

              }else{

                let url = props.route
                url += '?per_page=' + query.pageSize
                url += '&page=' + (query.page + 1)
                fetch(url)
                  .then(response => response.json())
                  .then(result => {
                    console.log(result)
                    resolve({
                      data: result.data,
                      page: result.page - 1,
                      totalCount: result.total,
                    })
                  })
              }
            })
        }
        actions={[
          {
            icon: 'refresh',
            tooltip: 'Refresh Data',
            isFreeAction: true,
            onClick: () => tableRef.current && tableRef.current.onQueryChange(),
          }
        ]}
        options={{
            search: true
          }}
      />