title: Datatable did not show dynamic data which i fetch from database in react js
body: <p>I have integrated datatable in my react js web app. </p>
  
  <p>It works with sample data as i have mentioned in the code pagelist</p>
  
  <blockquote>
    <p>I have tried to make it component but did not get the result. I am new
    in react and did not able to clue to further progress.</p>
  </blockquote>
  
  <p>Here the list of my import packages</p>
  
  <pre><code>import axios from 'axios'
  import React, {Component} from 'react'
  import {BrowserRouter,Route,Switch,Link} from 'react-router-dom'
  import { MDBDataTable} from 'mdbreact';
  </code></pre>
  
  <p>// The below call get the data as i have confirmed in the console log </p>
  
  <pre><code>axios.get('/api/pagelist').then(response =&gt; {
  
      var pagelist = JSON.stringify(response.data);
      console.log(pagelist);
  
  });
  </code></pre>
  
  <p>//Sample test data which works with the example</p>
  
  <pre><code>var pagelist = [{
      name: 'Tiger Nixon',
      position: 'System Architect',
      office: 'Edinburgh',
      age: '61',
      date: '2011/04/25',
      salary: '$12320'
  },
  {
      name: 'Gavin Joyce',
      position: 'Developer',
      office: 'Edinburgh',
      age: '42',
      date: '2010/12/22',
      salary: '$92'
  },
  {
      name: 'Jennifer Chang',
      position: 'Regional Director',
      office: 'Singapore',
      age: '28',
      date: '2010/11/14',
      salary: '$357'
  },
  {
      name: 'Donna Snider',
      position: 'Customer Support',
      office: 'New York',
      age: '27',
      date: '2011/01/25',
      salary: '$112'
  }
  ];
  </code></pre>
  
  <p>// Just copy the function and change columns as guided by the documentation</p>
  
  <pre><code>const DatatablePage = () =&gt; {
      const data = {
          columns: [{
              label: 'ID',
              field: 'id',
              sort: 'asc',
              width: 60
              },
              {
                  label: 'Name',
                  field: 'name',
                  sort: 'asc',
                  width: 150
              },
  
              {
                  label: 'Title',
                  field: 'title',
                  sort: 'asc',
                  width: 150
              },
              {
                  label: 'Slug',
                  field: 'slug',
                  sort: 'asc',
                  width: 100
              },
              {
                  label: 'Content',
                  field: 'content',
                  sort: 'asc',
                  width: 250
              },
              {
                  label: 'Created',
                  field: 'created_at',
                  sort: 'asc',
                  width: 100
              }
          ],
          rows: pagelist
      };
      return (
  
          &lt;MDBDataTable striped bordered hover data = {data}/&gt;
      );
  }
  </code></pre>
  
  <p>//Finally exported it</p>
  
  <pre><code>export default DatatablePage;
  </code></pre>