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,