[EuiInMemoryTable] Pagination breaks when search.onChange is configured

[cjcenizal]

To reproduce this problem, configure an EuiInMemoryTable with something like this:

const search = {
  onChange: (data) => this.setState(queryText: data.query.text),
  box: {
    incremental: true,
  },
};

// The items fed to the table will typically use the query text as a filter.
// This is a React best practice.
const filteredItems = this.state.items.filter(item => item.name.includes(this.state.queryText));

The bug arises due to the new array being generated each render by the filtering logic. EuiInMemoryTable deliberately treats a new array as a trigger for resetting pagination to the first page. This manifests as nonresponsive pagination whenever search.onChange is configured.

After discussing this with @chandlerprall we concluded that a reasonable solution would be to document best practices on the example page, which is to cache the filtered rows on state instead of calculating them inside of the render method. Documentation would include things like:

• Updating an example to configure search.onChange and demonstrate this best practice.
• Adding a comment to the example code pointing out the reason for caching the filtered result on state.
• Adding a callout to describe this best practice and reason for it, since it contradicts conventional React best practices.

[cjcenizal]

As you can see in elastic/kibana#65931, the solution can get a little more complicated when you consider that items might be deleted (or added). In these cases, table won't update, because the original list of items no longer acts as an input to the render method. This requires the introduction of a getDerivedStateFromProps method to update the filtered items cache when the list of items changes.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.