##### Tables

###### Default Table

S.L | Invoice | Name | Issued Date | Amount
--- | --- | --- | --- | ---
01 | #526534 | Kathryn Murphy | 25 Jan 2024 | $200.00
02 | #696589 | Annette Black | 25 Jan 2024 | $200.00
03 | #256584 | Ronald Richards | 10 Feb 2024 | $200.00
04 | #526587 | Eleanor Pena | 10 Feb 2024 | $150.00
05 | #105986 | Leslie Alexander | 15 Mar 2024 | $150.00

      <div class="table-responsive">
        <table class="table basic-table mb-0">
          <thead>
            <tr>
              <th>S.L</th>
              <th>Invoice</th>
              <th>Name</th>
              <th>Issued Date</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>01</td>
              <td>
                <a href="#0" class="text-primary-600">#526534</a>
              </td>
              <td>Kathryn Murphy</td>
              <td>25 Jan 2024</td>
              <td>$200.00</td>
            </tr>
            <tr>
              <td>02</td>
              <td>
                <a href="#0" class="text-primary-600">#696589</a>
              </td>
              <td>Annette Black</td>
              <td>25 Jan 2024</td>
              <td>$200.00</td>
            </tr>
            <tr>
              <td>03</td>
              <td>
                <a href="#0" class="text-primary-600">#256584</a>
              </td>
              <td>Ronald Richards</td>
              <td>10 Feb 2024</td>
              <td>$200.00</td>
            </tr>
            <tr>
              <td>04</td>
              <td>
                <a href="#0" class="text-primary-600">#526587</a>
              </td>
              <td>Eleanor Pena</td>
              <td>10 Feb 2024</td>
              <td>$150.00</td>
            </tr>
            <tr>
              <td>05</td>
              <td>
                <a href="#0" class="text-primary-600">#105986</a>
              </td>
              <td>Leslie Alexander</td>
              <td>15 Mar 2024</td>
              <td>$150.00</td>
            </tr>
          </tbody>
        </table>
      </div>

###### Bordered Tables

Invoice | Name | Issued Date | Amount | Action
--- | --- | --- | --- | ---
#526534 | Kathryn Murphy | 25 Jan 2024 | $200.00 | View More >
#696589 | Annette Black | 25 Jan 2024 | $200.00 | View More >
#256584 | 256584 | 10 Feb 2024 | $200.00 | View More >
#526587 | Eleanor Pena | 10 Feb 2024 | $150.00 | View More >
#105986 | Leslie Alexander | 15 Mar 2024 | $150.00 | View More >

      <div class="table-responsive">
        <table class="table basic-border-table mb-0">
          <thead>
            <tr>
              <th>Invoice </th>
              <th>Name</th>
              <th>Issued Date</th>
              <th>Amount</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <a href="#0" class="text-primary-600">#526534</a>
              </td>
              <td>Kathryn Murphy</td>
              <td>25 Jan 2024</td>
              <td>$200.00</td>
              <td>
                <a href="#0" class="text-primary-600">View More ></a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#0" class="text-primary-600">#696589</a>
              </td>
              <td>Annette Black</td>
              <td>25 Jan 2024</td>
              <td>$200.00</td>
              <td>
                <a href="#0" class="text-primary-600">View More ></a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#0" class="text-primary-600">#256584</a>
              </td>
              <td>256584</td>
              <td>10 Feb 2024</td>
              <td>$200.00</td>
              <td>
                <a href="#0" class="text-primary-600">View More ></a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#0" class="text-primary-600">#526587</a>
              </td>
              <td>Eleanor Pena</td>
              <td>10 Feb 2024</td>
              <td>$150.00</td>
              <td>
                <a href="#0" class="text-primary-600">View More ></a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#0" class="text-primary-600">#105986</a>
              </td>
              <td>Leslie Alexander</td>
              <td>15 Mar 2024</td>
              <td>$150.00</td>
              <td>
                <a href="#0" class="text-primary-600">View More ></a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

###### Striped Rows

Items | Price | Discount | Sold | Total Orders
--- | --- | --- | --- | ---
###### Blue t-shirt Fashion | $500.00 | 15% | 300 | 70
###### Nike Air Shoe Fashion | $150.00 | N/A | 200 | 70
###### Woman Dresses Fashion | $300.00 | $50.00 | 1500 | 70
###### Smart Watch Fashion | $400.00 | $50.00 | 700 | 70
###### Hoodie Rose Fashion | $300.00 | 25% | 500 | 70

      <div class="table-responsive">
        <table class="table striped-table mb-0">
          <thead>
            <tr>
              <th scope="col">Items</th>
              <th scope="col">Price</th>
              <th scope="col">Discount </th>
              <th scope="col">Sold</th>
              <th scope="col" class="text-center">Total Orders</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <img src="assets/images/product/product-img1.png" alt="" class="flex-shrink-0 me-12 radius-8 me-12">
                  <div class="flex-grow-1">
                    <h6 class="text-md mb-0 fw-normal">Blue t-shirt</h6>
                    <span class="text-sm text-secondary-light fw-normal">Fashion</span>
                  </div>
                </div>
              </td>
              <td>$500.00</td>
              <td>15%</td>
              <td>300</td>
              <td class="text-center">
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">70</span>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <img src="assets/images/product/product-img2.png" alt="" class="flex-shrink-0 me-12 radius-8 me-12">
                  <div class="flex-grow-1">
                    <h6 class="text-md mb-0 fw-normal">Nike Air Shoe</h6>
                    <span class="text-sm text-secondary-light fw-normal">Fashion</span>
                  </div>
                </div>
              </td>
              <td>$150.00</td>
              <td>N/A</td>
              <td>200</td>
              <td class="text-center">
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">70</span>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <img src="assets/images/product/product-img3.png" alt="" class="flex-shrink-0 me-12 radius-8 me-12">
                  <div class="flex-grow-1">
                    <h6 class="text-md mb-0 fw-normal">Woman Dresses</h6>
                    <span class="text-sm text-secondary-light fw-normal">Fashion</span>
                  </div>
                </div>
              </td>
              <td>$300.00</td>
              <td>$50.00</td>
              <td>1500</td>
              <td class="text-center">
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">70</span>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <img src="assets/images/product/product-img4.png" alt="" class="flex-shrink-0 me-12 radius-8 me-12">
                  <div class="flex-grow-1">
                    <h6 class="text-md mb-0 fw-normal">Smart Watch</h6>
                    <span class="text-sm text-secondary-light fw-normal">Fashion</span>
                  </div>
                </div>
              </td>
              <td>$400.00</td>
              <td>$50.00</td>
              <td>700</td>
              <td class="text-center">
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">70</span>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <img src="assets/images/product/product-img5.png" alt="" class="flex-shrink-0 me-12 radius-8 me-12">
                  <div class="flex-grow-1">
                    <h6 class="text-md mb-0 fw-normal">Hoodie Rose</h6>
                    <span class="text-sm text-secondary-light fw-normal">Fashion</span>
                  </div>
                </div>
              </td>
              <td>$300.00</td>
              <td>25%</td>
              <td>500</td>
              <td class="text-center">
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">70</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

###### Striped Column

Items | Price | Discount | Sold | Total Orders
--- | --- | --- | --- | ---
###### Blue t-shirt Fashion | $500.00 | 15% | 300 | 70
###### Blue t-shirt Fashion | $150.00 | N/A | 200 | 70
###### Blue t-shirt Fashion | $300.00 | $50.00 | 1500 | 70
###### Blue t-shirt Fashion | $400.00 | $50.00 | 700 | 70
###### Blue t-shirt Fashion | $300.00 | 25% | 500 | 70

      <div class="table-responsive">
        <table class="table vertical-striped-table mb-0">
          <thead>
            <tr>
              <th scope="col">Items</th>
              <th scope="col">Price</th>
              <th scope="col">Discount </th>
              <th scope="col">Sold</th>
              <th scope="col" class="text-center">Total Orders</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <h6 class="text-md mb-0 fw-normal">Blue t-shirt</h6>
                <span class="text-sm text-secondary-light fw-normal">Fashion</span>
              </td>
              <td>$500.00</td>
              <td>15%</td>
              <td>300</td>
              <td class="text-center">
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">70</span>
              </td>
            </tr>
            <tr>
              <td>
                <h6 class="text-md mb-0 fw-normal">Blue t-shirt</h6>
                <span class="text-sm text-secondary-light fw-normal">Fashion</span>
              </td>
              <td>$150.00</td>
              <td>N/A</td>
              <td>200</td>
              <td class="text-center">
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">70</span>
              </td>
            </tr>
            <tr>
              <td>
                <h6 class="text-md mb-0 fw-normal">Blue t-shirt</h6>
                <span class="text-sm text-secondary-light fw-normal">Fashion</span>
              </td>
              <td>$300.00</td>
              <td>$50.00</td>
              <td>1500</td>
              <td class="text-center">
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">70</span>
              </td>
            </tr>
            <tr>
              <td>
                <h6 class="text-md mb-0 fw-normal">Blue t-shirt</h6>
                <span class="text-sm text-secondary-light fw-normal">Fashion</span>
              </td>
              <td>$400.00</td>
              <td>$50.00</td>
              <td>700</td>
              <td class="text-center">
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">70</span>
              </td>
            </tr>
            <tr>
              <td>
                <h6 class="text-md mb-0 fw-normal">Blue t-shirt</h6>
                <span class="text-sm text-secondary-light fw-normal">Fashion</span>
              </td>
              <td>$300.00</td>
              <td>25%</td>
              <td>500</td>
              <td class="text-center">
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">70</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

###### Tables Border Colors

S.L | Transaction ID | Date | Status | Amount
--- | --- | --- | --- | ---
01 | 5986124445445 | 27 Mar 2024 | Pending | $20,000.00
02 | 5986124445445 | 27 Mar 2024 | Rejected | $20,000.00
03 | 5986124445445 | 27 Mar 2024 | Completed | $20,000.00
04 | 5986124445445 | 27 Mar 2024 | Completed | $20,000.00
05 | 5986124445445 | 27 Mar 2024 | Completed | $20,000.00

      <div class="table-responsive">
        <table class="table border-primary-table mb-0">
          <thead>
            <tr>
              <th scope="col">
                <div class="form-check style-check d-flex align-items-center">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                  <label class="form-check-label" for="flexCheckDefault">
                    S.L
                  </label>
                </div>
              </th>
              <th scope="col">Transaction ID</th>
              <th scope="col">Date</th>
              <th scope="col">Status</th>
              <th scope="col">Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="form-check style-check d-flex align-items-center">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                  <label class="form-check-label" for="flexCheckDefault">
                    01
                  </label>
                </div>
              </td>
              <td>5986124445445</td>
              <td>27 Mar 2024</td>
              <td>
                <span class="bg-warning-focus text-warning-main px-32 py-4 rounded-pill fw-medium text-sm">Pending</span>
              </td>
              <td>$20,000.00</td>
            </tr>
            <tr>
              <td>
                <div class="form-check style-check d-flex align-items-center">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                  <label class="form-check-label" for="flexCheckDefault">
                    02
                  </label>
                </div>
              </td>
              <td>5986124445445</td>
              <td>27 Mar 2024</td>
              <td>
                <span class="bg-danger-focus text-danger-main px-32 py-4 rounded-pill fw-medium text-sm">Rejected</span>
              </td>
              <td>$20,000.00</td>
            </tr>
            <tr>
              <td>
                <div class="form-check style-check d-flex align-items-center">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                  <label class="form-check-label" for="flexCheckDefault">
                    03
                  </label>
                </div>
              </td>
              <td>5986124445445</td>
              <td>27 Mar 2024</td>
              <td>
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">Completed</span>
              </td>
              <td>$20,000.00</td>
            </tr>
            <tr>
              <td>
                <div class="form-check style-check d-flex align-items-center">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                  <label class="form-check-label" for="flexCheckDefault">
                    04
                  </label>
                </div>
              </td>
              <td>5986124445445</td>
              <td>27 Mar 2024</td>
              <td>
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">Completed</span>
              </td>
              <td>$20,000.00</td>
            </tr>
            <tr>
              <td>
                <div class="form-check style-check d-flex align-items-center">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                  <label class="form-check-label" for="flexCheckDefault">
                    05
                  </label>
                </div>
              </td>
              <td>5986124445445</td>
              <td>27 Mar 2024</td>
              <td>
                <span class="bg-success-focus text-success-main px-32 py-4 rounded-pill fw-medium text-sm">Completed</span>
              </td>
              <td>$20,000.00</td>
            </tr>
          </tbody>
        </table>
      </div>

###### Tables Border Colors

Registered On | Users | Email | Plan
--- | --- | --- | ---
27 Mar 2024 | ###### Dianne Russell | random@gmail.com | Free
27 Mar 2024 | ###### Wade Warren | random@gmail.com | Basic
27 Mar 2024 | ###### Albert Flores | random@gmail.com | Standard
27 Mar 2024 | ###### Bessie Cooper | random@gmail.com | Business
27 Mar 2024 | ###### Arlene McCoy | random@gmail.com | Enterprise

      <div class="table-responsive">
        <table class="table colored-row-table mb-0">
          <thead>
            <tr>
              <th scope="col" class="bg-base">Registered On</th>
              <th scope="col" class="bg-base">Users</th>
              <th scope="col" class="bg-base">Email</th>
              <th scope="col" class="bg-base">Plan</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="bg-primary-light">27 Mar 2024</td>
              <td class="bg-primary-light">
                <div class="d-flex align-items-center">
                  <img src="assets/images/users/user1.png" alt="" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                  <h6 class="text-md mb-0 fw-medium flex-grow-1">Dianne Russell</h6>
                </div>
              </td>
              <td class="bg-primary-light">random@gmail.com</td>
              <td class="bg-primary-light">Free</td>
            </tr>
            <tr>
              <td class="bg-success-focus">27 Mar 2024</td>
              <td class="bg-success-focus">
                <div class="d-flex align-items-center">
                  <img src="assets/images/users/user2.png" alt="" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                  <h6 class="text-md mb-0 fw-medium flex-grow-1">Wade Warren</h6>
                </div>
              </td>
              <td class="bg-success-focus">random@gmail.com</td>
              <td class="bg-success-focus">Basic</td>
            </tr>
            <tr>
              <td class="bg-info-focus">27 Mar 2024</td>
              <td class="bg-info-focus">
                <div class="d-flex align-items-center">
                  <img src="assets/images/users/user3.png" alt="" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                  <h6 class="text-md mb-0 fw-medium flex-grow-1">Albert Flores</h6>
                </div>
              </td>
              <td class="bg-info-focus">random@gmail.com</td>
              <td class="bg-info-focus">Standard </td>
            </tr>
            <tr>
              <td class="bg-warning-focus">27 Mar 2024</td>
              <td class="bg-warning-focus">
                <div class="d-flex align-items-center">
                  <img src="assets/images/users/user4.png" alt="" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                  <h6 class="text-md mb-0 fw-medium flex-grow-1">Bessie Cooper</h6>
                </div>
              </td>
              <td class="bg-warning-focus">random@gmail.com</td>
              <td class="bg-warning-focus">Business </td>
            </tr>
            <tr>
              <td class="bg-danger-focus">27 Mar 2024</td>
              <td class="bg-danger-focus">
                <div class="d-flex align-items-center">
                  <img src="assets/images/users/user5.png" alt="" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                  <h6 class="text-md mb-0 fw-medium flex-grow-1">Arlene McCoy</h6>
                </div>
              </td>
              <td class="bg-danger-focus">random@gmail.com</td>
              <td class="bg-danger-focus">Enterprise </td>
            </tr>
          </tbody>
        </table>
      </div>