How to position a dropdown relatively to body, not parent, with popper js

Question

Basically I have a table that is scrollable, and in the last column is an ellipsis which opens a dropdown, but because the table is scrollable dropdown is being cut off.

If you look at the bootstrap's implementation of dropdowns with popper js they have a boundary option that you can pass.

This is how it looks like right now:

And this is my code so far:

<template>
    <div class="relative">
        <div @click="toggleDropdown" ref="trigger">
            <slot name="trigger"></slot>
        </div>

        <div :class="[widthClass]"
             @click="open = false"
             class="rounded-md shadow-lg bg-white border border-gray-100 dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
             ref="menu"
             v-show="open">
            <div :class="contentClasses" class="rounded-md shadow-xs">
                <slot name="content"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    import {createPopper} from '@popperjs/core';

    export default {

        props: {
            width         : {
                default: '48',
            },
            contentClasses: {
                default: () => ['py-1'],
            },
        },

        computed: {
            widthClass() {
                return {
                    '48': 'w-48',
                    '56': 'w-56',
                    '64': 'w-64',
                }[this.width.toString()]
            },
        },

        data() {
            return {
                open: false
            }
        },

        methods: {
            toggleDropdown() {
                if (this.open) {
                    this.open = false;
                } else {
                    this.open = true;
                    createPopper(this.$refs.trigger, this.$refs.menu, {
                        placement: 'bottom-start',
                        container: 'body',
                        modifiers: [
                            {
                                name   : 'preventOverflow',
                                enabled: false,
                                options: {
                                    boundary    : document.body,
                                    altBoundary : true,
                                    rootBoundary: 'window',
                                }
                            }
                        ]
                    });
                }
            },
        },
    }
</script>

Honestly, I have no idea what I'm doing, the popper js docs provide no examples, just diagrams. Help will be appreciated.

Answer 1

Are you using bootstrap v5 o v4.5? It works to me with v4.5 with html attribute data-boundary="window". But I couldn't make it work with v5 so I finally found another solution:

return new bootstrap.Dropdown(dropdownTriggerEl, {
            popperConfig: {
                strategy: "fixed"
            }
        });

without strategy option:

with strategy option:

By the way. Still have no idea how to make it works declaratively with data-bs-... html attributes.