Falcon | Dashboard & Web App Templat

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	anna@example.com	18
Homer	homer@example.com	35
Oscar	oscar@example.com	52
Emily	emily@example.com	30
Jara	jara@example.com	25

1 to 5 of 6 — 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="font-weight-semi-bold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ml-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 ml-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 mr-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 ml-1" type="button" title="Next" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
</div>

Name	Email	Age
Anna	anna@example.com	18
Homer	homer@example.com	35
Oscar	oscar@example.com	52
Emily	emily@example.com	30
Jara	jara@example.com	25

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	john@gmail.com	Slick - Drag & Drop Bootstrap Generator	Success	$99	View Edit Refund Archive Delete
Homer	sylvia@mail.ru	Bose SoundSport Wireless Headphones	Success	$634	View Edit Refund Archive Delete
Edgar Allan Poe	edgar@yahoo.com	All-New Fire HD 8 Kids Edition Tablet	Blocked	$199	View Edit Refund Archive Delete
William Butler Yeats	william@gmail.com	Apple iPhone XR (64GB)	Success	$798	View Edit Refund Archive Delete
Rabindranath Tagore	tagore@twitter.com	ASUS Chromebook C202SA-YS02 11.6"	Blocked	$318	View Edit Refund Archive Delete
Emily Dickinson	emily@gmail.com	Mirari OK to Wake! Alarm Clock & Night-Light	Pending	$11	View Edit Refund Archive Delete
Giovanni Boccaccio	giovanni@outlook.com	Summer Infant Contoured Changing Pad	Success	$31	View Edit Refund Archive Delete
Oscar Wilde	oscar@hotmail.com	Munchkin 6 Piece Fork and Spoon Set	Success	$43	View Edit Refund Archive Delete

1 to 8 of 11— View all

<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 pr-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 ml-auto text-right pl-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 ml-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 ml-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 ml-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 ml-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">
        <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 pr-1 align-middle white-space-nowrap" data-sort="name">Customer</th>
            <th class="sort pr-1 align-middle white-space-nowrap" data-sort="email">Email</th>
            <th class="sort pr-1 align-middle white-space-nowrap" data-sort="product">Product</th>
            <th class="sort pr-1 align-middle white-space-nowrap text-center" data-sort="payment">Payment</th>
            <th class="sort pr-1 align-middle white-space-nowrap text-right" data-sort="amount">Amount</th>
            <th class="no-sort pr-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="../pages/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="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown0" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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="../pages/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="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown1" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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="../pages/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="ml-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown2" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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="../pages/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="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown3" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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="../pages/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="ml-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown4" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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="../pages/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="ml-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown5" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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="../pages/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="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown6" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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="../pages/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="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown7" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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="../pages/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="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown8" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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="../pages/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="ml-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown9" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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="../pages/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="ml-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
            <td class="align-middle text-right 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-right" type="button" id="dropdown10" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
                <div class="dropdown-menu dropdown-menu-right 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 mr-2" data-list-info="data-list-info"> </span><span class="d-none d-sm-inline-block mr-2">&mdash;  </span><a class="font-weight-semi-bold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ml-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 ml-2" type="button" data-list-pagination="next"><span>Next</span></button></div>
    </div>
  </div>
</div>

iPhone

Falcon v1.8.2

Anna Karinina

Antony Hopkins

Emma Watson