onClick doesn't work in react-tabulator footer

[Abhijeet501]

Title

• bug: footer element onclick...
• feature: please add...
• enhancement: add this to existing features...

Environment Details

• react-tabulator version: 0.14.2
• OS:10
• Node.js version:6.14.4

Long Description No error just just the onclick donot work, nothing happens after I click the selectall button. any idea what am I missing thank you!

i have binded the selectall method in the constructor 
this.selectAll = this.selectAll.bind(this);

selectAll() {
    alert("clicked");
  }

  renderSearchResults() {
    let customFooterElement = (
      <div>
        <Button id="selectall" onClick={this.selectAll}>
          SelectAll
        </Button>
      </div>
    );
    return (
      <Fragment>
        <ReactTabulator
          style={{
            height: "85vh",
          }}
          columns={[]
            .concat({
              title: "FileName",
              field: "FileName",
              formatter: "link",
              width: "130",
              cellClick: (e, cell) => {
                this.viewFile(e, cell);
              },
            })
            .concat(
              this.state.columns.map((c) => {
                console.log(c);
                return {
                  title: c.InputName,
                  field: c.InputName,
                };
              })
            )}
          data={this.state.results}
          footerElement={customFooterElement}
          options={{
            pagination: "local",
            paginationSize: 25,
          }}
        />
      </Fragment>
    );
  }

Workaround

...

(Please help with a PR if you have a solution. Thanks!)

[ngduc]

@Abhijeet501 This is known. Tabulator library renders footer as HTML without react binding. I suggest you render a React footer component outside of ReactTabulator. I'm open for PRs / suggestions.

[stefaneidelloth]

The click event of the button works if I use plain tabulator and jsfiddle. It also works with react-tabulator, if I specify the footerElement as a string and use escaped strings inside it:

a) footerElement= {"<button onclick=\"alert('clicked')\">Click me</button>"}

With jsx syntax the button is shown but I did not get the event working:

b) footerElement= <button onClick={()=>alert('clicked')}>Click me</button>

As a workaround, I created a placeholder div in the footerElement and replace it with ReactDOM.render inside some event handler:

footerElement={"<div id='footer-element-placeholder'></div>"}
events={{
                tableBuilt: function () {
                  self._createCustomFooter();
                  console.log("Table has been built");
                },              
              }}

_createCustomFooter(){
        let customFooter = <div>Custom footer</div>
        let footerPlaceHolder = document.getElementById('footer-element-placeholder')
        render(customFooter, footerPlaceHolder);
}

I also tried to use componentDidMount. However, the placeholder element does not yet exist when componentDidMountis called.