Search is not working

I started working with react-bootstrap-table-next this morning and everything went really well until i got to the search. The search box appears but does not filter any records. This is what i have installed: react-bootstrap-table-next 4.0.3", react-bootstrap-table2-paginator 2.1.2", react-bootstrap-table2-toolkit 2.1.3",

Here’s my code:

import BootstrapTable from 'react-bootstrap-table-next';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import paginationFactory from 'react-bootstrap-table2-paginator';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';

actionFormat(cell, row, rowIndex) {
        return (<div><span className='fa fa-pencil-square-o' onClick={() => this.props.parentEdit(cell, row, rowIndex)} data-id={cell} title='Edit'></span>
            <span className='fa fa-trash-o' data-id={cell} onClick={() => this.props.parentDelete(cell, row, rowIndex)} title='Delete'></span></div>)
}
render() {        
        const { SearchBar } = Search;        
        return (
                <Container fluid>
                    <ToolkitProvider
                        keyField="Id"
                        data={this.state.data}
                        columns={this.props.columns}
                        search
                        bootstrap4
                    >
                        {
                            props => (
                                <div>
                                    Search:
                                    <SearchBar {...props.searchProps} />
                                    <BootstrapTable bootstrap4 data={this.state.data} columns={this.props.columns} keyField='Id'
                                        pagination={paginationFactory()} striped condensed>
                                    </BootstrapTable>
                                </div>
                            )
                        }
                    </ToolkitProvider>
        );
    }

Any idea why the search is not executing?

[cwilso03]

@cb29960 I believe you need to change your properties assignment on your <BootstrapTable> component to be something like this: <BootstrapTable bootstrap4 pagination={paginationFactory()} striped condensed {...props.baseProps} />

Essentially, you want the ToolkitProvider to be providing the data, columns, and keyField properties. As written in your original post, you’re setting those properties again on the BootstrapTable instance directly.

See this page for the relevant docs.

[polixisNG]

import ToolkitProvider, { Search } from ‘react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit’;