React Js Data Table "No data available in table"

Question

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 https://i.sstatic.net/nrZaL.jpg

This is screenshot of displayed html https://i.sstatic.net/JUxkz.jpg

Also when I using the sorting and search thingy all my data will be gone and just displays "No data available in table"

Network result : https://i.sstatic.net/zTOpZ.jpg My code to display data from database

class Uptime extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            data: []
        }
    }

    componentDidMount() {
        fetch('/uptime')
            .then(res => res.json())
            // .then(res => res.text())          // convert to plain text
            // .then(text => console.log(text))
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        data: result.data
                    })
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    })
                }
            )
    }

    render() {
        const {error, isLoaded, data} = this.state;
        // if (error) {
        //     return <div>Error: {error.message}</div>;
        // } else if (!isLoaded) {
        //     return (
        //         <div className="spinner-border text-primary" role="status">
        //             <span className="sr-only">Loading...</span>
        //         </div>
        //     )
        // } else {    WHEN I ADD THIS CODE, THE SEARCH FUNCTION AND SORT FUNCtION IS GONE , SO I JUST REMOVE IT
        return (
            <div id="content-wrapper" className="d-flex flex-column">
                <div id="content">
                    <div className="container-fluid">
                        <div className="card shadow mb-4 mt-5">
                            <div className="card-header py-3 text-center">
                                <h6 className="m-0 font-weight-bold text-primary">DataTables Example</h6>
                            </div>
                            <div className="card-body">
                                <div className="table-responsive">
                                    <table className="table table-bordered" id="dataTable" width="100%"
                                           cellSpacing="0">

                                        <thead>
                                        <tr>
                                            <th width="10%">Name</th>
                                            <th width="40%">Url</th>
                                            <th width="10%">Downtime</th>
                                            <th width="20%">date</th>
                                            <th width="10%">Status Code</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                          {data.map(item => (
                                                        <tr key={item[0]}>
                                                        <td>{item[1]}</td>
                                                        <td>{item[2]}</td>
                                                        <td>{item[5]}</td>
                                                        <td>{item[4]}</td>
                                                        <td>{item[3]}</td>
                                                        </tr>
                                                      ))}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <footer className="sticky-footer bg-white">
                    <div className="container my-auto">
                        <div className="copyright text-center my-auto">
                            <span>Copyright &copy; Your Website 2019</span>
                        </div>
                    </div>
                </footer>

            </div>

        )

    }
}

Hello, please provide a Minimal, Complete, and Reproducible code example, i.e. the component code that fetches, processes, and renders the data. — Drew Reese
– Drew Reese, Commented May 12, 2020 at 6:12
Looks like "No data available in table" is part of your data that is being mapped into the DOM. Can you also provide your response from network? Unlikely but I wonder if it's a react key issue. — Drew Reese
– Drew Reese, Commented May 12, 2020 at 6:16
@DrewReese, Nope "No data available in table" is NOT part of my data — Yan
– Yan, Commented May 12, 2020 at 6:17

Vivek Doshi · Accepted Answer · 2020-05-12 07:27:21Z

4

Issue :

Datatable is being initialized before the data comes, so it will show "No data available in table" , once table is initialized then after you are making changes in that table , so you data got append after the row "No data available in table" , you can check that issue by running below snippet.

const { useState , useEffect } = React;

const App = () => {

  const [users,setUsers] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setUsers([[0,"Vivek"],[1,"Darshita"]]);
    },2000);
  },[]);

  return (
    <table className="table table-bordered" id="dataTable" width="100%" cellSpacing="0">
    <thead>
        <tr>
            <th width="10%">Name</th>
        </tr>
    </thead>
    <tbody>
        {
            users.map(item => (
                    <tr key={item[0]}>
                        <td>{item[1]}</td>
                    </tr>))
        }
    </tbody>
    </table>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

$(document).ready(function() {
    $('#dataTable').DataTable();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<div id="react-root"></div>

Solution :

As datatable is being initialized automatically, you have to destroy it before setting up the state and and reinitialized it once data is available, as you can see the same in the below snippet

const { useState , useEffect } = React;

const App = () => {

  const [users,setUsers] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      $('#dataTable').DataTable().destroy();
      setUsers([[0,"Vivek"],[1,"Darshita"]]);
    },2000);
  },[]);

  useEffect(() => {
      $('#dataTable').DataTable();
  },[users]);

  return (
    <table className="table table-bordered" id="dataTable" width="100%" cellSpacing="0">
    <thead>
        <tr>
            <th width="10%">Name</th>
        </tr>
    </thead>
    <tbody>
        {
            users.map(item => (
                    <tr key={item[0]}>
                        <td>{item[1]}</td>
                    </tr>))
        }
    </tbody>
    </table>
  );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

$(document).ready(function() {
    $('#dataTable').DataTable();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<div id="react-root"></div>

answered May 12, 2020 at 7:27

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Yan Over a year ago

let me try this and will get back with the result :)

Yan Over a year ago

"Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:" I still dont know about useEffects so I cant seem to make this work :), althought I got your logic on how to solve it

Vivek Doshi Over a year ago

You have to put that in componentDidMount , put $('#dataTable').DataTable().destroy(); before fetch and $('#dataTable').DataTable(); after you fetch the data

Vivek Doshi Over a year ago

@Yan, check now

Yan Over a year ago

I have added an error on the code link, I think this is already related to jquery

|

Amed · Accepted Answer · 2022-05-27 12:22:11Z

0

This solution have no sense but solved this problem for me :

useEffect(()=>{
        const timer = setTimeout(function () {
            ApplyDataTable()// here you call the datatable logic 
        }, 0);  // you see here , it run immediatly no ,dely !!!!but it solve it :D
        return () => clearTimeout(timer);

})

answered May 27, 2022 at 12:22

Amed

3213 silver badges4 bronze badges

Collectives™ on Stack Overflow

React Js Data Table "No data available in table"

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related