How to use popover in combination with datatable with clicka


Topic: How to use popover in combination with datatable with clickable rows?

mmmarkk01 pro premium priority asked 3 years ago

Expected behavior Clicking on a popover within a datatable with clickable rows should show the popover.

Actual behavior I have a datatable with clickable rows. When clicking on the row, the user is redirected to another page. Within the row there is also a popover. In line with the documentation I implemented the stopPropagation to block the redirect when clicking on the popover. However, the popover itself does not show.

Resources (screenshots, code snippets etc.)

Somewhat simplified, but this is the code:

<div id="active-projects-datatable"> </div>
<script>
    data = {
        columns: [
            { label: 'Name', field: 'name', },
            { label: 'Status', field: 'status',},
        ],
        rows: [
            {
                name: "Test!",
                status: [],
                url: "/home"
            }].map((row) => {
                if(row.status.length!=0){
                    status_button = `
                    <a
                    tabindex="0"
                    class="btn btn-danger"
                    role="button"
                    data-mdb-toggle="popover"
                    data-mdb-trigger="focus"
                    title="Error"
                    data-mdb-content="Oh no! Something went wrong."
                    >Error</a
                    >`

                }else{
                    status_button = `
                    <a
                    tabindex="0"
                    class="btn btn-success"
                    role="button"
                    data-mdb-toggle="popover"
                    data-mdb-trigger="focus"
                    title="Good"
                    data-mdb-content="All good!"
                    >Good</a
                    >`
                }
                return {
                ...row,
                status:  status_button};
            })
        };

        const tableDiv = document.getElementById('active-projects-datatable');
        // Add row clickable functionality
        tableDiv.addEventListener('rowClick.mdb.datatable', (e) => {
            window.location = data.rows[e.index].url;
        });
        // Make sure the buttons in a row are still clickable
        tableDiv.addEventListener('render.mdb.datatable', () => {
            Array.from(tableDiv.getElementsByClassName(`btn`)).forEach((button) => {
                button.addEventListener('click', (e) => {
                    e.stopPropagation();
                });
            });
        });
        // Create datatable
        table = new datatable(tableDiv , data, {
            sm: false,
            hover: true,
            clickableRows: true});
</script>

Grzegorz Bujański staff answered 3 years ago

The popover is added dynamically in this case (it is not added before the page is loaded) and requires manual initialization. This should help:

   const popoversEl = document.querySelectorAll('[data-mdb-toggle="popover"]');
    popoversEl.forEach((popoverEl) => {
      const popover = new mdb.Popover(popoverEl)
    })

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: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: Computer
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags