Search is not working

[cb29960]

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.

[cb29960]

Yes, this worked! Thank you very much!

[Devmobilesutra]

above answer is absolutely fine for asked question but in my case search is only worked when I typed something in input field before that the does not shows any data. I want entire data to display without any search also. I have implemented same code as @cb29960. any help will be appreciated. Thank you...

[cwilso03]

above answer is absolutely fine for asked question but in my case search is only worked when I typed something in input field before that the does not shows any data. I want entire data to display without any search also. I have implemented same code as @cb29960. any help will be appreciated. Thank you...

I'm not sure I follow... Regardless, probably best to open a new issue, since it sounds like you are experiencing a different problem.

[polixisNG]

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