Custom dropdown button in ModelTable

[gonribeiro]

Hello everyone,

I'm facing a very specific issue regarding the frontend layout of the buttons in the PowerGrid header, and I would appreciate any assistance you can provide.

In my project, I need to add a button with a dropdown menu inside the ModelTable.
This is necessary because there are too many action options, and creating a separate button for each one would not be visually practical.

To achieve this, I used:

->includeViewOnTop("components.datatable.model-header")

However, this approach causes the custom button to overlap the native PowerGrid buttons (such as "Export CSV" and "Show/Hide Columns").
Additionally, when the dropdown menu is opened, it pushes the existing buttons downward, disrupting the layout.

Currently, my best workaround has been to manually adjust the CSS to position the button correctly.
However, when the sidebar is open, the positioning breaks again.
While I could continue tweaking the CSS, I would prefer to know if there is a more appropriate or recommended way to handle this.

Setting the button with position: relative leads to so many layout issues that it doesn't seem worthwhile to pursue that path.

Below is the code for my model-header.blade file and a screenshot showing the current result:

<style>
    .dropdown-container {
        position: absolute;
        left: 184px;
        top: 81px;
        z-index: 50;
    }

    @media (max-width: 1024px) {
        .dropdown-container {
            position: absolute;
            top: auto;
            left: 117px;
            transform: none;
        }
    }

    @media (max-width: 590px) {
        .dropdown-container {
            position: absolute;
            top: 149px;
            left: 112px;
            transform: none;
        }
    }
</style>

<div x-data="{ open: false }" @click.away="open = false" class="dropdown-container">
    <button
        @click="open = !open"
        class="pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700 dark:ring-offset-pg-primary-800 dark:text-pg-primary-300 dark:bg-pg-primary-700 ml-1 mr-1.5"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 12h18M3 6h18M3 18h18"></path>
        </svg>
    </button>

    <div x-show="open" x-transition class="relative left-0 ml-1.5 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
        <div class="py-1">
            <a href="#" @click="$wire.edit(); open = false" class="block px-4 py-2 text-sm text-gray-700">Option 1</a>
            <a href="#" @click="open = false" class="block px-4 py-2 text-sm text-gray-700">Option 2</a>
            <a href="#" @click="open = false" class="block px-4 py-2 text-sm text-gray-700">Option 3</a>
        </div>
    </div>
</div>

[luizeduardo29]

I need to do this in one of my projects but I can't implement it.

[gonribeiro]

Hello everyone, I’ve found a very satisfactory solution.

For this solution, I’m using PowerGrid Livewire version 6.3.1. Please note that you may need to make adjustments if you're using a different version.

Step 1: Publish the views

php artisan vendor:publish --tag=livewire-powergrid-views
php artisan optimize:clear

Step 2: Modify the header view

In:

myproject/resources/views/vendor/livewirepowergrid/components/frameworks/tailwind/header.blade.php

Inside the div with the class flex flex-row items-center text-sm flex-wrap, I added the following:

@include('components.datatable.dropdown-menu')

Here’s the full modified section:

<div>
    @includeIf(data_get($setUp, 'header.includeViewOnTop'))

    <div class="mb-3 md:flex md:flex-row w-full justify-between items-center">
        <div class="md:flex md:flex-row w-full gap-1">
            <div x-data="pgRenderActions">
                <span class="pg-actions" x-html="toHtml"></span>
            </div>
            <div class="flex flex-row items-center text-sm flex-wrap">
                @if (data_get($setUp, 'exportable'))
                    <div
                        class="mr-2 mt-2 sm:mt-0"
                        id="pg-header-export"
                    >
                        @include(data_get($theme, 'root') . '.header.export')
                    </div>
                @endif
                @includeIf(data_get($theme, 'root') . '.header.toggle-columns')
                @includeIf(data_get($theme, 'root') . '.header.soft-deletes')
                @if (config('livewire-powergrid.filter') == 'outside' && count($this->filters()) > 0)
                    @includeIf(data_get($theme, 'root') . '.header.filters')
                @endif
                @include('components.datatable.sample-dropdown-menu')
            </div>
            @includeWhen(boolval(data_get($setUp, 'header.wireLoading')),
                data_get($theme, 'root') . '.header.loading')
        </div>
        @include(data_get($theme, 'root') . '.header.search')
    </div>

    @includeIf(data_get($theme, 'root') . '.header.enabled-filters')

    @includeWhen(data_get($setUp, 'exportable.batchExport.queues', 0), data_get($theme, 'root') . '.header.batch-exporting')
    @includeWhen($multiSort, data_get($theme, 'root') . '.header.multi-sort')
    @includeIf(data_get($setUp, 'header.includeViewOnBottom'))
    @includeIf(data_get($theme, 'root') . '.header.message-soft-deletes')
</div>

Step 3: Create the dropdown menu partial

In:

myproject/resources/views/components/datatable/dropdown-menu.blade.php

I inserted the complete code for the dropdown menu:

{{-- CSS to prevent elements with x-cloak from appearing before Alpine loads --}}
<style>
    [x-cloak] {
        display: none !important;
    }
</style>

<div x-data="{ open: false }" @click.away="open = false" class="relative inline-block text-left">
    <button
        @click="open = !open"
        class="pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700 dark:ring-offset-pg-primary-800 dark:text-pg-primary-300 dark:bg-pg-primary-700 mr-1.5"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 12h18M3 6h18M3 18h18"></path>
        </svg>
    </button>

    <div
        x-show="open"
        x-transition
        x-cloak
        class="sample-dropdown-menu absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
    >
        <div class="py-1">
            <a href="#" @click="$wire.edit(); open = false" class="block px-4 py-2 text-sm text-gray-700">Option 1</a>
            <a href="#" @click="open = false" class="block px-4 py-2 text-sm text-gray-700">Option 2</a>
            <a href="#" @click="open = false" class="block px-4 py-2 text-sm text-gray-700">Option 3</a>
        </div>
    </div>
</div>

Step 4: Handle selected rows in the component

Note that Option 1 is able to capture the rows selected via checkbox. This means you can perform actions on the selected records. To support this, ensure your Livewire component (ModelTable) contains the following method:

#[On("edit.{tableName}")]
public function edit(): void
{
    if ($this->checkboxValues) {
        redirect(route("model.edit", implode(",", $this->checkboxValues)));
    } else {
        $this->js("alert('No records selected')");
    }
}

Let me know if you'd like a downloadable version or want help turning this into a reusable component!