Closed ghost closed 4 years ago
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>
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:
)
}
— 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
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) => {