diff --git a/CHANGELOG.md b/CHANGELOG.md
index 391459e7fc5..629a51652a9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
**Bug fixes**
- Fixed `EuiCard` `icon` prop to include user provided className ([#684](https://github.com/elastic/eui/pull/684))
+- `EuiInMemoryTable` pagination state is now reset automatically when a search is executed ([#686](https://github.com/elastic/eui/pull/686))
## [`0.0.42`](https://github.com/elastic/eui/tree/v0.0.42)
diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js
index d7e30829617..2e2ee01f0b6 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js
+++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
import {
EuiCode
} from '../../../../../src/components';
@@ -23,12 +23,12 @@ export const searchCallbackSection = {
}
],
text: (
-
+
The example shows how to configure EuiInMemoryTable to display a search bar
and intercept the search value when it changes so you can perform your own search logic.
-
+
),
props: propsInfo,
demo:
diff --git a/src/components/basic_table/in_memory_table.js b/src/components/basic_table/in_memory_table.js
index 64c572ebe44..5d766bb0526 100644
--- a/src/components/basic_table/in_memory_table.js
+++ b/src/components/basic_table/in_memory_table.js
@@ -155,17 +155,20 @@ export class EuiInMemoryTable extends Component {
});
};
- onQueryChange(query) {
+ onQueryChange = (query) => {
if (this.props.search.onChange) {
const shouldQueryInMemory = this.props.search.onChange(query);
if (!shouldQueryInMemory) {
return;
}
}
+
+ // Reset pagination state.
this.setState({
- query
+ query,
+ pageIndex: 0,
});
- }
+ };
renderSearchBar() {
const { search } = this.props;
@@ -181,7 +184,7 @@ export class EuiInMemoryTable extends Component {
return (
);
@@ -233,6 +236,15 @@ export class EuiInMemoryTable extends Component {
};
}
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.items !== this.props.items) {
+ // We have new items because an external search has completed, so reset pagination state.
+ this.setState({
+ pageIndex: 0,
+ });
+ }
+ }
+
render() {
const {
columns,