​

const tableColumns = [

  { label: 'Address', field: 'address' },

  { label: 'Company', field: 'company' },

  { label: 'Email', field: 'email' },

  { label: 'Name', field: 'name' },

  { label: 'Phone', field: 'phone' },

  { label: 'Username', field: 'username' },

  { label: 'Website', field: 'website' },

];

​

var asyncTable = new mdb.Datatable(

  document.getElementById('datatable'),

  { columns: tableColumns, },

  { loading: true }

);

​

fetch('https://jsonplaceholder.typicode.com/users')

  .then((response) => response.json())

  .then((data) => {

  asyncTable.update({}, {loading: false})

  asyncTable.dispose();

  document.getElementById('datatable').innerHTML = '';

  asyncTable = new mdb.Datatable(

  document.getElementById('datatable'),

  { columns: tableColumns,

    rows: data.map((user) => ({

          ...user,

          address: `${user.address.city}, ${user.address.street}`,

          company: user.company.name,

        })), },

  { loading: false }

);

  });