Topic: Async Datatable and Popover on column header.
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
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 pro premium 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
- User: Pro
- 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