I'm using react-bootstrap-table and I want to place the input filter of table columns in top of the table not on top/bottom on the column (default behavior).

I looked at this question Showing Select filter at custom place in react-bootstrap-table2, but I couldn't implement what he suggested:

.. i added a select> & created ref for respective column & write a simple line that runs on Change event of select> this.refs.COLUMN_NAME.applyFilter("column_value_from_select_control");

I created a ref for the table, and I placed an input field on top of the table like this:

<input type="text" class="form-control" id="id1" placeholder="enter name" onChange={handleFilter}></input>

    <BootstrapTable
            bootstrap4
            marginLeft="20px"
            keyField="id"
            data={data}
            columns={columns}
            hover
            ref={inputRef}
            ..
    />

onChange of the input I call this method, in console log i can see the the column that i want to filter with its data, but I don't know how to call textFilter() of react-bootstrap-table.

const handleFilter = () => {
    console.log("test = ", inputRef.current.props.columns[5])
  };