Filter/Pagination dropdown not working

[RazvanDev]

Hello, First of all thank you for making this awesome component. It really saved my hide with a feature we're supposed to implement.

I just want to say that for some reason with the dropdowns for filter and pagination don't work at all.. I followed your code examples and saw that they don't seem to work there either.

[rubanraj54]

Thanks for reporting the issue @RazvanDev .

I've checked the demo and yes it is not working. I will quickly have a look and try to fix it ASAP.

[rubanraj54]

Hey @RazvanDev , I found the issue. In the codepen, somehow I've removed jQuery dependency. That's why it wasn't working in demo page.

Thanks for your valuable feedback & letting me know about the issue.

If you would like to support this plugin, please give this repository a star 🌟

[sebj54]

For those like who do not want jQuery just to toggle dropdowns, I coded a workaround in a custom component which wraps <vue-bootstrap4-table>.

Feel free to use it to fit your needs! :)

<template>
    <vue-bootstrap4-table
        class="records-list"
        :rows="rows"
        :columns="columns"
        :config="config"
    >
        <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
        <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
            <slot :name="name" v-bind="slotData" />
        </template>
    </vue-bootstrap4-table>
</template>

<script>
import VueBootstrap4Table from 'vue-bootstrap4-table'

export default {
    components: {
        VueBootstrap4Table,
    },
    props: {
        columns: {
            type: Array,
            required: true,
        },
        rows: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
            config: {
                // your config
            },
            dropdowns: [],
        }
    },
    mounted() {
        this.enableDropdowns()
    },
    updated() {
        this.enableDropdowns()
    },
    destroyed() {
        this.dropdowns.forEach(($dropdown) => {
            document.removeEventListener('click', $dropdown.clickOutsideEvent)
        })
    },
    methods: {
        enableDropdowns() {
            this.$el.querySelectorAll('[data-toggle="dropdown"]').forEach(($dropdownToggle) => {
                const $dropdown = $dropdownToggle.nextElementSibling
                let isShown = false

                function setIsShown(state) {
                    isShown = state
                    $dropdown.classList.toggle('show', isShown)
                }

                if (!this.dropdowns.includes($dropdown)) {
                    this.dropdowns.push($dropdown)

                    $dropdownToggle.addEventListener('click', (event) => {
                        event.preventDefault()
                        setIsShown(!isShown)
                    })

                    $dropdown.addEventListener('click', (event) => {
                        event.preventDefault()
                        setIsShown(false)
                    })

                    $dropdown.clickOutsideEvent = (event) => {
                        const isDropdownOrChildren = $dropdown === event.target || $dropdown.contains(event.target)
                        const isDropdownToggleOrChildren = $dropdownToggle === event.target || $dropdownToggle.contains(event.target)

                        if (!isDropdownOrChildren && !isDropdownToggleOrChildren) {
                            setIsShown(false)
                        }
                    }
                    document.addEventListener('click', $dropdown.clickOutsideEvent)
                }
            })
        },
    },
}
</script>

This component also allow to use the same slots than vue-bootstrap4-table easily!