Filter won't work with search bar or even without that using toolkit provider

[UbaidRajputt]

I can't use filter when using toolkit provider, i tried removing it but it won't still work, can anybody please help me regarding this

import React, { Component } from 'react';
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory, { PaginationProvider } from "react-bootstrap-table2-paginator";
import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit";
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
import overlayFactory from 'react-bootstrap-table2-overlay';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { getAllStakeholders, destroyStakeholder } from '../../../appRedux/actions/stakeholderAction';
import Avatar from 'react-avatar';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import Notification from '../../Notification';
import remove from './../../../styles/remove.svg';
import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';

const { SearchBar } = Search;

class Users extends Component {
constructor(props){
super(props);
this.state={
data: this.props.data,
loading: this.props.loading,
tooltipOpen: false,
destroyModal: false,
stakeholderId: null,
yesDisable: false
}
}

avatarFormatter = (cell, row) => {
    if(cell===null){
      return <Link to={'/expert/' + row.username}>
        <Avatar name={row.username} textSizeRatio={3} size="30" round={true} />
        </Link>
    }else{ 
      return <Avatar src={row.avatar} size="30" round={true} /> 
    }
}

usernameFormatter = ( cell,row ) => {
  return  <Link style={{textDecoration: "none", color: "black"  }} to={'/expert/edit/' + row.username}> { row.username }</Link>
}

loginFormatter = (cell, row) => {
  if(row.last_login_at!==null){

    return <div> 
            <div>
            { row.last_login_at.substring(0,10) }
            </div>
            <div>
              { row.last_login_at.substring(12,19) }
            </div>
          </div>
    
  }else{
    return ""
  }
}

createdAtFormatter = ( cell, row ) => {
  if(row.created_at!==null){
    return <div> 
            <div>
            { row.created_at.substring(0,10) }
            </div>
            <div>
              {  row.created_at.substring(12,19) }
            </div>
          </div>
  }else{
    return ""
  }
}

updatedAtFormatter = ( cell, row ) => {
  if(row.updated_at!==null){
    return <div> 
          <div>
          { row.updated_at.substring(0,10) }
          </div>
          <div>
            {  row.updated_at.substring(12, 19) }
          </div>
        </div>
  }else{
    return ""
  }
}

activatedAtFormatter = ( cell, row ) => {
  if(row.activated_at!==null){
    return <div> 
    <div>
    { row.activated_at.substring(0,10) }
    </div>
    <div>
      {  row.activated_at.substring(12,19) }
    </div>
  </div>
  }else{
    return ""
  }
}

fullNameFormatter = (cell, row) => {
  return <div className="custom-tooltip">{ row.full_name }
    <div className="tooltxt">
      { row.bio }
    </div>
  </div>
}

userRoleFormatter = (cell, row) => {
  if(cell.length===0) {
    return "0"
  }
}

toggle() {
  this.setState({ destroyModal: false });
}
destroyUser = () => {
  this.setState({ yesDisable: true })
  let th = this
  this.props.destroyStakeholder(this.state.stakeholderId);
  setTimeout(function(){
    th.props.getAllStakeholders()
  }, 3000 ) 
  setTimeout(function(){
    if(th.props.stakeholder.destroy===""){
      Notification({ message: "%s is the last administrator of an organisation. Please destroy this organisation first." });
    }else if( th.props.stakeholder.error){
      Notification({ message: "%s is the last administrator of an organisation. Please destroy this organisation first." });
    }else{
      Notification({ message: th.props.stakeholder.destroy.message, success: true });
    }
  }, 2000 )
  
  console.log(th.props.stakeholder)
  setTimeout(function(){
    th.setState({ destroyModal: false, data: th.props.stakeholder.stakeholders.data, yesDisable: false })
  }, 5000 )
}

destroy = (cell, row) => {
  return <p style={{ margin: 0, padding: 0, display: 'block', textAlign: 'center' }}><img src={remove} width={21} alt="remove row" style={{ cursor: 'pointer' }} onClick={() => this.setState({ destroyModal: true, stakeholderId: row.id })} /></p>
}

render() { 
    const columns = [
        { dataField: "avatar", text: "", formatter: this.avatarFormatter },
        { dataField: "username", text: "Username", sort: true, formatter: this.usernameFormatter },
        { dataField: "email", text: "Email", sort: true },
        { dataField: "full_name", text: "Name",sort: true, formatter: this.fullNameFormatter },
        { dataField: "isExpert", text: "Expert?",sort: true,  filter: textFilter() },
        { dataField: "userExpertise", text: "User roles",sort: true, formatter: this.userRoleFormatter },
        { dataField: "hasUsedFreeTrial", text: "Trial",sort: true },
        { dataField: "last_login_at", text: "Last login",sort: true, formatter: this.loginFormatter },
        { dataField: "login_count", text: "Login count",sort: true },
        { dataField: "created_at", text: "Created at",sort: true, formatter: this.createdAtFormatter },
        { dataField: "updated_at", text: "Updated at",sort: true, formatter: this.updatedAtFormatter },
        { dataField: "isActivated", text: "Activated",sort: true },
        { dataField: "activated_at", text: "Activated at",sort: true, formatter: this.activatedAtFormatter },
        { dataField:"destroyUser", text: "", formatter: this.destroy  }
    ]

    const defaultSorted = [{
      dataField: 'created_at',
      order: 'desc'
    }];

    const contentTable = ({ paginationTableProps }) => (
        <div>
          { !this.state.data ? "" : (
            <ToolkitProvider
              keyField="id"
              bootstrap4
              columns={columns}
              search
              data={this.state.data? this.state.data: []}
            >
              {toolkitprops => (
                <div style={{ lineHeight: '1' }}>
                  <div style={{ margin: '15px 0', display: 'flex', alignItems: 'center' }}>
                     <SearchBar { ...toolkitprops.searchProps } /> 
                </div>
                  <BootstrapTable
                    wrapperClasses="table-responsive table-admin"
                    striped
                    hover
                    condensed
                    filter={ filterFactory() }
                    loading={this.state.loading}
                    defaultSorted={ defaultSorted }
                    noDataIndication={() => <div className="alert" role="alert">No matching records found</div>}
                    overlay={ overlayFactory({ spinner: true, styles: { overlay: (base) => ({...base, background: 'rgba(0, 0, 0, 0.5)'}) } }) }
                   {...toolkitprops.baseProps}
                    {...paginationTableProps}
                  />
                </div>
              )}
            </ToolkitProvider>
          )}
        </div>
      );

    return ( 
    <div>
        <PaginationProvider pagination={paginationFactory()}>
        {contentTable}
        </PaginationProvider>
        <Modal isOpen={this.state.destroyModal} className="Profile-modal">
      <ModalHeader toggle={() => this.toggle()}>Destroy user account <span>{}</span></ModalHeader>
      <ModalBody>
        Are you sure you want to destroy user account?
      </ModalBody>
      <ModalFooter>
        <Button color="primary" disabled={this.state.yesDisable} onClick={() => this.destroyUser()}>Yes</Button>{' '}
      </ModalFooter>
    </Modal>
    </div>
    );
}

}

const mapStateToProps = state => {
return {
stakeholder: state.stakeholder,
settings: state.settings,
};
};

const mapDispatchToProps = dispatch => {
return bindActionCreators({
getAllStakeholders,
destroyStakeholder
}, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(Users);

[heyjaypray]

I'm also having an issue with the search bar. when I type something in nothing is filtered. The table doesn't change at all.

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

const { SearchBar } = Search;

            <ToolkitProvider
              keyField="_id"
              data={this.props.orders}
              columns={columns}
              search
            >
              {
                props => (
                  <div>
                    <h3>Input something at below input field:</h3>
                    <SearchBar {...props.searchProps} />
                    <hr />
                    <BootstrapTable
                      {...props.baseProps}
                      hover
                    />
                  </div>
                )
              }
            </ToolkitProvider>```

[AllenFang]

here, I can't reproduce this issue and I don't know what version you are using currectly. So please give me a simple and minimal example on codesandbox so that I can help you. thanks

[paudeca]

Hello,

I got the same issue when I tried to use filter() and ToolkitProvider.

When I type a text on flter, I got an exception.
Cannot read property 'afterFilter' of undefined

const data = [
    { id: "id1", name: "name1" },
    { id: "id2", name: "name2" }
  ];

  const columns = [
    { dataField: "id", text: "Id" },
    { dataField: "name", text: "Name", filter: textFilter() }
  ];

  export default function App() {
    return (
      <div className="App">
        <ToolkitProvider keyField="id" data={data} columns={columns}>
          {(table: any) => (
            <Table {...table.baseProps} filter={filterFactory()} />
          )}
        </ToolkitProvider>
      </div>
    );
  }

Please find a codesandbox with a textFilter on a column.
https://codesandbox.io/s/react-bootstrap-toolkitprovider-filter-ecrzd?file=/src/App.tsx

version used

    "react-bootstrap-table-next": "^3.3.5",
    "react-bootstrap-table2-filter": "^1.3.3",
    "react-bootstrap-table2-toolkit": "^2.1.3"

[rpomykala]

Since this page is the top result on google, upgrading this dependency fixed it for me:

yarn add react-bootstrap-table-next@4.0.3

#1345