<div id="datatable-custom"></div>

​

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: 'Title', field: 'title' },

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

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

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

  ],

  rows: [

    {

      url: '/users/detail/645fd2fb626ecdfe7f105480',

      title: 'Beta',

      position: 'System Architect',

      office: 'Edinburgh',

      phone: '+48000000000',

      email: 'b@gmail.com',

    },

    {

      url: '/users/detail/645fd2fb626ecdfe7f105481',

      title: 'Alpha',

      position: 'Software Engineer',

      office: 'Edinburgh',

      phone: '+53456123456',

      email: 'a@gmail.com',

    },

    {

      url: '/users/detail/645fd2fb626ecdfe7f105482',

      title: 'Delta',

      position: 'Regional Director',

      office: 'London',

      phone: '+42123432456',

      email: 'c@gmail.com',

    },

  ].map((row) => {

    return {

      ...row,

      title: `<a href="${row.url}" target="_blank">${row.title}<a/>`,

    };

  }),

​

}, {sortField: 'title', sortOrder: 'asc'});