Using

Here's my ponent containing the table code:

var Component = React.createClass({
  render: function() {
    return (
      <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
            <div className="row">
                <ol className="breadcrumb">
                    <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
                    <li className="active">Users</li>
                </ol>
            </div><!--/.row-->

            <div className="row">
                <div className="col-lg-12">
                    <h1 className="page-header">Tables</h1>
                </div>
            </div><!--/.row-->


            <div className="row">
                <div className="col-lg-12">
                    <div className="panel panel-default">
                        <div className="panel-heading">User List</div>
                        <div className="panel-body">
                            <table ref='table' data-toggle="table" data-url='http://localhost:3000/admin/users'  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
                                <thead>
                                    <tr>
                          <th data-field="firstName">First Name</th>
                          <th data-field="lastName">Last Name</th>
                          <th data-field="level">Level</th>
                          <th data-field="verified">Verified</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div><!--/.row-->

        </div><!--/.main-->
    );
  }
});

It works fine if I directly load a page containing this table. However, if I use react-router to transition to this page from a different page, the table does not load. It looks as if the that loads bootstrap-table.js got unloaded.

Using http://bootstrap-table.wenzhixin.cn

Here's my ponent containing the table code:

var Component = React.createClass({
  render: function() {
    return (
      <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
            <div className="row">
                <ol className="breadcrumb">
                    <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
                    <li className="active">Users</li>
                </ol>
            </div><!--/.row-->

            <div className="row">
                <div className="col-lg-12">
                    <h1 className="page-header">Tables</h1>
                </div>
            </div><!--/.row-->


            <div className="row">
                <div className="col-lg-12">
                    <div className="panel panel-default">
                        <div className="panel-heading">User List</div>
                        <div className="panel-body">
                            <table ref='table' data-toggle="table" data-url='http://localhost:3000/admin/users'  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
                                <thead>
                                    <tr>
                          <th data-field="firstName">First Name</th>
                          <th data-field="lastName">Last Name</th>
                          <th data-field="level">Level</th>
                          <th data-field="verified">Verified</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div><!--/.row-->

        </div><!--/.main-->
    );
  }
});

It works fine if I directly load a page containing this table. However, if I use react-router to transition to this page from a different page, the table does not load. It looks as if the that loads bootstrap-table.js got unloaded.

• javascript
• twitter-bootstrap
• reactjs
• bootstrap-table

• Ninja can you write if Ninja's solution work? – Matt Commented Aug 26, 2015 at 18:44

3 Answers 3

It's a Bootstrap table ponent for React.js

Maybe you can try it !!

That's because that table is not a React aware ponent!

This happens because the table was created after bootstrap-table initialised all tables. This is a problem when you use third-party non-React ponents with React because React works differently. React renders the ponent only when it is required to be rendered. That is one of the reasons why your page is so performant. it doesn't render unnecessarily. But this has a drawback with third-party non-React ponents because these ponents assume you have everything loaded on page load and don't change anything later when DOM changes. These third-party non-React ponents have no idea about React's lifecycle.

To fix this, React has a lifecycle method called ponentDidMount which is called once the entire ponent is rendered on screen. You can put your third-party code's initialisers here. So what you need to do is not use "data-toggle" anymore and instead call the Javascript directly (as detailed here: http://bootstrap-table.wenzhixin.cn/getting-started/#usage-via-javascript). Once you add the code to ponentDidMount, the code is called every time the ponent is rendered. When you change your page or remove the ponent from the page ponentWillUnmount is called. Here you clean up your initialised bootstrap-table by calling $(node).bootstrapTable('destroy') and freeing up memory.

So make these changes to your code (changes are highlighted where <<<< here):

var Component = React.createClass({


  ponentDidMount: function() {              <<<< here
    var node = this.refs.table.getDOMNode();   <<<< here
    $(node).bootstrapTable();                  <<<< here

  },

  ponentWillUnmount: function() {          <<<< here
    var node = this.refs.table.getDOMNode();  <<<< here
    $(node).bootstrapTable('destroy');        <<<< here
  },


  render: function() {
    return (
             ... code ...
             <table ref='table' etc..         <<<<< here - remove data-toggle and use only ref
             ... code ...
    );
  }
});

This table is modified by an external library which will not work well with React.

Try an alternative table like https://facebook.github.io/fixed-data-table/

or see if this works

var Component = React.createClass({
  shouldComponentUpdate: function() {
    return false;
  },
  render: function() {