Using DataTables with react

Question

I am very new to React and I am trying to use DataTables with table which I create in render(). So far my code looks like this- searchForm.js:

componentDidMount() {
    $(this.refs.table).DataTable({});
  }

  render() {
    var headerComponents = this.generateHeaders(),
        rowComponents = this.generateRows();
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input className="resizedTextbox" type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Enter Material to search"/>
          <br />
          <br />
          <input className="btn btn-primary" type="submit" value="Search" />
          <button type="button" className="btn btn-primary" onClick={this.resetSearch}>Reset</button>
        </form>
        <br />
        <div className="table-responsive">
            <table ref="table" className="table">
                <thead> {headerComponents} </thead>
                <tbody> {rowComponents} </tbody>
            </table>
        </div>
      </div>
    );
  }

Index.html:

<!DOCTYPE html>
<html>
  <body>
    <header style="background-color: #990000;margin-top: 0;position: relative;top: -10px;">
      <h1 style="margin-top: 0;color: white;padding: 10px;">DMFT Search</h1>
    </header>
    <div align="center" >
      <div id="main"></div>
    </div>
    <div id="search"></div>
    <!-- scripts -->
    <script src="{{ url_for('static', filename='bower_components/jquery/dist/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='bower_components/react/react.js') }}"></script>
    <script src="{{ url_for('static', filename='bower_components/react/react-dom.min.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/js/searchForm.js') }}"></script>
    <script src="{{ url_for('static', filename='bower_components/datatables.net/js/jquery.dataTables.js') }}"></script>
  </body>
</html>

The problem is that when I load the index.html, I do not see DataTables working, I get an exception in console :

Uncaught TypeError: $(...).DataTable is not a function
    at SearchForm.componentDidMount

Kindly advise if I am doing it the right way. I did not find ant help regarding this.

you are executing react code before jquery DataTable is loaded... Change the order of the loading scripts so your react code loads last — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Mar 15, 2017 at 1:35
Thanks, it works. Now Datatables is not working but I will have to open a new thread. Please vote the question if you found it relevant! — Raghav Pandya
– Raghav Pandya, Commented Mar 15, 2017 at 2:12
jQuery Data table is not the right thing to select in Reactjs. I would suggest you to explore Reactjs fixed data table from Facebook facebook.github.io/fixed-data-table — Ravi Roshan
– Ravi Roshan, Commented Mar 15, 2017 at 3:30

Pankaj Kumar · Accepted Answer · 2020-06-03 13:02:31Z

I know its an old one, But can help anybody else by trying the following.

Include the datatables js file or cdn link in your public/index.html after jquery file.
Create a js folder in public directory and create a custom.js file with code

$(function() { $("#example").DataTable(); });
Create a Table component , and inside componentDidMount or useEffect add this code

const script = document.createElement("script"); script.src = "/js/custom.js"; script.async = true; document.body.appendChild(script);
From the Table component return the table with id "example"

<table id="example" className="table table-striped table-bordered"> <thead> <tr> <th>head 1</th> <th>head 2</th> </tr> </thead> <tbody> <tr>Data 1</tr> <tr>Data 2</tr> </tbody> </table>

wayofthefuture · Accepted Answer · 2017-03-15 03:33:28Z

0

Index.html is not processed by react so just use plain strings. Try this:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="scripts/js/searchForm.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.js"></script>

answered Mar 15, 2017 at 3:33

wayofthefuture

9,6257 gold badges38 silver badges56 bronze badges

Collectives™ on Stack Overflow

Using DataTables with react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related