Issue regarding dropdowns combined with tables

[anthonymakela]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/lists/tables
• Component name: Tables (Simple striped)

Describe the bug The dropdown gets cut off while it should be rendered on top of the table. This bug seems to be already posted here, but the solutions require some additional js libraries e.g popper which aren't applicable to everyone. The current solution basically implies that tailwind cannot handle dropdowns within tables with the regular alpine usage.

To Reproduce

<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Name
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Title
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Email
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Role
                </th>
                <th scope="col" class="relative px-6 py-3">
                    <span class="sr-only">Edit</span>
                </th>
            </tr>
        </thead>
        <tbody x-max="2">
            <tr class="bg-gray-50" x-description="Even row">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    Jenny Wilson
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    Central Security Manager
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    jenny.wilson@example.com
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    Member
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
                </td>
            </tr>

            <tr class="bg-white" x-description="Odd row">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    Kristin Watson
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    Lead Implementation Liaison
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    kristin.watson@example.com
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    Admin
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <div x-data="{ open: true }" @keydown.escape.stop="open = false" @click.away="open = false" class="relative inline-block text-left">
                        <div>
                            <button
                                type="button"
                                class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500"
                                id="options-menu"
                                @click="open = !open"
                                aria-haspopup="true"
                                x-bind:aria-expanded="open"
                            >
                                Options
                                <svg class="-mr-1 ml-2 h-5 w-5" x-description="Heroicon name: solid/chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                </svg>
                            </button>
                        </div>

                        <div
                            x-description="Dropdown menu, show/hide based on menu state."
                            x-show="open"
                            x-transition:enter="transition ease-out duration-100"
                            x-transition:enter-start="transform opacity-0 scale-95"
                            x-transition:enter-end="transform opacity-100 scale-100"
                            x-transition:leave="transition ease-in duration-75"
                            x-transition:leave-start="transform opacity-100 scale-100"
                            x-transition:leave-end="transform opacity-0 scale-95"
                            class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
                            role="menu"
                            aria-orientation="vertical"
                            aria-labelledby="options-menu"
                            style="display: none;"
                        >
                            <div class="py-1" role="none">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Account settings</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Support</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">License</a>
                                <form method="POST" action="#" role="none">
                                    <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Sign out</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>

            <tr class="bg-gray-50" x-description="Even row">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    Cameron Williamson
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    Internal Applications Engineer
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    cameron.williamson@example.com
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    Member
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Expected behavior The dropdown should be rendered on top of the table.

Screenshots

[milorojas]

Check the solution on #147, that works for me.

[schmoove]

While it's much more convenient to keep the overflow-hidden, I've resorted to removing it from any tables I need dropdown menus to overflow, and added rounded- classes to the top/bottom corner cells instead.

[davidluhr]

@anthonymakela Thank you for reporting this.

We're looking into a fix for this and related issues: https://github.com/tailwindlabs/tailwindui-issues/issues/681 and https://github.com/tailwindlabs/tailwindui-issues/issues/692

[reinink]

Closing this in favor of #692.

[reinink]

@anthonymakela Hey thanks again for reporting this. I've just left a comment about this in the related issue that you might find helpful: #692 (comment)