FooTable with ReactJS (How can I call jQuery plugin from ReactJS component?)

Question

I'm switching from Non-ReactJS application, which is mostly using jQuery, to ReactJS.

This migration is no problem so far but my application was used "FooTable jQuery Plugin"

http://fooplugins.github.io/FooTable/index.html

https://jsfiddle.net/yzono/f95o0kdf/1/ <= This is a sample I created.

HTML

<table class="footable">
  <thead>
    <tr>
      <th data-class="expand">Name</th>
      <th data-hide="phone,tablet">Phone</th>
      <th data-hide="phone">Zip</th>
      <th data-hide="phone">Address</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Ken</td>
      <td>00-1234-5678</td>
      <td>110-0006</td>
      <td>Tokyo</td>
    </tr>
    <tr>
      <td>Hanako</td>
      <td>11-2345-6789</td>
      <td>550-0026</td>
      <td>Osaka</td>
    </tr>
    <tr>
      <td>Ichiro</td>
      <td>22-3456-7890</td>
      <td>812-0002</td>
      <td>Fukuoka</td>
    </tr>
    <tr>
      <td>Sato</td>
      <td>22-3456-7890</td>
      <td>468-0836</td>
      <td>Aichi</td>
    </tr>
  </tbody>
</table>

JS

$(function() {
  $('table').footable();
});

I like FooTable but it does not provide npm and I'm not sure how can I call jQuery plugin from ReactJS component.

Does anyone know about this? I think using Footable is not ideal with ReactJS but I didn't find any alternatives for responsible design.

Update 1

It may be possible to find a way. I will try it.

However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.

Does react.js play nice with jQuery/UI components

http://facebook.github.io/react/docs/working-with-the-browser.html

score 2 · Answer 1 · answered Apr 12 '16 at 15:50

It works. This article saved me.

https://taylorlovett.com/2015/08/05/modifying-the-dom-with-jquery-within-react-components-in-isomorphic-applications/

I used refs and componentDidUpdate().

componentDidUpdate: function(prevProps, prevState) {
    jQuery(ReactDOM.findDOMNode(this.refs.sampletable)).footable();
},

<table ref="sampletable">

FooTable with ReactJS (How can I call jQuery plugin from ReactJS component?)

1 Answers1