Topic: Async Datatable and Popover on column header.
                  
                  mmmarkk01
                  priority
                  asked 2 years 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
                      free
                        answered 2 years 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 2 years ago
Great, thanks. For others and future reference. Here is a working snippet: https://mdbootstrap.com/snippets/standard/mmmarkk01/5215613
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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