Tailwind->Table With Drop Down Menu

tailwind_table_drop_down.md

Main points:

• No overflow-hidden on outer div for table
• z-50 on drop down div

<div class="shadow ring-1 ring-black ring-opacity-5 md: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-xs font-medium text-gray-500 uppercase tracking-wider text-left"><a class="sort_link asc" href="/features/112/stories?query%5Bactive_eq%5D=1&amp;query%5Bs%5D=position+desc">Position&nbsp;▲</a></th>
        <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"><a class="sort_link " href="/features/112/stories?query%5Bactive_eq%5D=1&amp;query%5Bs%5D=id+asc">Id</a></th>
        <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"><a class="sort_link " href="/features/112/stories?query%5Bactive_eq%5D=1&amp;query%5Bs%5D=title+asc">Title</a></th>
        <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider text-right">            
          <span class="sr-only">Edit Actions</span>
        </th>
       </tr>
    </thead>
    <tbody class="divide-y divide-gray-200 bg-white" data-controller="">
      <tr id="story_743" data-sgid="BAh7CEkiCGdpZAY6BkVUSSIhZ2lkOi8vbXktcHJlZGljdG9yL1N0b3J5Lzc0MwY7AFRJIgxwdXJwb3NlBjsAVEkiDGRlZmF1bHQGOwBUSSIPZXhwaXJlc19hdAY7AFRJIh0yMDIyLTEyLTE5VDA5OjQ1OjE1LjA5N1oGOwBU--b11750617ca68a36a5fdd31a355b56167461f9d1">
        <td class="px-6 py-2 whitespace-nowrap text-sm text-left hidden md:table-cell text-gray-500">   1 </td>
        <td class="px-6 py-2 whitespace-nowrap text-sm text-left text-gray-500"><a class=" font-medium text-blue-600 hover:text-blue-500" data-turbo-frame="feature_112_stories_container" href="/features/112/stories/743/edit">743</a></td>
        <td class="px-6 py-2 whitespace-nowrap text-sm text-left font-medium text-gray-900">    <a href="/features/112/stories?class=block">My First Story</a></td>
        <td class="px-6 py-2 whitespace-nowrap text-sm text-left hidden md:table-cell text-gray-500">   3    </td>
        <td class="px-6 py-2 whitespace-nowrap text-sm text-right text-gray-500"><div class="relative inline-block text-left" id="user_menu" data-controller="dropdown" aria-haspopup="true" aria-expanded="false" data-dropdown-open-value="false">
          <div data-action="click->dropdown#toggle click@window->dropdown#hide" data-dropdown-target="button">
            <button type="button" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-2 py-1 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100" id="menu-button" aria-expanded="true" aria-haspopup="true">
              Options
              <!-- Heroicon name: mini/chevron-down -->
              <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path>
              </svg>
            </button>
          </div>
          <!--
          Using excid3/tailwindcss-stimulus-components for JS
          -->
          <div data-dropdown-target="menu" class="absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
            <div class="py-1" role="none">
              <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
              <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0">Edit</a>
              <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1">Move</a>
              <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2">Test Cases</a>
            </div>
          </div>
        </td>
       </tr>
      </tbody>
     </table>
    </div>