Filter + Pagination returns empty rows

`

class component extends Component {

	constructor(props) {
		super(props);
		this.state = {
			data: []
		};
	}

	componentDidMount() {
		let data = [];

		for (let i = 0; i < 100; i++) {
			data.push({
				Id: i,
				field1: 'field 1 value ' + i,
				field2: 'field 2 value ' + i
			});
		}

		this.setState({
			data: data
		});
	}

	render() {
			const
				columns = [{
					dataField: 'Id',
					text: 'Id',
					filter: textFilter()
				}, {
					dataField: 'field1',
					text: 'Field 1',
					filter: textFilter()
				}, {
					dataField: 'field2',
					text: 'Field 2',
					filter: textFilter()
				}];
			return (
				<BootstrapTable keyField='Id' data={ this.state.data } columns={ columns } filter={ filterFactory() }  pagination={ paginationFactory() }/>
			);

	}
}

export default component;

`

If you go to the page 4 and you type “5” in the filter input of the Field 2 column, it shows a list of empty rows.

If you do the same in the page 1 or 2, the shown results are fine. The issue comes when the size of the data after applying the filter is not long enough to fill the pages until the position where the user is.

The paginator (actually the position of the page) doesn’t change accordingly.

[AllenFang]

@aclopezffdc @rmartinezffdc

https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/

Fixed on react-bootstrap-table-next@0.1.15 and react-bootstrap-table2-paginator@0.1.6 Please reopen this issue if the problem still remain, thanks

[aclopezffdc]

thanks! 😃