​

const table = document.getElementById('datatable-clickable-rows');

const modal = document.getElementById('modal-clickable-rows');

const modalBody = document.getElementById('modal-body-clickable-rows');

const modalHeader = document.getElementById('modal-header-clickable-rows');

​

const modalInstance = new mdb.Modal(modal);

​

const setupButtons = (action) => {

  document.getElementsByClassName(`${action}-email-button`).forEach((button) => {

    button.addEventListener('click', (e) => {

      e.stopPropagation();

​

      const index = button.getAttribute('data-mdb-index');

​

      console.log(`${action} message: ${index}`, messages[index]);

    });

  });

};

​

const columns = [

  { label: 'Actions', field: 'actions', sort: false },

  { label: 'From', field: 'from' },

  { label: 'Title', field: 'title' },

  { label: 'Message', field: 'preview', sort: false },

  { label: 'Date', field: 'date' },

];

​

const messages = [

  {

    from: 'admin@mdbootstrap.com',

    title: 'MDBootstrap spring sale',

    message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.',

    date: '11/12/2019',

  },

  {

    from: 'user@mdbootstrap.com',

    title: 'How to purchase MDB5 package?',

    message: 'Quisque tempor ligula eu lobortis scelerisque. Mauris tristique mi a erat egestas, quis dictum nibh iaculis. Sed gravida sodales egestas. In tempus mollis libero sit amet lacinia. Duis non augue sed leo imperdiet efficitur faucibus vitae elit. Mauris eu cursus ligula. Praesent posuere efficitur cursus.',

    date: '10/12/2019',

  },

  {

    from: 'user@mdbootstrap.com',

    title: 'Licence renewal',

    message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.',

    date: '09/12/2019',

  },

  {

    from: 'admin@mdbootstrap.com',

    title: 'Black friday offer',

    message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.',

    date: '08/12/2019',

  },

];

​

const rows = messages.map((email, i) => {

  const getPreview = (message, length) => {

    if (message.length <= length) return message;

​

    return `${message.slice(0, length)}...`;

  };

​

  return {

    ...email,

    preview: getPreview(email.message, 20),

    actions: `

      <a role="button" class="star-email-button text-warning" data-mdb-index="${i}">

        <i class="far fa-star"></i>

      </a>

      <a role="button" class="delete-email-button text-muted ms-2" data-mdb-index="${i}">

        <i class="fa fa-trash-alt"></i>

      </a>

    `,

  };

});

​

table.addEventListener('rowClick.mdb.datatable', (e) => {

  const { index } = e;

  const { message, title, from } = messages[index];

​

  modalHeader.innerText = title;

  modalBody.innerHTML = `

    <h6 class="mb-4">From: <strong>${from}</strong></h6>

    <p>${message}</p>

  `;

​

  modalInstance.show();

});

​

table.addEventListener('render.mdb.datatable', () => {

  setupButtons('star');

  setupButtons('delete');

})

​

const datatableInstance = new mdb.Datatable(table, {

  columns,

  rows,

  { entries: 5, entriesOptions: [5, 10, 15], confirm: true }

});