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 Riva Dashboard Tailwind Argon Dashboard
All 28
Charts 2
Charts Section 1
Cards 4
Sidebars 2
Navbars 2
Cards Section 2
Components 8
Profiles Section 1
Projects Section 1
Tables 2
Tables Section 2

Bootstrap Tables Section - Adminkit

Discover 2 Bootstrap Tables Section available in Adminkit

Section Tables

Adminkit View Theme 
<div class="row removable">
  <div class="col-12 col-lg-8 col-xxl-9 d-flex drop-zone">
    <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>
  </div>
  <div class="col-12 col-lg-4 col-xxl-3 d-flex drop-zone">
    <div class="card flex-fill w-100 draggable">
      <div class="card-header">
        <h5 class="card-title mb-0">Monthly Sales</h5>
      </div>
      <div class="card-body d-flex w-100">
        <div class="align-self-center chart chart-lg">
          <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
              <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
              <div class=""></div>
            </div>
          </div>
          <canvas id="chartjs-dashboard-bar" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

Section Tables Dark

Adminkit View Theme 
<div class="row removable">
  <div class="col-12 col-lg-8 col-xxl-9 drop-zone d-flex">
    <div class="card bg-dark flex-fill draggable">
      <div class="card-header bg-transparent">
        <h5 class="card-title mb-0">Latest Projects</h5>
      </div>
      <table class="table table-hover table-dark table-borderless 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>
  </div>
  <div class="col-12 col-lg-4 col-xxl-3 drop-zone d-flex">
    <div class="card bg-dark flex-fill w-100 draggable">
      <div class="card-header bg-transparent">
        <h5 class="card-title mb-0">Monthly Sales</h5>
      </div>
      <div class="card-body d-flex w-100">
        <div class="align-self-center chart chart-lg">
          <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
              <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
              <div class=""></div>
            </div>
          </div>
          <canvas id="chartjs-dashboard-bar-dark" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>