Skip to content
HyperUI

No results found.

Back to application components

Tables

Responsive table components for displaying data in dashboards, admin panels, and web applications with bordered, striped, and sticky header options.

Updated: N/ANo commit information available.

Base

markmead

<div class="overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200">
      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Bordered

markmead

<div class="overflow-x-auto rounded border border-gray-300 shadow-sm">
  <table class="min-w-full divide-y-2 divide-gray-200">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200">
      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Striped

markmead

<div class="overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200 *:even:bg-gray-50">
      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Sticky headings

markmead

<div class="max-h-46 overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200">
    <thead class="sticky top-0 bg-white ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200">
      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Sticky first column

markmead

<div class="overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200">
      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium"
      >
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium"
      >
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium"
      >
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium"
      >
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium"
      >
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Related components

View all application components