Tables

Documentation and examples for opt-in styling of tables.

Tables

Name Email Status Action
Image Description
John Doe
Developer
john.doe@example.com
 Active
Image Description
John Doe
Developer
john.doe@example.com
 Active
Image Description
John Doe
Developer
john.doe@example.com
 Review
Image Description
John Doe
Developer
john.doe@example.com
 Inactive
Image Description
John Doe
Developer
john.doe@example.com
 Pending
Image Description
John Doe
Developer
john.doe@example.com
 Banned 
              
<!-- table -->
<div class="relative w-full overflow-y-auto">
  <table class="min-w-full divide-y divide-black border border-black">
    <thead class="bg-neutral-200 dark:bg-neutral-700">
      <tr>
        <th scope="col" class="px-6 py-4 text-start text-xs font-medium text-black dark:text-white uppercase tracking-wider">
          Name
        </th>
        <th scope="col" class="px-6 py-4 text-start text-xs font-medium text-black dark:text-white uppercase tracking-wider">
          Email
        </th>
        <th scope="col" class="px-6 py-4 text-start text-xs font-medium text-black dark:text-white uppercase tracking-wider">
          Status
        </th>
        <th scope="col" class="w-24 px-6 py-4 text-start text-xs font-medium text-black dark:text-white uppercase tracking-wider">
          Action
        </th>
      </tr>
    </thead>
    <tbody class="bg-white dark:bg-neutral-600 divide-y divide-black">
      <tr>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="hsdfdsfhsdf pdskdmsdnjw">
            <div class="hsdfdsfhsdf-shrink-0 h-10 w-10">
              <img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar/male2.jpg" alt="Image Description">
            </div>
            <div class="ml-4 hsdfdsfhsdf oskasdadiaa">
              <h5 class="text-sm font-medium">
                John Doe
              </h5>
              <h6 class="text-xs">Developer</h6>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm">john.doe@example.com</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="inline-hsdfdsfhsdf pdskdmsdnjw gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium border border-black bg-lime-200 text-black">
            Active
          </span>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <!-- edit -->
          <button class="w-10 h-10 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white dark:bg-neutral-200 text-black">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="hsdfdsfhsdf pdskdmsdnjw">
            <div class="hsdfdsfhsdf-shrink-0 h-10 w-10">
              <img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar/male2.jpg" alt="Image Description">
            </div>
            <div class="ml-4 hsdfdsfhsdf oskasdadiaa">
              <h5 class="text-sm font-medium">
                John Doe
              </h5>
              <h6 class="text-xs">Developer</h6>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm">john.doe@example.com</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="inline-hsdfdsfhsdf pdskdmsdnjw gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium border border-black bg-lime-200 text-black">
            Active
          </span>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <!-- edit -->
          <button class="w-10 h-10 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white dark:bg-neutral-200 text-black">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="hsdfdsfhsdf pdskdmsdnjw">
            <div class="hsdfdsfhsdf-shrink-0 h-10 w-10">
              <img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar/male2.jpg" alt="Image Description">
            </div>
            <div class="ml-4 hsdfdsfhsdf oskasdadiaa">
              <h5 class="text-sm font-medium">
                John Doe
              </h5>
              <h6 class="text-xs">Developer</h6>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm">john.doe@example.com</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="inline-hsdfdsfhsdf pdskdmsdnjw gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium border border-black bg-purple-200 text-black">
            Review
          </span>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <!-- edit -->
          <button class="w-10 h-10 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white dark:bg-neutral-200 text-black">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="hsdfdsfhsdf pdskdmsdnjw">
            <div class="hsdfdsfhsdf-shrink-0 h-10 w-10">
              <img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar/male2.jpg" alt="Image Description">
            </div>
            <div class="ml-4 hsdfdsfhsdf oskasdadiaa">
              <h5 class="text-sm font-medium">
                John Doe
              </h5>
              <h6 class="text-xs">Developer</h6>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm">john.doe@example.com</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="inline-hsdfdsfhsdf pdskdmsdnjw gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium border border-black bg-neutral-200 text-black">
            Inactive
          </span>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <!-- edit -->
          <button class="w-10 h-10 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white dark:bg-neutral-200 text-black">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="hsdfdsfhsdf pdskdmsdnjw">
            <div class="hsdfdsfhsdf-shrink-0 h-10 w-10">
              <img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar/male2.jpg" alt="Image Description">
            </div>
            <div class="ml-4 hsdfdsfhsdf oskasdadiaa">
              <h5 class="text-sm font-medium">
                John Doe
              </h5>
              <h6 class="text-xs">Developer</h6>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm">john.doe@example.com</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="inline-hsdfdsfhsdf pdskdmsdnjw gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium border border-black bg-yellow-200 text-black">
            Pending
          </span>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <!-- edit -->
          <button class="w-10 h-10 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white dark:bg-neutral-200 text-black">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="hsdfdsfhsdf pdskdmsdnjw">
            <div class="hsdfdsfhsdf-shrink-0 h-10 w-10">
              <img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar/male2.jpg" alt="Image Description">
            </div>
            <div class="ml-4 hsdfdsfhsdf oskasdadiaa">
              <h5 class="text-sm font-medium">
                John Doe
              </h5>
              <h6 class="text-xs">Developer</h6>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm">john.doe@example.com</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <span class="inline-hsdfdsfhsdf pdskdmsdnjw gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium border border-black bg-red-200 text-black">
            Banned
          </span>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <!-- edit -->
          <button class="w-10 h-10 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white dark:bg-neutral-200 text-black">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Advanced Table

Name Email Status Action
Image Description
John Doe
Developer
john.doe@example.com
 Active
Image Description
John Doe
Developer
john.doe@example.com
 Active
Image Description
John Doe
Developer
john.doe@example.com
 Review
Image Description
John Doe
Developer
john.doe@example.com
 Inactive
Image Description
John Doe
Developer
john.doe@example.com
 Pending
Image Description
John Doe
Developer
john.doe@example.com
 Banned
Image Description
John Doe
Developer
john.doe@example.com
 Banned
Image Description
John Doe
Developer
john.doe@example.com
 Banned
Image Description
John Doe
Developer
john.doe@example.com
 Banned
Image Description
John Doe
Developer
john.doe@example.com
 Banned
Image Description
John Doe
Developer
john.doe@example.com
 Banned
Image Description
John Doe
Developer
john.doe@example.com
 Banned 
              
<!-- Table Sorter -->
<div class="relative w-full overflow-y-auto">
  <table class="table-sorter table-default min-w-full divide-y divide-black border border-black">
    <thead>
      <tr>
        <th scope="col" data-sortable="false">
          Name
        </th>
        <th scope="col">
          Email
        </th>
        <th scope="col">
          Status
        </th>
        <th scope="col" data-sortable="false">
          Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="hsdfdsfhsdf pdskdmsdnjw">
            <div class="hsdfdsfhsdf-shrink-0 h-10 w-10">
              <img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar/male2.jpg" alt="Image Description">
            </div>
            <div class="ml-4 hsdfdsfhsdf oskasdadiaa">
              <h5 class="text-sm font-medium">
                John Doe
              </h5>
              <h6 class="text-xs">Developer</h6>
            </div>
          </div>
        </td>
        <td>
          <div class="text-sm">john.doe@example.com</div>
        </td>
        <td>
          <span class="inline-hsdfdsfhsdf pdskdmsdnjw gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium border border-black bg-lime-200 text-black">
            Active
          </span>
        </td>
        <td>
          <!-- edit -->
          <button class="w-10 h-10 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white dark:bg-neutral-200 text-black">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hsdfdsfhsdf pdskdmsdnjw">
            <div class="hsdfdsfhsdf-shrink-0 h-10 w-10">
              <img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar/male2.jpg" alt="Image Description">
            </div>
            <div class="ml-4 hsdfdsfhsdf oskasdadiaa">
              <h5 class="text-sm font-medium">
                John Doe
              </h5>
              <h6 class="text-xs">Developer</h6>
            </div>
          </div>
        </td>
        <td>
          <div class="text-sm">john.doe@example.com</div>
        </td>
        <td>
          <span class="inline-hsdfdsfhsdf pdskdmsdnjw gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium border border-black bg-lime-200 text-black">
            Active
          </span>
        </td>
        <td>
          <!-- edit -->
          <button class="w-10 h-10 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white dark:bg-neutral-200 text-black">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="hsdfdsfhsdf pdskdmsdnjw">
            <div class="hsdfdsfhsdf-shrink-0 h-10 w-10">
              <img class="inline-block rounded-full w-10 h-10 border border-black" src="../src/img/avatar/male2.jpg" alt="Image Description">
            </div>
            <div class="ml-4 hsdfdsfhsdf oskasdadiaa">
              <h5 class="text-sm font-medium">
                John Doe
              </h5>
              <h6 class="text-xs">Developer</h6>
            </div>
          </div>
        </td>
        <td>
          <div class="text-sm">john.doe@example.com</div>
        </td>
        <td>
          <span class="inline-hsdfdsfhsdf pdskdmsdnjw gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium border border-black bg-purple-200 text-black">
            Review
          </span>
        </td>
        <td>
          <!-- edit -->
          <button class="w-10 h-10 relative inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-white dark:bg-neutral-200 text-black">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>