How to implement search for react-bootstrap-table having asynchronous data loaded using api calls

[charan3]

render() {
    const retryButton = this.props.error ? <Button bsStyle="link" onClick={this.retry}>Failed to fetch more data, click to retry!</Button> : undefined;
    return (
        this.props.messages
            ? <div>
                {retryButton}
                <BootstrapTable data= {this.props.messages}
                                options={this.dataTableOptions}
                                search
                                pagination
                                condensed>
                    <TableHeaderColumn dataField='messageIdentifier'
                                       dataFormat={PaginatedMessagesDisplay.formatMessageId}
                                       isKey>
                        Message ID
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='paymentOperationType'
                                       dataFormat={(operationType: string) => operationType || "-"} >
                        Operation Type
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='batchStatus' filterFormatted dataFormat={(status: string) => status || "-"} formatExtraData={ BatchStatusType }
                                       filter={ { type: 'SelectFilter', options: BatchStatusType, condition: 'eq'} }  >
                        Status
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='requestedAmount'
                                       dataFormat={this.formatCurrencyCell} >
                        Requested Amount
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='approvedAmount'
                                       searchable={false}
                                       dataFormat={this.formatCurrencyCell}>
                        Approved Amount
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='creationTime'
                                       dataFormat={PaginatedMessagesDisplay.formatDate}>
                        Creation Time
                    </TableHeaderColumn>
                </BootstrapTable>
            </div>
            : <p>There is no data to display</p>
    )
}