Tables Components in Wrexa library

Tables from Wrexa

<section class="pt-24 md:pt-40 pb-24 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full xl:w-1/3 px-4 mb-16 xl:mb-0">
        <div class="flex flex-col h-full items-start px-6 sm:px-12 pt-16 pb-24 bg-white rounded-2xl" x-data="{ showContent: false }">
          <div class="w-full mb-16 pb-2 border-b border-gray-200">
            <h4 class="font-heading text-4xl">Files</h4>
          </div>
          <div class="flex mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
            <span class="text-lg">All inspirations</span>
          </div>
          <div class="flex mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
            <span class="text-lg">Bathroom design</span>
          </div>
          <div class="flex items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
            <span class="text-lg">Songs</span>
          </div>
          <div :class="{ 'hidden': !showContent, 'block': showContent }" class="flex hidden mt-14 mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
            <span class="text-lg">Travel Adventures</span>
          </div>
          <div :class="{ 'hidden': !showContent, 'block': showContent }" class="flex hidden mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
            <span class="text-lg">Culinary Delights</span>
          </div>
          <div :class="{ 'hidden': !showContent, 'block': showContent }" class="flex hidden items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
            <span class="text-lg">Fitness Journey</span>
          </div>
          <a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent, 'block': !showContent }" class="inline-block w-full sm:w-auto px-7 py-4 mt-auto text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">All files</a>
        </div>
      </div>
      <div class="w-full xl:w-2/3 px-4">
        <div class="px-6 sm:px-12 pt-16 pb-24 bg-white rounded-2xl" x-data="{ showContent: false }">
          <div class="sm:flex justify-between items-center mb-10 pb-2 border-b border-gray-200">
            <h4 class="font-heading text-4xl mb-4 sm:mb-0">Teamwork</h4>
            <div class="pr-6 overflow-hidden border border-gray-300 rounded">
              <select class="pl-6 py-2 bg-white outline-none" aria-label="New select example" style="max-width: max-content;">
                <option selected="">New</option>
                <option value="1">Old</option>
              </select>
            </div>
          </div>
          <div class="overflow-x-auto px-4 mb-14">
            <table class="table-auto w-full min-w-max">
              <thead></thead>
              <tbody>
                <tr>
                  <th class="py-5" scope="row">
                    <div class="flex pr-8 items-center">
                      <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
                      <span class="font-normal text-lg">All inspirations</span>
                    </div>
                  </th>
                  <td class="py-5">
                    <div class="relative flex pl-12 items-center">
                      <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                      <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                          <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                          <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                        </svg>
                      </a>
                    </div>
                  </td>
                  <td class="px-12 py-5">
                    <span class="text-sm font-light">Today, 9:44 AM</span>
                  </td>
                  <td class="py-5">
                    <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                      </svg>
                      <span class="ml-3">Details</span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th class="py-5" scope="row">
                    <div class="flex pr-8 items-center">
                      <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
                      <span class="font-normal text-lg">Photos.zip</span>
                    </div>
                  </th>
                  <td class="py-5">
                    <div class="relative flex px-12 items-center">
                      <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                      <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                          <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                          <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                        </svg>
                      </a>
                    </div>
                  </td>
                  <td class="px-12 py-5">
                    <span class="text-sm font-light">Today, 9:44 AM</span>
                  </td>
                  <td class="py-5">
                    <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                      </svg>
                      <span class="ml-3">Details</span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th class="py-5" scope="row">
                    <div class="flex pr-8 items-center">
                      <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
                      <span class="font-normal text-lg">Songs that feel like winter</span>
                    </div>
                  </th>
                  <td class="py-5">
                    <div class="relative flex px-12 items-center">
                      <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                      <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                          <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                          <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                        </svg>
                      </a>
                    </div>
                  </td>
                  <td class="px-12 py-5">
                    <span class="text-sm font-light">Today, 9:44 AM</span>
                  </td>
                  <td class="py-5">
                    <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                      </svg>
                      <span class="ml-3">Details</span>
                    </a>
                  </td>
                </tr>
                <tr :class="{ 'hidden': !showContent }" class="hidden">
                    <th class="py-5" scope="row">
                      <div class="flex pr-8 items-center">
                        <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
                        <span class="font-normal text-lg">Creative Canvas</span>
                      </div>
                    </th>
                    <td class="py-5">
                      <div class="relative flex pl-12 items-center">
                        <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                        <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                        <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                        <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                          <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                            <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                            <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                          </svg>
                        </a>
                      </div>
                    </td>
                    <td class="px-12 py-5">
                      <span class="text-sm font-light">Today, 9:44 AM</span>
                    </td>
                    <td class="py-5">
                      <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                        <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                        </svg>
                        <span class="ml-3">Details</span>
                      </a>
                    </td>
                  </tr>
                  <tr :class="{ 'hidden': !showContent }" class="hidden">
                    <th class="py-5" scope="row">
                      <div class="flex pr-8 items-center">
                        <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
                        <span class="font-normal text-lg">Memories Captured</span>
                      </div>
                    </th>
                    <td class="py-5">
                      <div class="relative flex px-12 items-center">
                        <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                        <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                        <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                        <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                          <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                            <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                            <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                          </svg>
                        </a>
                      </div>
                    </td>
                    <td class="px-12 py-5">
                      <span class="text-sm font-light">Today, 9:44 AM</span>
                    </td>
                    <td class="py-5">
                      <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                        <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                        </svg>
                        <span class="ml-3">Details</span>
                      </a>
                    </td>
                  </tr>
                  <tr :class="{ 'hidden': !showContent }" class="hidden">
                    <th class="py-5" scope="row">
                      <div class="flex pr-8 items-center">
                        <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
                        <span class="font-normal text-lg">Frosty Melodies</span>
                      </div>
                    </th>
                    <td class="py-5">
                      <div class="relative flex px-12 items-center">
                        <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                        <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                        <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                        <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                          <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                            <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                            <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                          </svg>
                        </a>
                      </div>
                    </td>
                    <td class="px-12 py-5">
                      <span class="text-sm font-light">Today, 9:44 AM</span>
                    </td>
                    <td class="py-5">
                      <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                        <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                        </svg>
                        <span class="ml-3">Details</span>
                      </a>
                    </td>
                  </tr>
              </tbody>
            </table>
          </div>
          <div><a class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 sm:mr-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Sign in</a><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent, 'block': !showContent }" class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium border border-gray-900 hover:text-gray-700 rounded" href="#">More Scores</a></div>
        </div>
      </div>
    </div>
    <div class="text-center">
      <a class="relative inline-flex items-center justify-center w-32 h-32 text-gray-800 hover:text-gray-700" href="#">
        <img class="absolute top-0 left-0 h-full w-full object-contain" src="wrexa-assets/elements/circle-border-light.svg" alt="">
        <svg width="12" height="32" viewBox="0 0 12 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.3109 -2.9239e-07L5.3109 29.4165L0.974389 25.1693L-1.88224e-07 26.1236L6 32L12 26.1236L11.0256 25.1693L6.6891 29.4165L6.6891 -2.32147e-07L5.3109 -2.9239e-07Z" fill="currentColor"></path>
        </svg>
      </a>
    </div>
  </div>
</section>

Tables from Wrexa

<section class="position-relative py-24 pt-lg-40 bg-light overflow-hidden"> <div class="container"> <div class="row mb-20"> <div class="col-12 col-lg-4 mb-16 mb-lg-0"> <div class="position-relative h-100 pt-20 pb-52 px-8 px-md-12 bg-white rounded"> <div class="mb-16 pb-5 border-bottom"> <h4 class="display-6 mb-0" >Files</h4> </div> <div class="d-flex mb-14 align-items-center"><img class="img-fluid" src="wrexa-assets/elements/folder1.svg" alt=""/><span class="ms-8" >All inspirations</span></div> <div class="d-flex mb-14 align-items-center"><img class="img-fluid" src="wrexa-assets/elements/folder2.svg" alt=""/><span class="ms-8" >Bathroom design</span></div> <div class="d-flex align-items-center"><img class="img-fluid" src="wrexa-assets/elements/folder3.svg" alt=""/><span class="ms-8" >Songs</span></div><a class="position-absolute bottom-0 start-0 ms-12 mb-24 btn mt-auto btn-primary" href="#" >All files</a> </div> </div> <div class="col-12 col-lg-8"> <div class="pt-20 pb-24 px-8 px-md-12 bg-white rounded"> <div class="d-sm-flex align-items-center justify-content-between mb-14 pb-5 border-bottom"> <h4 class="display-6 mb-4 mb-md-0" >Teamwork</h4> <select class="form-select rounded-1 py-1 ps-8" aria-label="New select example" style="max-width: max-content;"> <option selected="">New</option> <option value="1">Old</option> </select> </div> <div class="table-responsive pb-6 px-4 w-100 mb-16" style="width: min-content;"> <table class="table table-borderless mb-0" style="min-width: max-content;"> <thead></thead> <tbody> <tr class="align-middle"> <th class="pb-6" scope="row"> <div class="d-flex align-items-center pe-6 position-relative"> <div class="position-absolute top-50 end-0 translate-middle-y rounded bg-secondary" style="width: 1px; height: 12px;"></div><img class="img-fluid" src="wrexa-assets/elements/folder1.svg" alt=""/><span class="ms-8" >Bathroom design</span> </div> </th> <td class="pb-6"> <div class="d-flex align-items-center px-12"><img class="img-fluid rounded-circle" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-women1.png" alt=""/><img class="img-fluid rounded-circle ms-n2" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-male2.png" alt=""/><a class="btn ms-3 p-0 text-secondary-light" href="#"> <svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle> <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path> <defs> <rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect> </defs> </svg></a></div> </td> <td class="pe-12 pb-6"><span class="text-secondary" >Today, 9:44 AM</span></td> <td class="pb-6"><a class="btn d-flex align-items-center p-0 text-success" href="#"> <svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path> </svg><span class="ms-3" >Details</span></a></td> </tr> <tr class="align-middle"> <th class="pb-6" scope="row"> <div class="d-flex align-items-center pe-6 position-relative"> <div class="position-absolute top-50 end-0 translate-middle-y rounded bg-secondary" style="width: 1px; height: 12px;"></div><img class="img-fluid" src="wrexa-assets/elements/folder2.svg" alt=""/><span class="ms-8" >Photos.zip</span> </div> </th> <td class="pb-6"> <div class="d-flex align-items-center px-12"><img class="img-fluid rounded-circle" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-women1.png" alt=""/><img class="img-fluid rounded-circle ms-n2" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-male2.png" alt=""/><a class="btn ms-3 p-0 text-secondary-light" href="#"> <svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle> <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path> <defs> <rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect> </defs> </svg></a></div> </td> <td class="pe-12 pb-6"><span class="text-secondary" >Today, 9:44 AM</span></td> <td class="pb-6"><a class="btn d-flex align-items-center p-0 text-success" href="#"> <svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path> </svg><span class="ms-3" >Details</span></a></td> </tr> <tr class="align-middle"> <th scope="row"> <div class="d-flex align-items-center pe-6 position-relative"> <div class="position-absolute top-50 end-0 translate-middle-y rounded bg-secondary" style="width: 1px; height: 12px;"></div><img class="img-fluid" src="wrexa-assets/elements/folder3.svg" alt=""/><span class="ms-8" >Songs that feel like winter</span> </div> </th> <td> <div class="d-flex align-items-center px-12"><img class="img-fluid rounded-circle" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-women1.png" alt=""/><img class="img-fluid rounded-circle ms-n2" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-male2.png" alt=""/><a class="btn ms-3 p-0 text-secondary-light" href="#"> <svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle> <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path> <defs> <rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect> </defs> </svg></a></div> </td> <td class="pe-12"><span class="text-secondary" >Today, 9:44 AM</span></td> <td><a class="btn d-flex align-items-center p-0 text-success" href="#"> <svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path> </svg><span class="ms-3" >Details</span></a></td> </tr> </tbody> </table> </div> <div class="mb-n4"><a class="btn mb-4 me-4 btn-primary" href="#" >Sign in</a><a class="btn mb-4 btn-outline-dark" href="#" >More Scores</a></div> </div> </div> </div><a class="btn d-flex mx-auto align-items-center justify-content-center p-0" href="#" style="width: 136px; height: 136px; background-image: url('wrexa-assets/elements/circle-border-light.svg'); background-size: contain;" > <svg width="12" height="32" viewbox="0 0 12 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5.3109 -2.9239e-07L5.3109 29.4165L0.974389 25.1693L-1.88224e-07 26.1236L6 32L12 26.1236L11.0256 25.1693L6.6891 29.4165L6.6891 -2.32147e-07L5.3109 -2.9239e-07Z" fill="#252525"></path> </svg></a> </div> </section>

Tables Components by Shuffle

Choose from 10 variations of Tables UI components. Presented here are variants available in Wrexa library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Tables UI components, code and our visual editor. Try the demo for free!

Redirecting to PayPal

Supporting tools

Plans

Tables Components in Wrexa library

Framework

UI Library

Components

Tables from Wrexa

Files and Teamwork Folder Panels

Your next website starts here

Tables from Wrexa

Tables Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Get Shuffle for life at today's price

New in every Lifetime License

A more capable AI Agent

Shopify theme export

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tables Components in Wrexa library

Framework

UI Library

Components

Tables from Wrexa

Files and Teamwork Folder Panels

Your next website starts here

Tables from Wrexa

Tables Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company