Topic: Option to disable perfect scrollbars on datatables

AHOY priority asked 1 year ago


Provide an option to disabled the use of perfect scrollbars on the datatable. The perfect scrollbars make vertical scrolling on touch devices difficult. When the scrolling is 'focused' on the datatable and the datatable does not have a maximum height (ie. no vertical scrolling needed within the table), vertical scrolling becomes stuck, requiring the user to swipe outside of the table to scroll the page.


AHOY priority answered 2 months ago


Answering my own question, unfortunately, there doesn't appear to be a way to prevent the perfect scrollbars from initializing if pagination is disabled and the Datatable is not sized (width/height), however, one can destroy the perfect scrollbars after the Datatable is initialized using something like:

const myDatatable = new mdb.Datatable(document.getElementById('my-datatable'), myData, { pagination: false });

myDatatable._perfectScrollbar.destroy();

The mdb.Datatable object appears to have a reference to the PerfectScrollbar object in _perfectScrollbar property and calling the destroy() method on the PerfectScrollbar object eliminates the scrollbars.


Kamila Pieńkowska staff commented 2 months ago

It is correct way to remove perfect scrollbar but its worth to mention that if you want your datatable to be readable o n mobile it will probably require some custom styling.


Kamila Pieńkowska staff answered 1 year ago


Can you explain how exactly you would like it to work? Most types of datatable availible do not have vertical scrollbar so you don't experience this problem. Your point is valid only for datatable with maximum height or fixed header.


AHOY priority commented 2 months ago

Hi Kamila, my datatable has no maximum height but the scrollbars appear anyways when hovering the cursor over the table. They serve no purpose since the table can't be scrolled. It's worth noting that pagination has been disabled. You can see the same issue on the Datatables builder (https://mdbootstrap.com/docs/standard/tools/builders/datatables/).



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No