Table Not Rendering

Topic: Table Not Rendering

Paul Gierz free asked 4 years ago

Hi, I'm trying to use a combination of Python Flask and React to display a table. I generate a table and have a HTTP Get which allows me to see something.

From the command line:

curl http://localhost:5000/queues/ollie | less

{
"data": {
"columns": [
  {
    "field": "ACCOUNT", 
    "label": "Account", 
    "sort": "asc"
  }, 
  {
    "field": "TRES_PER_NODE", 
    "label": "Tres_per_node", 
    "sort": "asc"
  }, 
 ....
 ]
"rows": [
   {
    "": "", 
    "ACCOUNT": "root", 
    "ARRAY_JOB_ID": "4873052", 
    "ARRAY_TASK_ID": "N/A", 
    "COMMAND": "/global/AWIsoft/tmp/hello_slurm.p220.sh 2", 
    "COMMENT": "(null)", 
    "CONTIGUOUS": "0", 
    "CORES_PER_SOCKET": "*", 
    "CORE_SPEC": "N/A", 
    "CPUS": "72", 
    "DEPENDENCY": "", 
    "END_TIME": "2020-01-26T02:28:21", 
    "EXC_NODES": "", 
    "EXEC_HOST": "n/a", 
    "FEATURES": "(null)", 
    "GROUP": "0", 
},
{ ... },
...

]

If I copy/paste the response directly into the Javascript and allow MDBDataTable to use it as Data, that works. However, I'd like it to get it periodically from the backend. This doesn't render though.

Here is what I have in my main.js

const DatatablePage = () => {
 return (
    <MDBDataTable
      scrollX
      striped
      bordered
      small
      data="http://localhost:5000/queues/ollie"
    />
  );
}

ReactDOM.render(DatatablePage(), document.getElementById("ollie_queue"))

What exactly am I doing wrong?

Thanks for the help!

Bartłomiej Malanowski staff commented 4 years ago

Do you get any console logs?

Add comment

Jakub Chmura staff answered 4 years ago

0 0 Best answer

Hi <a href="/profile/?id=88813" target="_blank" rel="nofollow">@Paul Gierz</a>,

Try to analize this code and do the same in your component:

<pre class="prettyprint"><code>import React from 'react';
import { MDBRow, MDBCol, MDBDataTable } from 'mdbreact';

class DatatableApiPage extends React.Component {
  state = {
    data: {}
  };

componentDidMount() {
    fetch('https://my-json-server.typicode.com/Rotarepmi/exjson/db')
      .then(res => res.json())
      .then(json => {
        let data = json;
        let { columns, rows } = json;

data = {
          columns,
          rows
        };
        this.setState({ data });
      });
  }

render() {
 const { data } = this.state;
 return (
 <MDBRow className='py-3'>
 <MDBCol md='12'>
 <MDBDataTable striped bordered hover data={data} />
 </MDBCol>
 </MDBRow>
 );
 }
}
export default DatatableApiPage;
</code></pre>

Let me know if this solution works in your case.

Best, Kuba

Please insert min. 20 characters.

Hi @Paul Gierz,

Try to analize this code and do the same in your component:

import React from 'react';
import { MDBRow, MDBCol, MDBDataTable } from 'mdbreact';

class DatatableApiPage extends React.Component {
  state = {
    data: {}
  };

  componentDidMount() {
    fetch('https://my-json-server.typicode.com/Rotarepmi/exjson/db')
      .then(res => res.json())
      .then(json => {
        let data = json;
        let { columns, rows } = json;

        data = {
          columns,
          rows
        };
        this.setState({ data });
      });
  }

  render() {
    const { data } = this.state;
    return (
      <MDBRow className='py-3'>
        <MDBCol md='12'>
          <MDBDataTable striped bordered hover data={data} />
        </MDBCol>
      </MDBRow>
    );
  }
}
export default DatatableApiPage;

Let me know if this solution works in your case.

Best, Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.24.0
Device: Laptop
Browser: Safari
OS: Mac OS X
Provided sample code: No
Provided link: No

Paul Gierz

5Support score
1Questions 0Answers 0Snippets