3

I'm using remote data example from material table, The current behavior

  1. In componentDidMount the data request by default.
  2. any search or sorting make by default another request to get data based on the new query
  3. I can delay the request by providing debounceInterval

What I want to do?

  1. I want when Itype in the global search----> I don't want to get data by default unless I press enter

And here is my render method that will make the table resolves the remote data once it's received the data

        <Entity
          storeId={storeId}
          entityRef={ref => { this.entity = ref; }}
          onEntityReceived={data => this.onEntityReceived(data)}
          onEntityReceivedError={data => this.onEntityReceivedError(data)}
          render={store => (
            <React.Fragment>
              <If condition={this.exceptionError}>
                <Message variant={'warning'} text={this.exceptionError} />
              </If>

              <MaterialTable
                tableRef={ref => this.tableRef = ref}
                title={this.title}
                data={query => {
                  this.get(query);
                  return new Promise(resolve => event.on('data-fetched', resolve));
                }}
                isLoading={(store.loading && this.exceptionErrorsLoader) || isLoading}
                options={this.options}
                actions={this.actions}
                localization={this.localization}
                columns={this.columns}
                components={this.components}
                icons={this.icons}
                detailPanel={this.rowDetailsPanel}
                onRowClick={onRowClick}
              />

Here is the code that will handle received data to provide it to the table

  onEntityReceived(data) {
    this.exceptionErrorsLoader = false;

    event.notify('data-fetched', {
      page: this.state.pageIndex,
      totalCount: data.totalCount,
      data,
    });
  }

This is the get method that will get the data from server

  get(query) {
    const { oldQuery } = this.state;
    const { additionalEntityPayload } = this.props;
    const serverSideLink = this.getServerSideLink(query);
       
    this.exceptionErrorsLoader = true;
    this.setState({ 
      query,
      // ======== In Order To Save FIRST_QUERY (in case we need to refresh old data)
      oldQuery: isEmpty(oldQuery) ? query : oldQuery,
      pageIndex: query.page,
      pageSize: query.pageSize,
    }, () => {
      if(!isEmpty(additionalEntityPayload)) {
        return this.entity.get({ 
          serverSideLink, additionalPayload: additionalEntityPayload });
      }

      this.entity.get({ serverSideLink });
    });
  }

The issue is I don't know how to control the search field or other field because they are not exposed

Thanks in Advance.

Ericgit
  • 6,089
  • 2
  • 42
  • 53

0 Answers0