Topic: Async Datatable and Popover on column header.

mmmarkk01 priority asked 1 year ago


Expected behavior When hovering or clicking on a popover object within a data table column header be able to show it.

Actual behavior It does not show.

Resources (screenshots, code snippets etc.) Check out my snippet: https://mdbootstrap.com/snippets/standard/mmmarkk01/5214926


Grzegorz Bujański staff answered 1 year ago


The Datatable rerenders itself after each data refresh. For the Popover to work after every render you need to init the Popover. You can do this using the render.mdb.datatable event

const myDatatableEl = document.getElementById('datatable');
myDatatableEl.addEventListener('render.mdb.datatable', () => {
    const myPopoverEl = document.getElementById('myPopover');
    const instance = mdb.Popover.getOrCreateInstance(myPopoverEl)
})

mmmarkk01 priority commented 1 year ago

Great, thanks. For others and future reference. Here is a working snippet: https://mdbootstrap.com/snippets/standard/mmmarkk01/5215613



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: Computer
  • Browser: Mozilla Firefox 112.0.2
  • OS: Windows 11 Home
  • Provided sample code: No
  • Provided link: Yes