title: How to reset material-table Query object before next query using custom input TextField
body: <p>I'm using material-table for React with remote data and have added a custom TextField to be able to control when the search query is initiated, e.g. after pressing Enter. When sending a new search term, I replace <code>query.search</code> with the new search term. I've also realized the page number was not being re-set after a new search and now re-set this as:</p>
  
  <pre><code>if (query.search !== searchTextValue) {
      query.page = 0
  }
  </code></pre>
  
  <p>Is there another way to re-set the Query object when a new search term is used?</p>
  
  <p>Full code below</p>
  
  <pre><code>class PublicationsMatTable extends React.Component {
      constructor(props) {
          super(props)
  
          this.state = ({
              value: '',
              searchValue: '',
          });
          this.handleChange = this.handleChange.bind(this);
          this.getUserFriendlyStatusLabels = this.getUserFriendlyStatusLabels.bind(this);
      }
  
      tableRef = React.createRef();
  
      // Get text input value
      handleChange(event) {
          this.setState({ value: event.target.value });
      }
  
      clearSearchInput = () =&gt; {
          // clear value
          this.setState({
              value: '',
              searchValue: '',
          })
  
          // refresh table
          if (this.tableRef.current) {
              this.tableRef.current.onQueryChange();
          }
      }
  
  
      /**
       * Set user friendly status label
       */
      getUserFriendlyStatusLabels(rowData) {
          if (rowData === 'UNDER_SUBMISSION' || rowData === 'UNDER_SUMMARY_STATS_SUBMISSION'
              || rowData === 'PUBLISHED_WITH_SS') {
              return 'CLOSED'
          }
          if (rowData === 'ELIGIBLE') {
              return 'OPEN FOR SUBMISSION'
          }
          if (rowData === 'PUBLISHED') {
              return 'OPEN FOR SUMMARY STATISTICS SUBMISSION'
          }
      }
  
  
      render() {
          const { classes } = this.props;
          const noResultsMessage = &lt;span className={classes.noResultsTextStyle}&gt;My custom message&lt;/span&gt;;
  
          let { searchValue } = this.state;
          let searchTextValue = searchValue.trim();
  
          return (
              &lt;Container className={classes.publicationContainer}&gt;
  
                  &lt;Grid container
                      direction="row"
                      justify="center"
                      alignItems="center"&gt;
                      &lt;Grid item&gt;
                          &lt;CssTextField
                              id="outlined-bare"
                              name="searchInput"
                              value={this.state.value}
                              className={classes.textField}
                              variant="outlined"
                              placeholder="Search by PubMedID or Author"
                              helperText="Enter an Author name, e.g. Yao, or PMID, e.g. 25533513"
  
                              onChange={this.handleChange}
  
                              onKeyPress={(event) =&gt; {
                                  if (event.key === 'Enter') {
                                      event.preventDefault();
                                      this.setState({ value: event.target.value, searchValue: event.target.value });
                                      this.tableRef.current &amp;&amp; this.tableRef.current.onQueryChange();
                                  }
                              }}
                          /&gt;
                          &lt;button label="Clear" onClick={this.clearSearchInput}&gt; Clear &lt;/button&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
  
                  {searchTextValue &amp;&amp; (
                      &lt;MaterialTable
                          tableRef={this.tableRef}
                          icons={tableIcons}
                          columns={[
                              {
                                  title: 'PubMedID', field: 'pmid',
                                  render: rowData =&gt; (&lt;Link to={{
                                      pathname: `${process.env.PUBLIC_URL}/publication/${rowData.pmid}`,
                                      state: { pmid: rowData.pmid }
                                  }}
                                      style={{ textDecoration: 'none' }}&gt;{rowData.pmid}&lt;/Link&gt;)
                              },
                              { title: 'First author', field: 'firstAuthor', },
                              { title: 'Publication', field: 'title' },
                              { title: 'Journal', field: 'journal' },
                              {
                                  title: 'Status', field: 'status',
                                  render: rowData =&gt; (this.getUserFriendlyStatusLabels(rowData.status))
                              },
                          ]}
                          data={query =&gt;
                              new Promise((resolve, reject) =&gt; {
  
                                  // Re-set search page for new query
                                  if (query.search !== searchTextValue) {
                                      query.page = 0
                                  }
  
                                  // Replace search text value in Query object with input from TextField
                                  query.search = searchTextValue;
  
                                  let url = GET_PUBLICATIONS_URL
  
                                  // Handle search by PubMedID
                                  let onlyNumbers = /^\d+$/;
  
                                  if (query.search) {
                                      if (onlyNumbers.test(query.search)) {
                                          url += '/' + query.search + '?pmid=true'
                                          fetch(url)
                                              .then(response =&gt; response.json())
                                              .then(result =&gt; {
                                                  resolve({
                                                      data: [result],
                                                      page: 0,
                                                      totalCount: 1,
                                                  })
                                              }).catch(error =&gt; {
                                              })
                                      }
                                      // Handle search by Author
                                      else {
                                          url += '?author=' + query.search
                                          url += '&amp;size=' + query.pageSize
                                          url += '&amp;page=' + (query.page)
                                          console.log("** URL: ", url);
  
                                          // Handle sorting search by Author results
                                          // if (query.orderBy) {
                                          //     let sortOrder = query.orderDirection;
                                          //     url += '&amp;sort=' + query.orderBy.field + ',' + sortOrder
                                          // }
                                          // else {
                                          // Sort search by Author results asc by default
                                          // Note: Sorting is supported for only 1 column
                                          // url += '&amp;sort=firstAuthor,asc'
                                          // TODO: Check if sorting is still supported
                                          // url = url
                                          // }
  
                                          fetch(url)
                                              .then(response =&gt; response.json())
                                              .then(result =&gt; {
                                                  resolve({
                                                      data: result._embedded.publications,
                                                      page: result.page.number,
                                                      totalCount: result.page.totalElements,
                                                  })
                                              }).catch(error =&gt; {
                                              })
                                      }
                                  }
                                  // Display all results
                                  else {
                                      url += '?size=' + query.pageSize
                                      url += '&amp;page=' + (query.page)
  
                                      // Handle sorting all results
                                      if (query.orderBy) {
                                          let sortOrder = query.orderDirection;
                                          url += '&amp;sort=' + query.orderBy.field + ',' + sortOrder
                                      }
  
                                      fetch(url)
                                          .then(response =&gt; response.json())
                                          .then(result =&gt; {
                                              resolve({
                                                  data: result._embedded.publications,
                                                  page: result.page.number,
                                                  totalCount: result.page.totalElements,
                                              })
                                          }).catch(error =&gt; {
                                          })
                                  }
                                  setTimeout(() =&gt; {
                                      resolve({
                                          data: [],
                                          page: 0,
                                          totalCount: 0,
                                      });
                                  }, 3000);
                              })
                          }
                          options={{
                              pageSize: 10,
                              pageSizeOptions: [10, 20, 50],
                              debounceInterval: 250,
                              toolbar: false,
                          }}
                          localization={{
                              body: {
                                  emptyDataSourceMessage: noResultsMessage
                              }
                          }}
                      /&gt;
                  )}
              &lt;/Container&gt;
          )
      }
  }
  </code></pre>