Pattern Library

<div class="__js-root">
  <ui-popout-table sizing-classes="max-w-[100ch] w-full" :open-by-default="false">
    <template slot="head">
      <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
        <th>
          <p>
            Company
          </p>
        </th>
        <th>
          <p>
            Contact
          </p>
        </th>
        <th>
          <p>
            Country
          </p>
        </th>
      </tr>
    </template>

    <template slot="body">
      <tr>
        <td>
          <p>
            Alfreds Futterkiste
          </p>
        </td>
        <td>
          <p>
            Maria Anders
          </p>
        </td>
        <td>
          <p>
            Germany
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p>
            Centro comercial Moctezuma
          </p>
        </td>
        <td>
          <p>
            Francisco Chang
          </p>
        </td>
        <td>
          <p>
            Mexico
          </p>
        </td>
      </tr>
    </template>
  </ui-popout-table>
</div>