title: React Js Data Table "No data available in table"
body: <p>I'm having trouble in React Js.
  My data table is successfully populated but still showing "No data available in table" on the first row
  <a href="https://imgur.com/ApQPoO9" rel="nofollow noreferrer">https://imgur.com/ApQPoO9</a></p>
  
  <p>This is screenshot of displayed html
  <a href="https://imgur.com/Zk25ksS" rel="nofollow noreferrer">https://imgur.com/Zk25ksS</a></p>
  
  <p>Also when I using the sorting and search thingy all my data will be gone and just displays "No data available in table"</p>
  
  <p>Network result : <a href="https://imgur.com/k5VqJIB" rel="nofollow noreferrer">https://imgur.com/k5VqJIB</a>
  My code to display data from database</p>
  
  <pre><code>class Uptime extends Component {
      constructor(props) {
          super(props);
          this.state = {
              error: null,
              isLoaded: false,
              data: []
          }
      }
  
      componentDidMount() {
          fetch('/uptime')
              .then(res =&gt; res.json())
              // .then(res =&gt; res.text())          // convert to plain text
              // .then(text =&gt; console.log(text))
              .then(
                  (result) =&gt; {
                      this.setState({
                          isLoaded: true,
                          data: result.data
                      })
                  },
                  (error) =&gt; {
                      this.setState({
                          isLoaded: true,
                          error
                      })
                  }
              )
      }
  
      render() {
          const {error, isLoaded, data} = this.state;
          // if (error) {
          //     return &lt;div&gt;Error: {error.message}&lt;/div&gt;;
          // } else if (!isLoaded) {
          //     return (
          //         &lt;div className="spinner-border text-primary" role="status"&gt;
          //             &lt;span className="sr-only"&gt;Loading...&lt;/span&gt;
          //         &lt;/div&gt;
          //     )
          // } else {    WHEN I ADD THIS CODE, THE SEARCH FUNCTION AND SORT FUNCtION IS GONE , SO I JUST REMOVE IT
          return (
              &lt;div id="content-wrapper" className="d-flex flex-column"&gt;
                  &lt;div id="content"&gt;
                      &lt;div className="container-fluid"&gt;
                          &lt;div className="card shadow mb-4 mt-5"&gt;
                              &lt;div className="card-header py-3 text-center"&gt;
                                  &lt;h6 className="m-0 font-weight-bold text-primary"&gt;DataTables Example&lt;/h6&gt;
                              &lt;/div&gt;
                              &lt;div className="card-body"&gt;
                                  &lt;div className="table-responsive"&gt;
                                      &lt;table className="table table-bordered" id="dataTable" width="100%"
                                             cellSpacing="0"&gt;
  
                                          &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th width="10%"&gt;Name&lt;/th&gt;
                                              &lt;th width="40%"&gt;Url&lt;/th&gt;
                                              &lt;th width="10%"&gt;Downtime&lt;/th&gt;
                                              &lt;th width="20%"&gt;date&lt;/th&gt;
                                              &lt;th width="10%"&gt;Status Code&lt;/th&gt;
                                          &lt;/tr&gt;
                                          &lt;/thead&gt;
                                          &lt;tbody&gt;
                                            {data.map(item =&gt; (
                                                          &lt;tr key={item[0]}&gt;
                                                          &lt;td&gt;{item[1]}&lt;/td&gt;
                                                          &lt;td&gt;{item[2]}&lt;/td&gt;
                                                          &lt;td&gt;{item[5]}&lt;/td&gt;
                                                          &lt;td&gt;{item[4]}&lt;/td&gt;
                                                          &lt;td&gt;{item[3]}&lt;/td&gt;
                                                          &lt;/tr&gt;
                                                        ))}
                                          &lt;/tbody&gt;
                                      &lt;/table&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;footer className="sticky-footer bg-white"&gt;
                      &lt;div className="container my-auto"&gt;
                          &lt;div className="copyright text-center my-auto"&gt;
                              &lt;span&gt;Copyright &amp;copy; Your Website 2019&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/footer&gt;
  
              &lt;/div&gt;
  
          )
  
      }
  }
  </code></pre>