aConic Admin Documentation - v1.0

Get Support
Preview Demo
Introduction Getting Started Design & Graphics Components Tables Basic Form Advanced Forms Charts Others
Version - 1.0.0 Help
Notes

aConic is a Static HTML Template

Custom table design

Basic example

 ID Token Affiliate Earnings Paid Balance Status Action
#1 130
Mohammad Azad
$1000.00 $700.00 $300.00 Active
#2 131
Mohammad Azad
$1000.00 $700.00 $300.00 Active
#3 132
Mohammad Azad
$1000.00 $700.00 $300.00 Active
#4 133
Mohammad Azad
$1000.00 $700.00 $300.00 Active
#5 134
Mohammad Azad
$1000.00 $700.00 $300.00 Rejected
#6 135
Mohammad Azad
$1000.00 $700.00 $300.00 Active
#7 136
Mohammad Azad
$1000.00 $700.00 $300.00 Active
#8 137
Mohammad Azad
$1000.00 $700.00 $300.00 Active
#9 138
Mohammad Azad
$1000.00 $700.00 $300.00 Active
#10 139
Mohammad Azad
$1000.00 $700.00 $300.00 Active
Showing 1 to 20 of 57 entries
                                            
    <div class="default-table-design-one">
      <!-- start table -->
      <div class="table-responsive">
          <table class="table table-striped align-middle">
              <thead>
                  <tr>
                      <th>
                          <div class="form-check">
                              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                          </div>
                      </th>
                      <th>ID</th>
                      <th>Token</th>
                      <th>Affiliate</th>
                      <th>Earnings</th>
                      <th>Paid</th>
                      <th>Balance</th>
                      <th>Status</th>
                      <th>Action</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>
                          <div class="form-check">
                              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                          </div>
                      </td>
                      <td><a href="#!">#1</a></td>
                      <td>130</td>
                      <td>
                          <div class="user-img">
                              <img src="../../assets/img/avatar-01.svg" width="30" alt="">
                              <a href="#!">Mohammad Azad</a>
                          </div>
                      </td>
                      <td>$1000.00</td>
                      <td>$700.00</td>
                      <td><strong>$300.00</strong></td>
                      <td><span class="status bg-success text-white">Active <i class="bi bi-list-nested"></i></span></td>
                      <td>
                          <div class="action-btn" style="width: 160px;">
                              <a href="#!"><i class="bi bi-eye bg-success text-white"
                                      data-bs-toggle="tooltip" data-bs-placement="top" title="View"></i></a>
                              <a href="#!" class="ms-1"><i class="bi bi-dash-circle bg-danger text-white"
                                      data-bs-toggle="tooltip" data-bs-placement="top" title="Change status to Rejected"></i></a>
                              <a href="#!" class="ms-1"><i class="bi bi-link-45deg bg-primary text-white"
                                      data-bs-toggle="tooltip" data-bs-placement="top" title="Process dangling commissions"></i></a>
                              <a href="#!" class="ms-1"><i class="bi bi-x-circle bg-warning text-dark" data-bs-toggle="tooltip"
                                      data-bs-placement="top" title="Ban affiliate"></i></a>
                          </div>
                      </td>
                  </tr>
              </tbody>
          </table>
      </div>
      <!-- end table -->
      
      <div class="default-table-footer mt-2">
          <div class="row align-items-center">
              <div class="col">
                  <h6>Showing 1 to 20 of 57 entries</h6>
              </div>
              <div class="col-auto">
                  <nav aria-label="Page navigation example">
                      <ul class="pagination">
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">«</span>
                          </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">»</span>
                          </a>
                        </li>
                      </ul>
                    </nav>
              </div>
          </div>
      </div>
    </div>

Custom div table design

Country:
Germany
Orders:
8689
Purchases:
$875675
Change:
65.2%
Country:
Australia
Orders:
9164589
Purchases:
$975675
Change:
14.30%
Country:
Japan
Orders:
7563
Purchases:
$543635
Change:
3.2%
Country:
Spain
Orders:
9389
Purchases:
$2335675
Change:
43.01%
Country:
USA
Orders:
864589
Purchases:
$975675
Change:
14.30% 
                                        
  <div class="custom-table-design-one">
    <!-- item -->
    <div class="table-design-one-item border rounded-3 p-3 mt-3">
        <div class="row align-items-center">
            <div class="col-12 col-sm-auto pe-0 mb-1 mb-sm-0">
                <img src="../../assets/img/germany.svg" class="rounded-circle" alt="">
            </div>
            <div class="col-12 col-sm mb-1 pe-0 mb-sm-0">
                <span>Country:</span>
                <h6 class="mb-0">Germany</h6>
            </div>
            <div class="col-12 col-sm pe-0 mb-1 mb-sm-0">
                <span>Orders:</span>
                <h6 class="mb-0">8689</h6>
            </div>
            <div class="col-12 col-sm pe-0 mb-1 mb-sm-0">
                <span>Purchases:</span>
                <h6 class="mb-0">$875675</h6>
            </div>
            <div class="col-12 col-sm-auto">
                <span>Change:</span>
                <h6 class="mb-0">65.2% <i class="bi bi-arrow-up-right text-success"></i></h6>
            </div>
        </div>
    </div>

    <!-- item -->
    <div class="table-design-one-item border rounded-3 p-3 mt-3">
        <div class="row align-items-center">
            <div class="col-12 col-sm-auto pe-0 mb-1 mb-sm-0">
                <img src="../../assets/img/united-states.svg" class="rounded-circle" alt="">
            </div>
            <div class="col-12 col-sm mb-1 pe-0 mb-sm-0">
                <span>Country:</span>
                <h6 class="mb-0">USA</h6>
            </div>
            <div class="col-12 col-sm pe-0 mb-1 mb-sm-0">
                <span>Orders:</span>
                <h6 class="mb-0">864589</h6>
            </div>
            <div class="col-12 col-sm pe-0 mb-1 mb-sm-0">
                <span>Purchases:</span>
                <h6 class="mb-0">$975675</h6>
            </div>
            <div class="col-12 col-sm-auto">
                <span>Change:</span>
                <h6 class="mb-0">14.30% <i class="bi bi-arrow-down-right text-danger"></i></h6>
            </div>
        </div>
    </div>
  </div>

with hover

Customer:
Abu Bilal
Email:
iazad@outlook.com
Product:
Product addons plugin
Payment: Pending
Amount:
$73
Customer:
Abu Bilal
Email:
iazad@outlook.com
Product:
Product addons plugin
Payment: Success
Amount:
$73
Customer:
Abu Bilal
Email:
iazad@outlook.com
Product:
Product addons plugin
Payment: Success
Amount:
$73
Customer:
Abu Bilal
Email:
iazad@outlook.com
Product:
Product addons plugin
Payment: Blocked
Amount:
$73
Customer:
Abu Bilal
Email:
iazad@outlook.com
Product:
Product addons plugin
Payment: Success
Amount:
$73
                                        
  <div class="custom-table-design-two">
    <!-- item -->
    <div class="table-design-two-item border rounded-3 p-3 mt-3">
        <div class="row align-items-center">
            <div class="col-12 col-sm-6 col-lg pe-0 mb-1 mb-lg-0">
                <span>Customer:</span>
                <h6 class="mb-0">Abu Bilal</h6>
            </div>
            <div class="col-12 col-sm-6 col-lg pe-0 mb-1 mb-lg-0">
                <span>Email:</span>
                <h6 class="mb-0">iazad@outlook.com</h6>
            </div>
            <div class="col-12 col-sm-6 col-lg pe-0 mb-1 mb-lg-0">
                <span>Product:</span>
                <h6 class="mb-0">Product addons plugin</h6>
            </div>
            <div class="col-12 col-sm-6 col-lg pe-0 mb-1 mb-lg-0">
                <span class="d-block">Payment:</span>
                <span class="payment-status bg-warning text-black mt-1">
                    Pending <i class="bi bi-list-nested"></i>
                </span>
            </div>
            <div class="col-12 col-sm-6 col-lg">
                <span>Amount:</span>
                <h6 class="mb-0">$73</h6>
            </div>
        </div>
        <div class="action-btn">
            <a href="#!"><i class="bi bi-eye bg-success text-white" 
              data-bs-toggle="tooltip" data-bs-placement="top" title="" 
              data-bs-original-title="View" aria-label="View"></i></a>
            <a href="#!" class="ms-1"><i class="bi bi-pencil bg-primary text-white" 
              data-bs-toggle="tooltip" data-bs-placement="top" title="" 
              data-bs-original-title="Edit" aria-label="Edit"></i></a>
            <a href="#!" class="ms-1"><i class="bi bi-currency-dollar bg-secondary text-white" 
              data-bs-toggle="tooltip" data-bs-placement="top" title="" 
              data-bs-original-title="Refund" aria-label="Refund"></i></a>
            <a href="#!" class="ms-1"><i class="bi bi-archive bg-warning text-white" 
            data-bs-toggle="tooltip" data-bs-placement="top" title="" 
            data-bs-original-title="Archive" aria-label="Archive"></i></a>
            <a href="#!" class="ms-1"><i class="bi bi-trash bg-danger text-white" 
              data-bs-toggle="tooltip" data-bs-placement="top" title="" 
              data-bs-original-title="Delete" aria-label="Delete"></i></a>
        </div>
    </div>

    <!-- item -->
    <div class="table-design-two-item border rounded-3 p-3 mt-3">
        <div class="row align-items-center">
            <div class="col-12 col-sm-6 col-lg pe-0 mb-1 mb-lg-0">
                <span>Customer:</span>
                <h6 class="mb-0">Abu Bilal</h6>
            </div>
            <div class="col-12 col-sm-6 col-lg pe-0 mb-1 mb-lg-0">
                <span>Email:</span>
                <h6 class="mb-0">iazad@outlook.com</h6>
            </div>
            <div class="col-12 col-sm-6 col-lg pe-0 mb-1 mb-lg-0">
                <span>Product:</span>
                <h6 class="mb-0">Product addons plugin</h6>
            </div>
            <div class="col-12 col-sm-6 col-lg pe-0 mb-1 mb-lg-0">
                <span class="d-block">Payment:</span>
                <span class="payment-status bg-success text-white mt-1">
                    Success <i class="bi bi-check2"></i>
                </span>
            </div>
            <div class="col-12 col-sm-6 col-lg">
                <span>Amount:</span>
                <h6 class="mb-0">$73</h6>
            </div>
        </div>
        <div class="action-btn">
            <a href="#!"><i class="bi bi-eye bg-success text-white" 
              data-bs-toggle="tooltip" data-bs-placement="top" title="" 
              data-bs-original-title="View" aria-label="View"></i></a>
            <a href="#!" class="ms-1"><i class="bi bi-pencil bg-primary text-white" 
              data-bs-toggle="tooltip" data-bs-placement="top" title="" 
              data-bs-original-title="Edit" aria-label="Edit"></i></a>
            <a href="#!" class="ms-1"><i class="bi bi-currency-dollar bg-secondary text-white" 
              data-bs-toggle="tooltip" data-bs-placement="top" title="" 
              data-bs-original-title="Refund" aria-label="Refund"></i></a>
            <a href="#!" class="ms-1"><i class="bi bi-archive bg-warning text-white" 
            data-bs-toggle="tooltip" data-bs-placement="top" title="" 
            data-bs-original-title="Archive" aria-label="Archive"></i></a>
            <a href="#!" class="ms-1"><i class="bi bi-trash bg-danger text-white" 
              data-bs-toggle="tooltip" data-bs-placement="top" title="" 
              data-bs-original-title="Delete" aria-label="Delete"></i></a>
        </div>
    </div>
  </div>
Tables
Basic Forms