Selecting all visible rows in datatable

Got this working, but kind of hacky!

Approach

When setting up the datatable for the first time, register an event handler for the 'render' event. In there, hide the standard 'select all' checkbox, and replicate the 'select all' behaviour based on the searchResult prop of the datatable instance.

Assuming table refers to the element containing the datatable, and datatableInstance is the reference to the datatable itself:

table.addEventListener('render.mdb.datatable', () => {
  // Find the default 'select all' checkbox
  let selectAllCheckBox = document.querySelector('.datatable-header-checkbox.form-check-input');

  // Replace the default 'select all' checkbox
  const newSelectAllCheckBox = selectAllCheckBox.cloneNode(true);
  selectAllCheckBox.style.display = 'none';
  selectAllCheckBox.parentNode.appendChild(newSelectAllCheckBox);

  // Replace the checkbox behaviour
  newSelectAllCheckBox.addEventListener('input', (e) => {
    if (e.target.checked) {
      datatableInstance._selected = datatableInstance.searchResult.map((row) => row.rowIndex);
    } else {
      datatableInstance._selected = [];
    }

    datatableInstance._setSelected();
    datatableInstance._emitSelectEvent();
  });
});

At the moment, we do not have a preferred way to achieve this effect. To achieve effects other than standard in our components, we prefer only to adapt the src code to your own needs and create your own version of the MDB package. You can use our webpack starter for this purpose. It will help you create the build after the changes: https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/