​

const customDatatable = document.getElementById('datatable-custom');

​

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}`)

    })

  })

}

​

customDatatable.addEventListener('render.mdb.datatable', setActions);

​

new mdb.Datatable(customDatatable, {

  columns: [

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

    { label: 'Position', field: 'position' },

    { label: 'Office', field: 'office' },

    { label: 'Contact', field: 'contact', sort: false },

  ],

  rows: [

    {

      name: 'Tiger Nixon',

      position: 'System Architect',

      office: 'Edinburgh',

      phone: '+48000000000',

      email: 'tiger.nixon@gmail.com'

    },

    {

      name: 'Sonya Frost',

      position: 'Software Engineer',

      office: 'Edinburgh',

      phone: '+53456123456',

      email: 'sfrost@gmail.com'

    },

    {

      name: 'Tatyana Fitzpatrick',

      position: 'Regional Director',

      office: 'London',

      phone: '+42123432456',

      email: 'tfitz@gmail.com'

    },

  ].map((row) => {

    return {

      ...row,

      contact: `

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

      <button class="message-btn btn ms-2 btn-primary btn-floating btn-sm" data-mdb-email="${row.email}"><i class="fas fa-allergies"></i></button>`,

    };

  }),

}, { hover: true });