How to use server side pagination with client filtration?

问题

what i need is when i use remote data i want to be allowed to filter client side not server side here is my table

and my code for remote data

 <MaterialTable
   title={Strings.userManagementList}
   data={query => {
     this.get(query);
     return new Promise(resolve => event.on('data-fetched', resolve));
    }}
    isLoading={store.loading}
    options={this.options}
    actions={this.actions}
    localization={this.localization}
    columns={this.columns}
    components={this.components}
  />

this works fine but also the search bar in the top left corner when i type in it, it calls the end point agin with search parameter ---> this is normal but my problem is when i change filter or search from search bar ---> related to any column it also calls the endpoint

so what i want is: 1/ remote data 2/ only the top left search field used in trigger remote data again 3/ if i filter from columns filtration bar it searches inside the current table results no need to remote data unless i paginate or searched from the top left search field

Thanks in advance.

回答1:

You can do it by saving the data returned by your query locally in your component.

Now if the only the filters of the query but not the page or the search parameter change, instead of calling this.get(query);, you access the locally saved data, filter that by the filter texts from the query object and return the filtered data in a promise instead of fetching new data.

来源：https://stackoverflow.com/questions/59810657/how-to-use-server-side-pagination-with-client-filtration

标签

material-table