​

const columns = [

  { 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: 'Contact', field: 'contact' },

];

​

const asyncTable = new mdb.Datatable(

  document.getElementById('datatable'),

  { columns, },

  { loading: true }

);

​

const setActions = () => {

  document.getElementsByClassName('call-btn').forEach(btn => {

    btn.addEventListener('click', () => {

      console.log(`call ${btn.attributes['data-mdb-number'].value}`)

    })

  })

​

  document.getElementsByClassName('message-btn').forEach(btn => {

    btn.addEventListener('click', () => {

      console.log(`send a message to ${btn.attributes['data-mdb-email'].value}`)

    })

  })

}

​

asyncTable._element.addEventListener('render.mdb.datatable', setActions);

​

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

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

  .then((data) => {

    asyncTable.update(

      {

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

          ...user,

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

          company: user.company.name,

          contact: `

      <button class="call-btn btn btn-outline-primary btn-floating btn-sm" data-mdb-number="${user.phone}"><i class="fa fa-phone"></i></button>

      <button class="message-btn btn ms-2 btn-primary btn-floating btn-sm" data-mdb-email="${user.email}"><i class="fa fa-envelope"></i></button>

          `,

        })),

      },

      { loading: false }

    );

  });

​

​

​