I'm using remote data example from material table, The current behavior
- In
componentDidMount
the data request by default. - any search or sorting make by default another request to get data based on the new query
- I can delay the request by providing
debounceInterval
What I want to do?
- I want when I
type in the global search
----> I don't want to get data by default unless I pressenter
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.