List.js

Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

Documentation for List.js
Docs

Integrate List in Falcon by following these easy steps:

  • Set unique ID and add data-list attribute to the wrapper element and list your column in valueNames property.
    <div id="tableExample" data-list='{"valueNames":["name","email","age"]}'>
    
       <!-- Your list content will go here-->
     </div>
  • To enable sorting in your column, add data-sort attribute and assign column name to the attribute.
    <th class="sort" data-sort="name">Customer</th>
  • Add list class to the content wrapper element.
    <tbody class="list">
    
       <!-- Your value will go here-->
     </tbody>
  • Then wrap your value with column name as a class. For example, if your column name is name then the value will be look like this:
    <td class="name">John Doe</td>
  • To add pagination add .pagination class inside your wrapper element
  • To enable button pagination add data-list-pagination='prev' and data-list-pagination='next' to the "Prev" and "Next" buttons respectively.
  • To see the list info, add data-list-info attribute to a DOM element inside your wrapper element.
Table Example
Name Email Age
Anna 18
Homer 35
Oscar 52
Emily 30
Jara 25
Clark 39

View all

<div id="tableExample" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
  <table class="table table-bordered table-striped fs--1">
    <thead class="bg-200 text-900">
      <tr>
        <th class="sort" data-sort="name">Name</th>
        <th class="sort" data-sort="email">Email</th>
        <th class="sort" data-sort="age">Age</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <td class="name">Anna</td>
        <td class="email">anna@example.com</td>
        <td class="age">18</td>
      </tr>
      <tr>
        <td class="name">Homer</td>
        <td class="email">homer@example.com</td>
        <td class="age">35</td>
      </tr>
      <tr>
        <td class="name">Oscar</td>
        <td class="email">oscar@example.com</td>
        <td class="age">52</td>
      </tr>
      <tr>
        <td class="name">Emily</td>
        <td class="email">emily@example.com</td>
        <td class="age">30</td>
      </tr>
      <tr>
        <td class="name">Jara</td>
        <td class="email">jara@example.com</td>
        <td class="age">25</td>
      </tr>
      <tr>
        <td class="name">Clark</td>
        <td class="email">clark@example.com</td>
        <td class="age">39</td>
      </tr>
    </tbody>
  </table>
  <div class="row align-items-center">
    <div class="pagination d-none"></div>
    <div class="col">
      <p class="mb-0 fs--1">
        <span class="d-none d-sm-inline-block" data-list-info="data-list-info"></span>
        <span class="d-none d-sm-inline-block"> &mdash; </span>
        <a class="fw-semi-bold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
      </p>
    </div>
    <div class="col-auto d-flex"><button class="btn btn-sm" type="button" data-list-pagination="prev"><span>Previous</span></button><button class="btn btn-sm px-4 ms-2" type="button" data-list-pagination="next"><span>Next</span></button></div>
  </div>
</div>
Pagination with numbering

Add pagination class for enable number pagination. The following structure will enable number pagination with next and previous button.

<div class="d-flex align-items-center justify-content-center"><button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
  <ul class="pagination mb-0"></ul><button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
</div>
Name Email Age
Anna 18
Homer 35
Oscar 52
Emily 30
Jara 25
Clark 39
    Javascript
    <script src="vendors/list.js/list.min.js"></script>

    Complex example with bulk select

    You can see the bulk select implemention for better understanding.

    Bulk Select documentation
    Recent Purchases
    Customer Email Product Payment Amount
    Sylvia Plath Slick - Drag & Drop Bootstrap Generator Success $99
    Homer Bose SoundSport Wireless Headphones Success $634
    Edgar Allan Poe All-New Fire HD 8 Kids Edition Tablet Blocked $199
    William Butler Yeats Apple iPhone XR (64GB) Success $798
    Rabindranath Tagore ASUS Chromebook C202SA-YS02 11.6" Blocked $318
    Emily Dickinson Mirari OK to Wake! Alarm Clock & Night-Light Pending $11
    Giovanni Boccaccio Summer Infant Contoured Changing Pad Success $31
    Oscar Wilde Munchkin 6 Piece Fork and Spoon Set Success $43
    John Doe Falcon - Responsive Dashboard Template Success $57
    Emma Watson Apple iPhone XR (64GB) Blocked $999
    Sylvia Plath All-New Fire HD 8 Kids Edition Tablet Pending $199
    <div class="card mb-3" id="recentPurchaseTable" data-list='{"valueNames":["name","email","product","payment","amount"],"page":8,"pagination":true}'>
      <div class="card-header">
        <div class="row flex-between-center">
          <div class="col-6 col-sm-auto d-flex align-items-center pe-0">
            <h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">Recent Purchases</h5>
          </div>
          <div class="col-6 col-sm-auto ms-auto text-end ps-0">
            <div class="d-none" id="table-purchases-actions">
              <div class="d-flex"><select class="form-select form-select-sm" aria-label="Bulk actions">
                  <option selected="">Bulk actions</option>
                  <option value="Refund">Refund</option>
                  <option value="Delete">Delete</option>
                  <option value="Archive">Archive</option>
                </select><button class="btn btn-falcon-default btn-sm ms-2" type="button">Apply</button></div>
            </div>
            <div id="table-purchases-replace-element"><button class="btn btn-falcon-default btn-sm" type="button"><span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span><span class="d-none d-sm-inline-block ms-1">New</span></button><button class="btn btn-falcon-default btn-sm mx-2" type="button"><span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span><span class="d-none d-sm-inline-block ms-1">Filter</span></button><button class="btn btn-falcon-default btn-sm" type="button"><span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span><span class="d-none d-sm-inline-block ms-1">Export</span></button></div>
          </div>
        </div>
      </div>
      <div class="card-body px-0 py-0">
        <div class="table-responsive scrollbar">
          <table class="table table-sm fs--1 mb-0 overflow-hidden">
            <thead class="bg-200 text-900">
              <tr>
                <th>
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" id="checkbox-bulk-purchases-select" type="checkbox" data-bulk-select='{"body":"table-purchase-body","actions":"table-purchases-actions","replacedElement":"table-purchases-replace-element"}' /></div>
                </th>
                <th class="sort pe-1 align-middle white-space-nowrap" data-sort="name">Customer</th>
                <th class="sort pe-1 align-middle white-space-nowrap" data-sort="email">Email</th>
                <th class="sort pe-1 align-middle white-space-nowrap" data-sort="product">Product</th>
                <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="payment">Payment</th>
                <th class="sort pe-1 align-middle white-space-nowrap text-end" data-sort="amount">Amount</th>
                <th class="no-sort pe-1 align-middle data-table-row-action"></th>
              </tr>
            </thead>
            <tbody class="list" id="table-purchase-body">
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-0" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Sylvia Plath</a></th>
                <td class="align-middle white-space-nowrap email">john@gmail.com</td>
                <td class="align-middle white-space-nowrap product">Slick - Drag &amp; Drop Bootstrap Generator</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$99</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown0" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown0"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-1" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Homer</a></th>
                <td class="align-middle white-space-nowrap email">sylvia@mail.ru</td>
                <td class="align-middle white-space-nowrap product">Bose SoundSport Wireless Headphones</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$634</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown1" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown1"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-2" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Edgar Allan Poe</a></th>
                <td class="align-middle white-space-nowrap email">edgar@yahoo.com</td>
                <td class="align-middle white-space-nowrap product">All-New Fire HD 8 Kids Edition Tablet</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-secondary">Blocked<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$199</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown2" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-3" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">William Butler Yeats</a></th>
                <td class="align-middle white-space-nowrap email">william@gmail.com</td>
                <td class="align-middle white-space-nowrap product">Apple iPhone XR (64GB)</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$798</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown3" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown3"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-4" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Rabindranath Tagore</a></th>
                <td class="align-middle white-space-nowrap email">tagore@twitter.com</td>
                <td class="align-middle white-space-nowrap product">ASUS Chromebook C202SA-YS02 11.6&quot;</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-secondary">Blocked<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$318</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown4" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown4"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-5" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Emily Dickinson</a></th>
                <td class="align-middle white-space-nowrap email">emily@gmail.com</td>
                <td class="align-middle white-space-nowrap product">Mirari OK to Wake! Alarm Clock &amp; Night-Light</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$11</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown5" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown5"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-6" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Giovanni Boccaccio</a></th>
                <td class="align-middle white-space-nowrap email">giovanni@outlook.com</td>
                <td class="align-middle white-space-nowrap product">Summer Infant Contoured Changing Pad</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$31</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown6" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown6"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-7" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Oscar Wilde</a></th>
                <td class="align-middle white-space-nowrap email">oscar@hotmail.com</td>
                <td class="align-middle white-space-nowrap product">Munchkin 6 Piece Fork and Spoon Set</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$43</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown7" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown7"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-8" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">John Doe</a></th>
                <td class="align-middle white-space-nowrap email">doe@gmail.com</td>
                <td class="align-middle white-space-nowrap product">Falcon - Responsive Dashboard Template</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$57</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown8" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown8"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-9" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Emma Watson</a></th>
                <td class="align-middle white-space-nowrap email">emma@gmail.com</td>
                <td class="align-middle white-space-nowrap product">Apple iPhone XR (64GB)</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-secondary">Blocked<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$999</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown9" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown9"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
              <tr class="btn-reveal-trigger">
                <td class="align-middle" style="width: 28px;">
                  <div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-10" data-bulk-select-row="data-bulk-select-row" /></div>
                </td>
                <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Sylvia Plath</a></th>
                <td class="align-middle white-space-nowrap email">plath@yahoo.com</td>
                <td class="align-middle white-space-nowrap product">All-New Fire HD 8 Kids Edition Tablet</td>
                <td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
                <td class="align-middle text-end amount">$199</td>
                <td class="align-middle white-space-nowrap">
                  <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-end" type="button" id="dropdown10" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--1"></span></button>
                    <div class="dropdown-menu dropdown-menu-end border py-2" aria-labelledby="dropdown10"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
                      <div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="card-footer">
        <div class="row align-items-center">
          <div class="pagination d-none"></div>
          <div class="col">
            <p class="mb-0 fs--1"><span class="d-none d-sm-inline-block me-2" data-list-info="data-list-info"> </span><span class="d-none d-sm-inline-block me-2">&mdash;  </span><a class="fw-semi-bold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a></p>
          </div>
          <div class="col-auto d-flex"><button class="btn btn-sm btn-primary" type="button" data-list-pagination="prev"><span>Previous</span></button><button class="btn btn-sm btn-primary px-4 ms-2" type="button" data-list-pagination="next"><span>Next</span></button></div>
        </div>
      </div>
    </div>

    Thank you for creating with Falcon |
    2021 © Themewagon

    v3.0.0-beta5

    customize