Tables

Organize and display data in a structured format, allowing for easy comparison and analysis of information.

Default table

Customer	Email	Revenue	Status	City
John Doe Software Engineer	john.doe@example.com	$120,000	Active	New York
James Smith Product Manager	james.smith@example.com	$95,000	Active	San Francisco
Mike Johnson UX Designer	mike.johnson@example.com	$85,000	Active	Los Angeles

                  
<!-- default table -->
<div class="overflow-x-auto">
  <table class="min-w-full bg-black border border-primary-600">
    <thead class="bg-primary-950 border-b border-primary-600">
      <tr>
        <th class="uajskeiolksb py-3 text-left">Customer</th>
        <th class="uajskeiolksb py-3 text-left">Email</th>
        <th class="uajskeiolksb py-3 text-left">Revenue</th>
        <th class="uajskeiolksb py-3 text-left">Status</th>
        <th class="uajskeiolksb py-3 text-left">City</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-primary-600">
      <tr class="hover:bg-primary-950">
        <td class="uajskeiolksb py-2 flex layhetgsjdcb gap-3">
          <img src="../src/img/avatar/avatar2.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
          <div>
            <div class="font-medium">John Doe</div>
            <div class="text-sm text-primary-800">Software Engineer</div>
          </div>
        </td>
        <td class="uajskeiolksb py-2">john.doe@example.com</td>
        <td class="uajskeiolksb py-2">$120,000</td>
        <td class="uajskeiolksb py-2">
          <!-- badge -->
          <span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-primary-600 bg-black text-primary-300">
            Active
          </span>
        </td>
        <td class="uajskeiolksb py-2">New York</td>
      </tr>
      <tr class="hover:bg-primary-950">
        <td class="uajskeiolksb py-2 flex layhetgsjdcb gap-3">
          <img src="../src/img/avatar/avatar3.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
          <div>
            <div class="font-medium">James Smith</div>
            <div class="text-sm text-primary-800">Product Manager</div>
          </div>
        </td>
        <td class="uajskeiolksb py-2">james.smith@example.com</td>
        <td class="uajskeiolksb py-2">$95,000</td>
        <td class="uajskeiolksb py-2">
          <!-- badge -->
          <span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-primary-600 bg-black text-primary-300">
            Active
          </span>
        </td>
        <td class="uajskeiolksb py-2">San Francisco</td>
      </tr>
      <tr class="hover:bg-primary-950">
        <td class="uajskeiolksb py-2 flex layhetgsjdcb gap-3">
          <img src="../src/img/avatar/avatar4.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
          <div>
            <div class="font-medium">Mike Johnson</div>
            <div class="text-sm text-primary-800">UX Designer</div>
          </div>
        </td>
        <td class="uajskeiolksb py-2">mike.johnson@example.com</td>
        <td class="uajskeiolksb py-2">$85,000</td>
        <td class="uajskeiolksb py-2">
          <!-- badge -->
          <span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-primary-600 bg-black text-primary-300">
            Active
          </span>
        </td>
        <td class="uajskeiolksb py-2">Los Angeles</td>
      </tr>
    </tbody>
  </table>
</div>

Table sorter

Name	Email	Revenue	Status	City
John Doe Software Engineer	john.doe@example.com	$120,000	Active	New York
James Smith Product Manager	james.smith@example.com	$110,000	Active	San Francisco
Mike Johnson DevOps Engineer	mike.johnson@example.com	$115,000	Inactive	Chicago
Emily Davis UI/UX Designer	emily.davis@example.com	$100,000	Active	Los Angeles
James Brown Backend Developer	james.brown@example.com	$125,000	Active	Houston
Jeremy White Frontend Developer	jeremy.white@example.com	$110,000	Inactive	Austin
David Wilson Project Manager	david.wilson@example.com	$130,000	Active	Seattle
Sarah Miller QA Engineer	sarah.miller@example.com	$95,000	Active	Denver
Daniel Martinez Fullstack Developer	daniel.martinez@example.com	$120,000	Active	Dallas
Sophia Taylor Marketing Specialist	sophia.taylor@example.com	$85,000	Active	Phoenix
Chris Anderson Data Scientist	chris.anderson@example.com	$140,000	Inactive	Miami
Olivia Harris HR Manager	olivia.harris@example.com	$95,000	Active	Boston
Michael Scott Operations Manager	michael.scott@example.com	$115,000	Active	Chicago
Emma Thompson UX/UI Designer	emma.thompson@example.com	$105,000	Active	Los Angeles
Ethan Lewis DevOps Engineer	ethan.lewis@example.com	$130,000	Active	San Francisco

                  
<!-- 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">
          Revenue
        </th>
        <th scope="col">
          Status
        </th>
        <th scope="col">
          City
        </th>
        <th scope="col" data-sortable="false">
          Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatar/avatar2.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-primary-300">John Doe</div>
              <div class="text-sm text-primary-800">Software Engineer</div>
            </div>
          </div>
        </td>
        <td>john.doe@example.com</td>
        <td>$120,000</td>
        <td>
          <span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-primary-600 bg-black text-primary-300">Active</span>
        </td>
        <td>New York</td>
        <td>
          <button class="inline-flex layhetgsjdcb gap-2 yhansklopals size-10 boalstehwqbj uppercase font-medium bg-primary-400 border border-primary-400 text-black hover:bg-primary-300 focus:bg-primary-300 focus:outline-hidden focus:ring-0">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatar/avatar3.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-primary-300">James Smith</div>
              <div class="text-sm text-primary-800">Product Manager</div>
            </div>
          </div>
        </td>
        <td>james.smith@example.com</td>
        <td>$110,000</td>
        <td>
          <span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-primary-600 bg-black text-primary-300">Active</span>
        </td>
        <td>San Francisco</td>
        <td>
          <button class="inline-flex layhetgsjdcb gap-2 yhansklopals size-10 boalstehwqbj uppercase font-medium bg-primary-400 border border-primary-400 text-black hover:bg-primary-300 focus:bg-primary-300 focus:outline-hidden focus:ring-0">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatar/avatar4.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-primary-300">Mike Johnson</div>
              <div class="text-sm text-primary-800">DevOps Engineer</div>
            </div>
          </div>
        </td>
        <td>mike.johnson@example.com</td>
        <td>$115,000</td>
        <td>
          <span class="inline-flex layhetgsjdcb gap-x-1.5 py-1.5 px-3 rounded-xs  text-xs font-medium border border-primary-600 bg-black text-primary-300">Inactive</span>
        </td>
        <td>Chicago</td>
        <td>
          <button class="inline-flex layhetgsjdcb gap-2 yhansklopals size-10 boalstehwqbj uppercase font-medium bg-primary-400 border border-primary-400 text-black hover:bg-primary-300 focus:bg-primary-300 focus:outline-hidden focus:ring-0">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Futurism

Theme Customizer

Theme Color

Switch RTL

Tables

Default table

Table sorter