Reset EuiInMemoryTable pagination state when a search has been execut…

…ed. (elastic#686) * Reset EuiInMemoryTable pagination state when a search has been executed.
cjcenizal · Apr 18, 2018 · 64c0d7c · 64c0d7c
1 parent 1dde164
commit 64c0d7c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git 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
@@ -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: (
-    <div>
+    <Fragment>
       <p>
         The example shows how to configure <EuiCode>EuiInMemoryTable</EuiCode> to display a search bar
         and intercept the search value when it changes so you can perform your own search logic.
       </p>
-    </div>
+    </Fragment>
   ),
   props: propsInfo,
   demo: <Table/>

diff --git 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 (
         <EuiSearchBar
-          onChange={this.onQueryChange.bind(this)}
+          onChange={this.onQueryChange}
           {...searchBarProps}
         />
       );
@@ -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,