​

.datatable-inner.table-responsive {

    overflow: visible !important;

}

​

.dropdown-menu.show {

  z-index: 9999 !important;

}

  const basicData = {

    columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],

    rows: [

      ["Tiger Nixon", "System Architect", "Edinburgh", "61", "2011/04/25", "$320,800"],

    ].map(row => {

      const name = row.shift()

      var dropdownItems = ""

      row.map(item => {

        dropdownItems += `<li class="dropdown-item">${item}</li>`;

      })

      const dropdown = `

      <div class="d-flex">

        <a

          class="dropdown-toggle"

          type="button"

          id="dropdownMenuButton"

          data-mdb-toggle="dropdown"

          aria-expanded="false"

          >

          ${name}

        </a>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">

          ${dropdownItems}

        </ul>

      </div>`;

      return [dropdown, ...row];

    }),

  };

​

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

​

new mdb.Datatable(datatable, basicData);

​

datatable.addEventListener('selectRows.mdb.datatable', e => {

  console.log(e.selectedRows, e.selectedIndexes, e.allSelected);

})

​

document.querySelectorAll('tr').forEach((row)=>{

  row.querySelectorAll('td').forEach((field)=>{

    if (field.innerHTML==='Tiger Nixon'){

      row.querySelector('input').checked = true

    }

  })

})