Estoy usando react-bootstrap-table y quiero colocar el filtro de entrada de las columnas de la tabla en la parte superior de la tabla, no en la parte superior/inferior de la columna (comportamiento predeterminado).

Miré esta pregunta que muestra el filtro de selección en un lugar personalizado en react-bootstrap-table2 , pero no pude implementar lo que sugirió:

.. agregué un select> y creé una referencia para la columna respectiva y escribí una línea simple que se ejecuta en el evento Change de select> this.refs.COLUMN_NAME.applyFilter("column_value_from_select_control");

Creé una referencia para la tabla y coloqué un campo de entrada en la parte superior de la tabla de esta manera:

 <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 la entrada, llamo a este método, en el registro de la consola puedo ver la columna que quiero filtrar con sus datos, pero no sé cómo llamar a textFilter() de react-bootstrap-table.

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