Need the value that is typed into the searchbar

[pullelakalyani]

Hello @imballinst

Back with one more help! I'm trying to get the value that is typed in the textbox so that the search text can be used later for other things. I've tried like this: <Filter onFilter={(e) => onChangeFilter(e)} filterText={filterText} placeholder='Search by App RegID or Applicant Name'/>

But when I called the function onChangeFilter, its not invoked. Is this the correct way to get the value of a search field

Thank you in advance 😇

[imballinst]

hey @pullelakalyani! I think there are 2 ways to do it:

1. The first is to utilize the context from DatatableWrapper. We can create a component inside DatatableWrapper that reads the context's value using useDatatableWrapper. This is the relatively easier example, especially if we are using uncontrolled table. Example: https://codesandbox.io/s/lively-surf-xgb25m?file=/src/App.js.
2. The second is to create a controlled table altogether (if filter is controlled, then sort and pagination need to be controlled as well for the table to properly "sync"). Sample snippets:

https://github.com/imballinst/react-bs-datatable/blob/890c6e74e3680940f774be7f7c7f4c48088b2e58/src/__stories__/01-Controlled.stories.tsx#L136-L143

Where the onFilter is as the following:

https://github.com/imballinst/react-bs-datatable/blob/890c6e74e3680940f774be7f7c7f4c48088b2e58/src/__stories__/01-Controlled.stories.tsx#L99-L102

Please let me know if I can be of more help. Thanks!

[pullelakalyani]

@imballinst Yeah the controlledProps worked I do have another query, like when the user types the search text, the search API is invoked and the related data is displayed Can we make a search button next to search bar and when the user done with typing search text then he can click on that search button and then the results are displayed

[imballinst]

@pullelakalyani Unfortunately there is no built-in feature for that. However, with the table being composable as it is, we can create our own CustomFilter component like this: https://codesandbox.io/s/lively-surf-xgb25m?file=/src/CustomFilter.js.

That CustomFilter component implements the functionality that we can adjust: in this case, filter on demand with (1) clicking the search button, or (2) pressing "Enter" key. Let me know if this solves your requirement!