Custom Search box for React Datatables

Question

I have a Datatable set up like the default shown here. I want to have the search bar to filter the data detached from where it is and have it sitting somewhere completely different. So I want to have my own input field used to search the data in the exact way the current default one does.

Here is my code and my current progress...

state = {
    searchValue: ''
}

const data = [
    ["Gabby", "Data 1", "Pending", "15/01/19", "$100,000"],
    ..........];

let options = {
    .....
    customSearch: (searchQuery, currentRow, columns) => {
        let isFound = false;
        currentRow.forEach(col => {
            if (col.toString().indexOf(this.state.searchValue) >= 0) {
                isFound = true;
            }
        });
    return isFound;
    }
};
.....
<input
    type="text"
    value={this.state.searchValue}
    onChange={(e, value) => this.handleSearchChange(e, value)}
/>
......
<MUIDataTable
    title={"My Title"}
    data={data}
    columns={columns}
    options={options}
/>

What this currently does is you can type into my custom input field but you have to open up the default search field and when you type in there it uses my custom search text. So in a way I have it searching using the custom search. I would like it to work just as it does in the gif.

Sorry if this is noob but I haven't been working with React long.

Thanks

Answer 1

I was so close. I just needed to add searchText: this.state.searchValue, above customSearch and change if (col.toString().indexOf(this.state.searchValue) >= 0) { to if (col.toString().indexOf(searchQuery) >= 0) {.