PaginationProvider + ToolkitProvider Issues

[yzhak]

@AllenFang

I can reproduce the bug described in #495 in the latest version:

react-bootstrap-table-next@3.0.0
react-bootstrap-table2-toolkit@1.3.1
react-bootstrap-table2-paginator@2.0.3
react-bootstrap-table2-filter@1.1.5

In addition, I have a related issue.
To reproduce:

1. There are more than 10 rows and sizePerPage is 10.
2. Search for some "SearchTerm1" in the SearchBar that returns 2 pages of results.
3. Clear the search
4. Go to page 3
5. Search for the same "SearchTerm1"

Like above, it throws the following error and crashes the app:
Uncaught TypeError: Cannot read property 'name' of undefined
... where 'name' is the keyField passed to the ToolkitProvider.

I would really appreciate your help with this. And thank you for this library.

Originally posted by @yzhak in #495 (comment)

[AllenFang]

@yzhak i see, I will spend some time to look this issue, however, if there's a simple and minimal example for me to reproduce will be very appreciated, this is an online example you can fork. ((I usually to encourage developer to write an online demo code on codesandbox.io for reproducing issue.

Thanks

[yzhak]

@AllenFang Thank you, Allen, for your time. Below is my code:
`
import React, { Component } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import paginationFactory, { PaginationProvider, SizePerPageDropdownStandalone, PaginationListStandalone } from 'react-bootstrap-table2-paginator';

const products = [
{ id: 1, name: "Item 1", price: 100 },
{ id: 2, name: "Item 2", price: 102 },
{ id: 3, name: "Item 3", price: 103 },
{ id: 4, name: "Item 4", price: 104 },
{ id: 5, name: "Item 5", price: 105 },
{ id: 6, name: "Item 6", price: 106 },
{ id: 7, name: "Item 7", price: 107 },
{ id: 8, name: "Item 8", price: 108 },
{ id: 9, name: "Item 9", price: 109 },
{ id: 10, name: "Item 10", price: 110 },
{ id: 11, name: "Item 11", price: 111 },
{ id: 12, name: "Item 12", price: 112 },
{ id: 13, name: "Item 13", price: 113 },
{ id: 14, name: "Item 14", price: 114 }
];

class ProductList extends Component {
constructor(props) {
super(props);
this.state = {
products: products
}
}

render() {

    const { SearchBar } = Search;
    const headerSortingStyle = { backgroundColor: '#e3edf8' };

    let columns = [
        {
            dataField: 'id',
            text: 'Product ID',
            sort: true,
            headerSortingStyle,
            headerAlign: 'center',
            headerStyle: { width: '350px' },
            align: 'center'
        },  {
            dataField: 'name',
            text: 'Product Name',
            sort: true,
            headerSortingStyle,
            headerAlign: 'center',
            headerStyle: { width: '250px' },
            align: 'center'
        },  {
            dataField: 'price',
            text: 'Product Price',
            sort: true,
            headerSortingStyle,
            headerAlign: 'center',
            headerStyle: { borderRight: '3px solid black', width: '150px' },
            align: 'center',
            style: { borderRight: '3px solid black' }
        }
    ];

    const defaultSorted = [{
        dataField: 'id',
        order: 'asc'
    }];

    const MyExportCSV = (props) => {
        const handleClick = () => {
            props.onExport();
        };
        return (
            <div>
                <button className="export-button" onClick={ handleClick }>Export</button>
            </div>
        );
    };

    const selectRow = {
        mode: 'checkbox',
        clickToSelect: true
    };

    return(
        <div>

            <PaginationProvider
                pagination={ paginationFactory({
                   custom: true,
                   totalSize: this.state.products.length,
                   page: 1,
                   sizePerPage: 10,
                   sizePerPageList: [{
                       text: '10', value: 10
                   }, {
                       text: '30', value: 30
                   }, {
                       text: '50', value: 50
                   }, {
                       text: 'All', value: this.state.products.length
                   }],
                   hideSizePerPage: this.state.products.length === 0
                }) }
                keyField='id'
                columns={ columns }
                data={ this.state.products }
            >
                {
                    ({
                        paginationProps,
                        paginationTableProps
                    }) => (
                        <ToolkitProvider
                            keyField='id'
                            columns={ columns }
                            data={ this.state.products }
                            search
                            exportCSV={ {
                                fileName: 'productList.csv',
                                onlyExportSelection: true,
                                exportAll: true
                            } }
                        >
                            {
                                toolkitprops => (
                                    <div>
                                        <div className="right-floating-section">
                                            <div className="right-floating-subsection">
                                                <SearchBar { ...toolkitprops.searchProps } />
                                            </div>
                                            <div className="right-floating-subsection">
                                                <MyExportCSV { ...toolkitprops.csvProps } />
                                            </div>
                                        </div>

                                        <div>
                                            <BootstrapTable
                                                { ...toolkitprops.baseProps }
                                                { ...paginationTableProps }
                                                selectRow={ selectRow }
                                                defaultSorted={ defaultSorted }
                                                defaultSortDirection="asc"
                                                hover
                                                condensed
                                                noDataIndication="No Data Is Available"
                                            />
                                            <SizePerPageDropdownStandalone
                                                { ...paginationProps }
                                            />
                                            <PaginationListStandalone
                                                { ...paginationProps }
                                            />
                                        </div>
                                    </div>
                                )
                            }
                        </ToolkitProvider>
                    )
                }
            </PaginationProvider>
        </div>
    )
}

}
export default ProductList;
`

[yzhak]

The search works only on the first page and breaks if searching from any other page.

[AllenFang]

@yzhak try to not give page and sizePerPage always.

[AllenFang]

Please upgrade all the related packages listed in below notes:
https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2019/03/10/version-bump.html

Then see if this issue still remain.

[yzhak]

Upgraded to the listed packages. Same behavior as before. Removed page: 1 and sizePerPage: 10 lines. Still crashed with the same error if searching from any page other than the first page.

[yzhak]

@AllenFang
Hi Allen, here is a link to the codesandbox for your convenience: https://codesandbox.io/s/zl1j1q6xox?fontsize=14. Searching from any page other than the first crashes the app even in the older versions. Please let me know what else I can try to fix this issue. Thank you.

[AllenFang]

@yzhak I upgrade to newest version can fix this issue, can you confirm it again?

this is my codesandbox with newest packages

https://codesandbox.io/s/56qn2o1wl

[MugssyBoy]

I solved mine by passing pagination in the BoostrapTable component.

<ToolkitProvider
  keyField="id"
  data={data}
  columns={columns}
  search
  >
   {props => (
    <div>
      <SearchBar {...props.searchProps} />
        <BootstrapTable {...props.baseProps} pagination={paginationFactory()} />
      </div>)}
 </ToolkitProvider>

[jabberwo]

this is my codesandbox with newest packages

https://codesandbox.io/s/56qn2o1wl

Fails with the same error as OP's sandbox.