Home

Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard Soft UI Dashboard AdminKit Soft UI Design System Soft UI Dashboard Tailwind Asteria Dashboard Chakra UI Dashboard Motion Landing Library React Motion Landing Library Argon Dashboard Riva Dashboard Tailwind
All 380
Components 32
Sidebars 19
Tables 24
Cards Section 28
Profiles Section 8
Projects Section 10
Navbars 27
Typography 24
Tables Section 11
Teams Section 8
Cards 38
Contacts Section 9
Charts Section 4
Forms 5
Charts 14
Testimonials 9
Faq 1
Blogs 11
Headers 29
Contents 10
Stats 4
Authentication 7
Features 16
Teams 5
Call To Actions 9
Logo Areas 3
Contact Us 2
Pricing 4

Bootstrap Tables

Discover 24 Bootstrap Tables available in Loopple

Table Authors

Soft UI Dashboard View Theme 
<div class="card draggable mb-4">
  <div class="card-header pb-0">
    <h6>Authors table</h6>
  </div>
  <div class="card-body px-0 pt-0 pb-2">
    <div class="table-responsive p-0">
      <table class="table align-items-center mb-0">
        <thead>
          <tr>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Author</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Function</th>
            <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
            <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Employed</th>
            <th class="text-secondary opacity-7"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="d-flex px-2 py-1">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-2.jpg" class="avatar avatar-sm me-3">
                </div>
                <div class="d-flex flex-column justify-content-center">
                  <h6 class="mb-0 text-sm">John Michael</h6>
                  <p class="text-xs text-secondary mb-0">[email protected]</p>
                </div>
              </div>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">Manager</p>
              <p class="text-xs text-secondary mb-0">Organization</p>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="badge badge-sm bg-gradient-success">Online</span>
            </td>
            <td class="align-middle text-center">
              <span class="text-secondary text-xs font-weight-bold">23/04/18</span>
            </td>
            <td class="align-middle">
              <a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
                Edit
              </a>
            </td>
          </tr>
          <tr>
            <td>
              <div class="d-flex px-2 py-1">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-3.jpg" class="avatar avatar-sm me-3">
                </div>
                <div class="d-flex flex-column justify-content-center">
                  <h6 class="mb-0 text-sm">Alexa Liras</h6>
                  <p class="text-xs text-secondary mb-0">[email protected]</p>
                </div>
              </div>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">Programator</p>
              <p class="text-xs text-secondary mb-0">Developer</p>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="badge badge-sm bg-gradient-secondary">Offline</span>
            </td>
            <td class="align-middle text-center">
              <span class="text-secondary text-xs font-weight-bold">11/01/19</span>
            </td>
            <td class="align-middle">
              <a href="#!" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
                Edit
              </a>
            </td>
          </tr>
          <tr>
            <td>
              <div class="d-flex px-2 py-1">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg" class="avatar avatar-sm me-3">
                </div>
                <div class="d-flex flex-column justify-content-center">
                  <h6 class="mb-0 text-sm">Laurent Perrier</h6>
                  <p class="text-xs text-secondary mb-0">[email protected]</p>
                </div>
              </div>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">Executive</p>
              <p class="text-xs text-secondary mb-0">Projects</p>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="badge badge-sm bg-gradient-success">Online</span>
            </td>
            <td class="align-middle text-center">
              <span class="text-secondary text-xs font-weight-bold">19/09/17</span>
            </td>
            <td class="align-middle">
              <a href="#!" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
                Edit
              </a>
            </td>
          </tr>
          <tr>
            <td>
              <div class="d-flex px-2 py-1">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-3.jpg" class="avatar avatar-sm me-3">
                </div>
                <div class="d-flex flex-column justify-content-center">
                  <h6 class="mb-0 text-sm">Michael Levi</h6>
                  <p class="text-xs text-secondary mb-0">[email protected]</p>
                </div>
              </div>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">Programator</p>
              <p class="text-xs text-secondary mb-0">Developer</p>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="badge badge-sm bg-gradient-success">Online</span>
            </td>
            <td class="align-middle text-center">
              <span class="text-secondary text-xs font-weight-bold">24/12/08</span>
            </td>
            <td class="align-middle">
              <a href="#!" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
                Edit
              </a>
            </td>
          </tr>
          <tr>
            <td>
              <div class="d-flex px-2 py-1">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-2.jpg" class="avatar avatar-sm me-3">
                </div>
                <div class="d-flex flex-column justify-content-center">
                  <h6 class="mb-0 text-sm">Richard Gran</h6>
                  <p class="text-xs text-secondary mb-0">[email protected]</p>
                </div>
              </div>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">Manager</p>
              <p class="text-xs text-secondary mb-0">Executive</p>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="badge badge-sm bg-gradient-secondary">Offline</span>
            </td>
            <td class="align-middle text-center">
              <span class="text-secondary text-xs font-weight-bold">04/10/21</span>
            </td>
            <td class="align-middle">
              <a href="#!" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
                Edit
              </a>
            </td>
          </tr>
          <tr>
            <td>
              <div class="d-flex px-2 py-1">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg" class="avatar avatar-sm me-3">
                </div>
                <div class="d-flex flex-column justify-content-center">
                  <h6 class="mb-0 text-sm">Miriam Eric</h6>
                  <p class="text-xs text-secondary mb-0">[email protected]</p>
                </div>
              </div>
            </td>
            <td>
              <p class="text-xs font-weight-bold mb-0">Programtor</p>
              <p class="text-xs text-secondary mb-0">Developer</p>
            </td>
            <td class="align-middle text-center text-sm">
              <span class="badge badge-sm bg-gradient-secondary">Offline</span>
            </td>
            <td class="align-middle text-center">
              <span class="text-secondary text-xs font-weight-bold">14/09/20</span>
            </td>
            <td class="align-middle">
              <a href="#!" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
                Edit
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Table Countries

Soft UI Dashboard View Theme

Table Analytics

Soft UI Dashboard View Theme

Table Artists

Soft UI Dashboard View Theme

Table Projects

Soft UI Dashboard View Theme 
<div class="card draggable mb-4">
  <div class="card-header pb-0">
    <h6>Projects table</h6>
  </div>
  <div class="card-body px-0 pt-0 pb-2">
    <div class="table-responsive p-0">
      <table class="table align-items-center justify-content-center mb-0">
        <thead>
          <tr>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Project</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Budget</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Status</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center opacity-7 ps-2">Completion</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="d-flex px-2">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/small-logos/logo-spotify.svg" class="avatar avatar-sm rounded-circle me-2">
                </div>
                <div class="my-auto">
                  <h6 class="mb-0 text-sm">Spotify</h6>
                </div>
              </div>
            </td>
            <td>
              <p class="text-sm font-weight-bold mb-0">$2,500</p>
            </td>
            <td>
              <span class="text-xs font-weight-bold">working</span>
            </td>
            <td class="align-middle text-center">
              <div class="d-flex align-items-center justify-content-center">
                <span class="me-2 text-xs font-weight-bold">60%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="align-middle">
              <button class="btn btn-link text-secondary mb-0">
                <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
              </button>
            </td>
          </tr>
          <tr>
            <td>
              <div class="d-flex px-2">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/small-logos//logo-invision.svg" class="avatar avatar-sm rounded-circle me-2">
                </div>
                <div class="my-auto">
                  <h6 class="mb-0 text-sm">Invision</h6>
                </div>
              </div>
            </td>
            <td>
              <p class="text-sm font-weight-bold mb-0">$5,000</p>
            </td>
            <td>
              <span class="text-xs font-weight-bold">done</span>
            </td>
            <td class="align-middle text-center">
              <div class="d-flex align-items-center justify-content-center">
                <span class="me-2 text-xs font-weight-bold">100%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="align-middle">
              <button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
              </button>
            </td>
          </tr>
          <tr>
            <td>
              <div class="d-flex px-2">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/small-logos//logo-jira.svg" class="avatar avatar-sm rounded-circle me-2">
                </div>
                <div class="my-auto">
                  <h6 class="mb-0 text-sm">Jira</h6>
                </div>
              </div>
            </td>
            <td>
              <p class="text-sm font-weight-bold mb-0">$3,400</p>
            </td>
            <td>
              <span class="text-xs font-weight-bold">canceled</span>
            </td>
            <td class="align-middle text-center">
              <div class="d-flex align-items-center justify-content-center">
                <span class="me-2 text-xs font-weight-bold">30%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="30" style="width: 30%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="align-middle">
              <button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
              </button>
            </td>
          </tr>
          <tr>
            <td>
              <div class="d-flex px-2">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/small-logos/logo-slack.svg" class="avatar avatar-sm rounded-circle me-2">
                </div>
                <div class="my-auto">
                  <h6 class="mb-0 text-sm">Slack</h6>
                </div>
              </div>
            </td>
            <td>
              <p class="text-sm font-weight-bold mb-0">$1,000</p>
            </td>
            <td>
              <span class="text-xs font-weight-bold">canceled</span>
            </td>
            <td class="align-middle text-center">
              <div class="d-flex align-items-center justify-content-center">
                <span class="me-2 text-xs font-weight-bold">0%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="0" style="width: 0%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="align-middle">
              <button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
              </button>
            </td>
          </tr>
          <tr>
            <td>
              <div class="d-flex px-2">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/small-logos/logo-webdev.svg" class="avatar avatar-sm rounded-circle me-2">
                </div>
                <div class="my-auto">
                  <h6 class="mb-0 text-sm">Webdev</h6>
                </div>
              </div>
            </td>
            <td>
              <p class="text-sm font-weight-bold mb-0">$14,000</p>
            </td>
            <td>
              <span class="text-xs font-weight-bold">working</span>
            </td>
            <td class="align-middle text-center">
              <div class="d-flex align-items-center justify-content-center">
                <span class="me-2 text-xs font-weight-bold">80%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="80" style="width: 80%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="align-middle">
              <button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
              </button>
            </td>
          </tr>
          <tr>
            <td>
              <div class="d-flex px-2">
                <div>
                  <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/small-logos/logo-xd.svg" class="avatar avatar-sm rounded-circle me-2">
                </div>
                <div class="my-auto">
                  <h6 class="mb-0 text-sm">Adobe XD</h6>
                </div>
              </div>
            </td>
            <td>
              <p class="text-sm font-weight-bold mb-0">$2,300</p>
            </td>
            <td>
              <span class="text-xs font-weight-bold">done</span>
            </td>
            <td class="align-middle text-center">
              <div class="d-flex align-items-center justify-content-center">
                <span class="me-2 text-xs font-weight-bold">100%</span>
                <div>
                  <div class="progress">
                    <div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                  </div>
                </div>
              </div>
            </td>
            <td class="align-middle">
              <button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-ellipsis-v text-xs" aria-hidden="true"></i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Table Products

Soft UI Dashboard View Theme

Table Projects

Adminkit View Theme 
<div class="card flex-fill draggable">
    <div class="card-header">
        <h5 class="card-title mb-0">Latest Projects</h5>
    </div>
    <table class="table table-hover my-0">
        <thead>
            <tr>
                <th>Name</th>
                <th class="d-none d-xl-table-cell">Start Date</th>
                <th class="d-none d-xl-table-cell">End Date</th>
                <th>Status</th>
                <th class="d-none d-md-table-cell">Assignee</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Project Apollo</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-success">Done</span></td>
                <td class="d-none d-md-table-cell">Vanessa Tucker</td>
            </tr>
            <tr>
                <td>Project Fireball</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-danger">Cancelled</span></td>
                <td class="d-none d-md-table-cell">William Harris</td>
            </tr>
            <tr>
                <td>Project Hades</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-success">Done</span></td>
                <td class="d-none d-md-table-cell">Sharon Lessman</td>
            </tr>
            <tr>
                <td>Project Nitro</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-warning">In progress</span></td>
                <td class="d-none d-md-table-cell">Vanessa Tucker</td>
            </tr>
            <tr>
                <td>Project Phoenix</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-success">Done</span></td>
                <td class="d-none d-md-table-cell">William Harris</td>
            </tr>
            <tr>
                <td>Project X</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-success">Done</span></td>
                <td class="d-none d-md-table-cell">Sharon Lessman</td>
            </tr>
            <tr>
                <td>Project Romeo</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-success">Done</span></td>
                <td class="d-none d-md-table-cell">Christina Mason</td>
            </tr>
            <tr>
                <td>Project Wombat</td>
                <td class="d-none d-xl-table-cell">01/01/2021</td>
                <td class="d-none d-xl-table-cell">31/06/2021</td>
                <td><span class="badge bg-warning">In progress</span></td>
                <td class="d-none d-md-table-cell">William Harris</td>
            </tr>
        </tbody>
    </table>
</div>

Table Simple

Adminkit View Theme 
<table class="table draggable">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry the Bird</td>
      <td>Jokomo</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Table Watchlist

Asteria Dashboard View Theme

Table Transitions

Asteria Dashboard View Theme