Topic: Selecting all visible rows in datatable

ppt premium asked 8 months ago


Expected behavior

When combining the table.search() functionality with the datatable selectable feature, I would expect the 'Select All' checkbox to only apply to those rows that are currently visible (i.e. pass the search filter criteria).

Actual behavior

Regardless of which rows are currently visible, the Select All checkbox selects every row in the table, including those that are not visible.

Is there any intention to change this behaviour, or is there a potential workaround to enable me to select only the visible rows using that 'Select All' checkbox?

Many thanks


Grzegorz Bujański staff answered 8 months ago


This is the intended action - the option is to select all records - not just those currently visible. We are not planning to change the behavior of this option.


ppt premium commented 8 months ago

Understood Grzegorz, and thanks for getting back to me. I therefore wonder if you could recommend how it might be possible to obtain the intersection of both selected and currently visible, via javascript?


Grzegorz Bujański staff answered 8 months ago


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/


ppt premium answered 8 months ago


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();
  });
});


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: Desktop
  • Browser: Edge
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: Yes