如何实现MaterialTable服务端分页+客户端筛选？远程数据配置需求

Hey there! Let's figure out how to make your MaterialTable behave exactly like you want—keeping remote data loading but only triggering API calls for the top-left search bar and pagination, while handling column filters locally. Here's a step-by-step solution:

Step 1: Add State to Track Full Remote Data and Query Context #

First, we need to store the complete dataset from your remote API (for local filtering) and track the last query that triggered a remote call. Add these states to your component:

constructor(props) {
  super(props);
  this.state = {
    fullRemoteData: [], // Stores the latest full dataset from API
    lastRemoteQuery: null, // Tracks the query that triggered the last API call
    totalRecordCount: 0 // Total records from API (for pagination)
  };
}

Step 2: Update Your Remote Data Fetch Logic #

Modify your get method to return a Promise (so we can handle data updates directly) and update our new state values:

get = (query) => {
  return new Promise((resolve) => {
    // Replace with your actual API call logic
    yourApiClient.fetchUsers({
      search: query.search,
      page: query.page,
      pageSize: query.pageSize
    }).then(response => {
      this.setState({
        fullRemoteData: response.data,
        totalRecordCount: response.totalCount,
        lastRemoteQuery: {...query}
      });
      resolve(response);
    });
  });
};

Step 3: Add a Local Filter Helper Function #

This function will apply column filter rules to your stored remote data, mimicking MaterialTable's default filter behavior. Extend it to support any operators you use:

applyLocalColumnFilters = (data, filters) => {
  if (!filters || filters.length === 0) return data;

  return data.filter(item => {
    return filters.every(filter => {
      const fieldValue = item[filter.column.field];
      const filterValue = filter.value.toLowerCase();

      switch (filter.operator) {
        case 'contains':
          return String(fieldValue).toLowerCase().includes(filterValue);
        case 'equals':
          return String(fieldValue).toLowerCase() === filterValue;
        case 'greaterThan':
          return Number(fieldValue) > Number(filterValue);
        // Add more operators as needed for your columns
        default:
          return true;
      }
    });
  });
};

Step 4: Rewrite the MaterialTable data Prop Logic #

Now we'll intercept query changes and decide whether to trigger a remote API call or just use local filtering:

<MaterialTable
  title={Strings.userManagementList}
  data={query => {
    return new Promise((resolve) => {
      // Check if we need to call the remote API:
      // Only trigger if search term, page, or page size changed
      const needsRemoteFetch = !this.state.lastRemoteQuery ||
        query.search !== this.state.lastRemoteQuery.search ||
        query.page !== this.state.lastRemoteQuery.page ||
        query.pageSize !== this.state.lastRemoteQuery.pageSize;

      if (needsRemoteFetch) {
        // Fetch new data from API
        this.get(query).then(() => {
          // Apply local filters to the fresh remote data
          const filteredData = this.applyLocalColumnFilters(this.state.fullRemoteData, query.filters);
          resolve({
            data: filteredData,
            totalCount: this.state.totalRecordCount
          });
        });
      } else {
        // No API call needed—just filter the stored remote data locally
        const filteredData = this.applyLocalColumnFilters(this.state.fullRemoteData, query.filters);
        resolve({
          data: filteredData,
          totalCount: this.state.totalRecordCount
        });
      }
    });
  }}
  isLoading={store.loading}
  options={this.options}
  actions={this.actions}
  localization={this.localization}
  columns={this.columns}
  components={this.components}
/>

Key Notes #

• If your column filters use operators not listed in the helper function, add corresponding cases to the switch statement.
• This solution filters column values only within the current page's remote data (as per your requirement). If you ever need cross-page column filtering, you'd need to fetch all records upfront—but that goes against remote data pattern best practices.
• Make sure your API returns the total number of records (not just the current page) to keep pagination working correctly.

内容的提问来源于stack exchange，提问作者Mohammed Saber