Weekly Sales
$47K
+3.5%Total Order
58.4K
13.6%
Market Share
Samsung
33%
Huawei
29%
Apple
20%
26M
Weather
New York City
Sunny
Precipitation: 50%
31°
32° / 25°
Total Sales
Using Storage 1775.06 MB of 2 GB
Regular(895MB)
System(379MB)
Shared(192MB)
Free(576MB)
Running out of your space?
Your storage will be running out soon. Get more space and powerful productivity features.
Upgrade storageTotal Sales
Gross revenue
$165.50
5%
| Point of sale | $791.64 | 13% |
| Online Store | $113.86 | 178% |
| Online Store | $0.00 | - |
Project Statistics
5,432
Total Work Hours
13
Projects
7
Ongoing
Assignees in Sprint
+50
Project
Team
Candle Chart
Forecast Hours
2077h
20.2%Workflow Hours
100h
20%Forecast Income
$256,489
18%Advance Tables
Falcon uses List.Js for advance table. List.Js is a Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript library that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.
Documentation for List.jsFrom Falcon 3.13.0 we are intruducing advance tables using jQuery Datatables.
Ajax Table
This is an example of Advanced Table using external Data.
How to use
If you are using Gulp based workflow, follow these easy steps:
- Give your table a unique ID.
- Use the
advanceAjaxTableInit()function fromsrc/js/theme/advance-ajax-table.jsin a new JS file and update the ID. - Import the file on
src/js/theme.js
If you are not using Gulp based workflow:
- Give your table a unique ID.
- Find the
advanceAjaxTableInit()function fromtheme.js,copy the code, and update the ID in a new function.
<div class="table-list" id="advanceAjaxTable">
<div class="table-responsive scrollbar mb-3">
<table class="table table-sm table-striped fs-10 mb-0 overflow-hidden">
<thead class="bg-200">
<tr>
<th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="orderId">Order</th>
<th class="text-900 sort pe-1 align-middle white-space-nowrap pe-7" data-sort="date">Date</th>
<th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="address" style="min-width: 12.5rem;">Ship To</th>
<th class="text-900 sort pe-1 align-middle white-space-nowrap text-center" data-sort="status">Status</th>
<th class="text-900 sort pe-1 align-middle white-space-nowrap text-end" data-sort="amount">Amount</th>
<th class="no-sort"></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
</div>
<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>
</div>
<div class="card-body">
<h5 class="mb-3">How to use</h5>
<p>If you are using Gulp based workflow, follow these easy steps:</p>
<ul>
<li>Give your table a unique ID.</li>
<li>Use the <code>advanceAjaxTableInit() </code>function from <code>src/js/theme/advance-ajax-table.js </code>in a new JS file and update the ID.</li>
<li>Import the file on <code>src/js/theme.js</code></li>
</ul>
<p>If you are not using Gulp based workflow:</p>
<ul>
<li>Give your table a unique ID.</li>
<li>Find the <code>advanceAjaxTableInit() </code>function from <code>theme.js, </code>copy the code, and update the ID in a new function.</li>
</ul>
</div>Table Example
<div id="tableExample" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
<div class="table-responsive scrollbar">
<table class="table table-bordered table-striped fs-10 mb-0">
<thead class="bg-200">
<tr>
<th class="text-900 sort" data-sort="name">Name</th>
<th class="text-900 sort" data-sort="email">Email</th>
<th class="text-900 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>
<tr>
<td class="name">Jennifer</td>
<td class="email">jennifer@example.com</td>
<td class="age">52</td>
</tr>
<tr>
<td class="name">Tony</td>
<td class="email">tony@example.com</td>
<td class="age">30</td>
</tr>
<tr>
<td class="name">Tom</td>
<td class="email">tom@example.com</td>
<td class="age">25</td>
</tr>
<tr>
<td class="name">Michael</td>
<td class="email">michael@example.com</td>
<td class="age">39</td>
</tr>
<tr>
<td class="name">Antony</td>
<td class="email">antony@example.com</td>
<td class="age">39</td>
</tr>
<tr>
<td class="name">Raymond</td>
<td class="email">raymond@example.com</td>
<td class="age">52</td>
</tr>
<tr>
<td class="name">Marie</td>
<td class="email">marie@example.com</td>
<td class="age">30</td>
</tr>
<tr>
<td class="name">Cohen</td>
<td class="email">cohen@example.com</td>
<td class="age">25</td>
</tr>
<tr>
<td class="name">Rowen</td>
<td class="email">rowen@example.com</td>
<td class="age">39</td>
</tr>
</tbody>
</table>
</div>
<div class="row align-items-center mt-3">
<div class="pagination d-none"></div>
<div class="col">
<p class="mb-0 fs-10">
<span class="d-none d-sm-inline-block" data-list-info="data-list-info"></span>
<span class="d-none d-sm-inline-block"> —</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><a class="fw-semi-bold d-none" href="#!" data-list-view="less">View Less<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>Pagination with numbering
Add pagination class for enable number pagination. The following structure will enable number pagination with next and previous button.
<div id="tableExample2" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
<div class="table-responsive scrollbar">
<table class="table table-bordered table-striped fs-10 mb-0">
<thead class="bg-200">
<tr>
<th class="text-900 sort" data-sort="name">Name</th>
<th class="text-900 sort" data-sort="email">Email</th>
<th class="text-900 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>
<tr>
<td class="name">Jennifer</td>
<td class="email">jennifer@example.com</td>
<td class="age">52</td>
</tr>
<tr>
<td class="name">Tony</td>
<td class="email">tony@example.com</td>
<td class="age">30</td>
</tr>
<tr>
<td class="name">Tom</td>
<td class="email">tom@example.com</td>
<td class="age">25</td>
</tr>
<tr>
<td class="name">Michael</td>
<td class="email">michael@example.com</td>
<td class="age">39</td>
</tr>
<tr>
<td class="name">Antony</td>
<td class="email">antony@example.com</td>
<td class="age">39</td>
</tr>
<tr>
<td class="name">Raymond</td>
<td class="email">raymond@example.com</td>
<td class="age">52</td>
</tr>
<tr>
<td class="name">Marie</td>
<td class="email">marie@example.com</td>
<td class="age">30</td>
</tr>
<tr>
<td class="name">Cohen</td>
<td class="email">cohen@example.com</td>
<td class="age">25</td>
</tr>
<tr>
<td class="name">Rowen</td>
<td class="email">rowen@example.com</td>
<td class="age">39</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-center mt-3"><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>
</div>Search Example
Add search class for enable data searching. The following structure will enable search feature.
<div id="tableExample3" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
<div class="row justify-content-end g-0">
<div class="col-auto col-sm-5 mb-3">
<form>
<div class="input-group"><input class="form-control form-control-sm shadow-none search" type="search" placeholder="Search..." aria-label="search" />
<div class="input-group-text bg-transparent"><span class="fa fa-search fs-10 text-600"></span></div>
</div>
</form>
</div>
</div>
<div class="table-responsive scrollbar">
<table class="table table-bordered table-striped fs-10 mb-0">
<thead class="bg-200">
<tr>
<th class="text-900 sort" data-sort="name">Name</th>
<th class="text-900 sort" data-sort="email">Email</th>
<th class="text-900 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>
<tr>
<td class="name">Jennifer</td>
<td class="email">jennifer@example.com</td>
<td class="age">52</td>
</tr>
<tr>
<td class="name">Tony</td>
<td class="email">tony@example.com</td>
<td class="age">30</td>
</tr>
<tr>
<td class="name">Tom</td>
<td class="email">tom@example.com</td>
<td class="age">25</td>
</tr>
<tr>
<td class="name">Michael</td>
<td class="email">michael@example.com</td>
<td class="age">39</td>
</tr>
<tr>
<td class="name">Antony</td>
<td class="email">antony@example.com</td>
<td class="age">39</td>
</tr>
<tr>
<td class="name">Raymond</td>
<td class="email">raymond@example.com</td>
<td class="age">52</td>
</tr>
<tr>
<td class="name">Marie</td>
<td class="email">marie@example.com</td>
<td class="age">30</td>
</tr>
<tr>
<td class="name">Cohen</td>
<td class="email">cohen@example.com</td>
<td class="age">25</td>
</tr>
<tr>
<td class="name">Rowen</td>
<td class="email">rowen@example.com</td>
<td class="age">39</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-center mt-3"><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>
</div>Filter Example
<div id="tableExample4" data-list='{"valueNames":["name","email","payment"],"filter":{"key":"payment"}}'>
<div class="row justify-content-end g-0">
<div class="col-auto px-3"><select class="form-select form-select-sm mb-3" aria-label="Bulk actions" data-list-filter="data-list-filter">
<option selected="" value="">Select payment status</option>
<option value="Pending">Pending</option>
<option value="Success">Success</option>
<option value="Blocked">Blocked</option>
</select></div>
</div>
<div class="table-responsive scrollbar">
<table class="table table-sm table-striped fs-10 mb-0 overflow-hidden">
<thead class="bg-200">
<tr>
<th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="name">Customer</th>
<th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="email">Email</th>
<th class="text-900 sort align-middle white-space-nowrap text-end pe-4" data-sort="payment">Payment</th>
</tr>
</thead>
<tbody class="list" id="table-purchase-body">
<tr class="btn-reveal-trigger">
<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 text-end fs-9 white-space-nowrap payment"><span class="badge badge rounded-pill badge-subtle-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
</tr>
<tr class="btn-reveal-trigger">
<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 text-end fs-9 white-space-nowrap payment"><span class="badge badge rounded-pill badge-subtle-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
</tr>
<tr class="btn-reveal-trigger">
<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 text-end fs-9 white-space-nowrap payment"><span class="badge badge rounded-pill badge-subtle-secondary">Blocked<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
</tr>
<tr class="btn-reveal-trigger">
<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 text-end fs-9 white-space-nowrap payment"><span class="badge badge rounded-pill badge-subtle-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
</tr>
<tr class="btn-reveal-trigger">
<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 text-end fs-9 white-space-nowrap payment"><span class="badge badge rounded-pill badge-subtle-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
</tr>
<tr class="btn-reveal-trigger">
<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 text-end fs-9 white-space-nowrap payment"><span class="badge badge rounded-pill badge-subtle-secondary">Blocked<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
</tr>
<tr class="btn-reveal-trigger">
<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 text-end fs-9 white-space-nowrap payment"><span class="badge badge rounded-pill badge-subtle-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
</tr>
<tr class="btn-reveal-trigger">
<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 text-end fs-9 white-space-nowrap payment"><span class="badge badge rounded-pill badge-subtle-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
</tr>
<tr class="btn-reveal-trigger">
<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 text-end fs-9 white-space-nowrap payment"><span class="badge badge rounded-pill badge-subtle-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
</tr>
<tr class="btn-reveal-trigger">
<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 text-end fs-9 white-space-nowrap payment"><span class="badge badge rounded-pill badge-subtle-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
</tr>
</tbody>
</table>
</div>
</div>Docs
Integrate List in Falcon by following these easy steps:
- Set unique ID and add
data-listattribute to the wrapper element and list your column invalueNamesproperty.<div id="tableExample" data-list='{"valueNames":["name","email","age"]}'> <!-- Your list content will go here--></div> - To enable sorting in your column, add
data-sortattribute and assign column name to the attribute.<th class="sort" data-sort="name">Customer</th> - Add
listclass 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
namethen the value will be look like this:<td class="name">John Doe</td> - To add pagination
.paginationclass inside your wrapper element - To enable button pagination add
data-list-pagination='prev'anddata-list-pagination='next'to the "Prev" and "Next" buttons respectively. - To enable search feature add
searchclass ininputtag. - To see the list info, add
data-list-infoattribute to a DOM element inside your wrapper element.
FAQ Accordion
Below you'll find answers to the questions we get
asked the most about to join with Falcon
Once you’re set up, payouts arrive in your bank account on a 2-day rolling basis. Or you can opt to receive payouts weekly or monthly.
You can issue either partial or full refunds. There are no fees to refund a charge, but the fees from the original charge are not returned.
Disputed payments (also known as chargebacks) incur a $15.00 fee. If the customer’s bank resolves the dispute in your favor, the fee is fully refunded.
There are no additional fees for using our mobile SDKs or to accept payments using consumer wallets like Apple Pay or Google Pay.
