How to call method on react-bootstrap-table element in typescript?

Question

I think the problem I'm having is casting the "any" bootstrapTableRef to the react-bootstrap-table, setting up the ref, or am importing wrong. I cannot figure out how to enable access to the method of the imported table. I saw this for HTMLInputElement but cannot get it to work for type bootstrapTable. Specifically this is the method I want to call:

this.refs.table.cleanSelected();  // this.refs.table is a ref for BootstrapTable  

In ResultsTables.tsx i'm referencing this way

import Select from "react-select";
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; //
import "../../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css";
import { Link } from "react-router";
import * as ReactDOM from 'react-dom';

then below

export class ResultsTable extends React.Component<IResultsTableProps, 
    IResultsTableState>{
    bootstrapTableRef: any;

...

public render() {
           ...

            return (
                 <BootstrapTable data={this.props.lots} keyField="lotNumber" striped
                        condensed={true} id="searchResultsTable" selectRow={selectRow} hover ref={(i) => this.bootstrapTableRef = i} ...>
                   ...
                 </BootstrapTable> );

I want to be able to do this but get an error that the method does not exist on type ReactInstance/Element. I tried different ways of casting but can't get the casting type to be recognized either.

clear() {
   this.refs.bootstrapTableRef.cleanSelected();
}

I have tried to access these two ways as well without success:

clearSelectedRow() {

    var table = ReactDOM.findDOMNode<BootstrapTable>(this.refs.bootstrapTableRef);
    table.cleanSelected();

    var tableRef2 = <BootstrapTable>document.getElementById("searchResultsTable");
    tableRef2.cleanSelected();

}

Answer 1

The primary problem turned out to be that the context of this was different between the DOM object and the TSX class so that the method was not being called in the React-Bootstrap-Table. So the key part was the "this" binding at the top.

export class SearchResultsTable2 extends React.PureComponent<foo,bar>{
   bootstrapTableRef: any;
   constructor(props) {
      super(props);
      this.onBootstrapTableRef = this.onBootstrapTableRef.bind(this);

    clearSelectedRow() {
       this.bootstrapTableRef.cleanSelected();
    }

    onBootstrapTableRef(instance) {
       this.bootstrapTableRef = instance;
    }

    componentDidUpdate() {
        this.clearSelectedRow();
    }

    public render() {

       ...
        return (
                <BootstrapTable data={this.props.lots} keyField="lotNumber" striped
                    condensed={true} id="searchResultsTable" selectRow={selectRow} hover ref={this.onBootstrapTableRef} options={{ noDataText: 'No lots to display.' }}>....</BootstrapTable>);