Clear search bar results and make table with no filter

[ghost]

Hey, I created custom search bar and custom clear button. Till now my erase button erases the text from the search bar, but the filter remains. I tried with state manipulation (see in remark in the attached code) How can I code it correctly? Thx

// let input_state : any; const MySearch = (props: any) => {

        const handleClick = () => {
            props.onSearch(input.value);  
            // this.setState (
            //     {input_state : input}            
            // )
        };
        return (
            <div>
                <input id='SearchBar'
                    className="form-control"
                    style ={{width:"400px"}}
                    placeholder="Come on DataOps - Search here..."
                    type="text"
                    ref={n => input = n}
                    onChange={handleClick}
                />
            </div>
        );
    };

    const Clearbutton = (props: any) => {

        const clearhandleClick = () => {
            input.value = ''
            this.handleClick()
            // this.setState (
            //     {input_state : ''}            
            // )
        }
        return (
            <button className="btn btn-default"
                onClick={clearhandleClick}>Clear</button>
        )
    }

[AllenFang]

here is an example to show you how to custom the search bar and clear button.

In you case, you choose to custom the searchbar and clear button. It's ok but one thing you do wrong is when user click the clear button, you should call the onClear callback which passed from ToolkitProvider:

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  search
>
  {
    props => (
      <div>
        <h3>Input something at below input field:</h3>
        <SearchBar { ...props.searchProps } />
       <button onClick={ props.searchProps.onClear }>clear me</button
        <hr />
        <BootstrapTable
          { ...props.baseProps }
        />
      </div>
    )
  }
</ToolkitProvider>

[ghost]

Thanks Allen, Is still get the following error [image: image.png]

I wonder whether this clear issue needs to be on the onclick of the button handler

[image: image.png]

What do you think?

Thanks, Nir

On Mon, Dec 9, 2019 at 2:38 PM Allen notifications@github.com wrote:

here https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Table%20Search&selectedStory=Clear%20Search%20Button&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel is an example to show you how to custom the search bar and clear button.

In you case, you choose to custom the searchbar and clear button. It's ok but one thing you do wrong is when user click the clear button, you should call the onClear callback which passed from ToolkitProvider:

<ToolkitProvider keyField="id" data={ products } columns={ columns } search> { props => (

Input something at below input field:

clear me

)

}

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/1197?email_source=notifications&email_token=AJCFI6V4DHGMHEKCRFNE4GLQXY33LA5CNFSM4JXP53HKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGJAWVA#issuecomment-563219284, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJCFI6WZPVUVUPWQKFOGTGTQXY33LANCNFSM4JXP53HA .

--

Nir Krumer

Business Applications Manager

E-Mail: nir.krumer@naturalint.com eddie.oz@naturalint.com

Mobile: +972 (0)50-8248181