Falcon | Dashboard & Web App Template

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.js

From Falcon 3.13.0 we are intruducing advance tables using jQuery Datatables.

Datatables components

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 15 — View all View Less

<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"> &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><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.

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

<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.

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

<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

Customer	Country	Email	Payment
Sylvia Plath	USA	john@gmail.com	Success
Homer	canada	sylvia@mail.ru	Pending
Edgar Allan Poe	UK	edgar@yahoo.com	Blocked
William Butler Yeats	USA	william@gmail.com	Success
Rabindranath Tagore	canada	tagore@twitter.com	Pending
Emily Dickinson	UK	emily@gmail.com	Blocked
Giovanni Boccaccio	USA	giovanni@outlook.com	Pending
Oscar Wilde	USA	oscar@hotmail.com	Success
John Doe	canada	doe@gmail.com	Success
Emma Watson	UK	emma@gmail.com	Pending

Use data-list-filter attribute with the select fields and assign the value according to the column name. For example

<select class="form-select form-select-sm mb-3" data-list-filter="country"></select>

<div id="tableExample4" data-list='{"valueNames":["name","country","email","payment"]}'>
  <div class="row justify-content-end justify-content-end gx-3 gy-0 px-3">
    <div class="col-sm-auto"><select class="form-select form-select-sm mb-3" data-list-filter="country">
        <option selected="" value="">Select country</option>
        <option value="usa">USA</option>
        <option value="canada">Canada</option>
        <option value="uk">UK</option>
      </select></div>
    <div class="col-sm-auto"><select class="form-select form-select-sm mb-3" data-list-filter="payment">
        <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="country">Country</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 country">USA</td>
          <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 country">canada</td>
          <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 country">UK</td>
          <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 country">USA</td>
          <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 country">canada</td>
          <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 country">UK</td>
          <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 country">USA</td>
          <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 country">USA</td>
          <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 country">canada</td>
          <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 country">UK</td>
          <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>
<div class="p-3">
  <p>Use <code>data-list-filter </code>attribute with the select fields and assign the value according to the column name. For example</p><pre class="scrollbar mt-2"><code class="language-html">&lt;select class=&quot;form-select form-select-sm mb-3&quot; data-list-filter=&quot;country&quot;&gt;&lt;/select&gt;</code></pre>
</div>

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 .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 enable search feature add search class in input tag.
To see the list info, add data-list-info attribute to a DOM element inside your wrapper element.

Ajax Table

This is an example of Advanced Table using external Data.

Order	Date	Ship To	Status	Amount
#181 by Ricky Antony ricky@example.com	20/04/2019	Ricky Antony, 2392 Main Avenue, Penasauka, New Jersey 02149 Via Flat Rate	Completed	$99	View Edit Refund Archive Archive
#182 by Kin Rossow kin@example.com	20/04/2019	Kin Rossow, 1 Hollywood Blvd,Beverly Hills, California 90210 Via Free Shipping	Processing	$120	View Edit Refund Archive Archive
#183 by Merry Diana merry@example.com	30/04/2019	Merry Diana, 1 Infinite Loop, Cupertino, California 90210 Via Link Road	On Hold	$70	View Edit Refund Archive Archive
#184 by Bucky Robert bucky@example.com	30/04/2019	Bucky Robert, 1 Infinite Loop, Cupertino, California 90210 Via Free Shipping	Pending	$92	View Edit Refund Archive Archive
#185 by Rocky Zampa rocky@example.com	30/04/2019	Rocky Zampa, 1 Infinite Loop, Cupertino, California 90210 Via Free Road	On Hold	$120	View Edit Refund Archive Archive
#186 by Ricky John ricky@example.com	30/04/2019	Ricky John, 1 Infinite Loop, Cupertino, California 90210 Via Free Shipping	Processing	$145	View Edit Refund Archive Archive
#187 by Cristofer Henric cristofer@example.com	30/04/2019	Cristofer Henric, 1 Infinite Loop, Cupertino, California 90210 Via Flat Rate	Completed	$55	View Edit Refund Archive Archive
#188 by Brate Lee lee@example.com	29/04/2019	Brate Lee, 1 Infinite Loop, Cupertino, California 90210 Via Link Road	On Hold	$90	View Edit Refund Archive Archive
#189 by Thomas Stephenson Stephenson@example.com	29/04/2019	Thomas Stephenson, 116 Ballifeary Road, Bamff Via Flat Rate	Processing	$52	View Edit Refund Archive Archive
#190 by Evie Singh eviewsing@example.com	29/04/2019	Evie Singh, 54 Castledore Road, Tunstead Via Flat Rate	Completed	$90	View Edit Refund Archive Archive

How to use

If you are using Gulp based workflow, follow these easy steps:

Give your table a unique ID.
Use the advanceAjaxTableInit() function from src/js/theme/advance-ajax-table.js in 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 from theme.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>

Javascript

<script src="vendors/list.js/list.min.js"></script>

Advance Tables

Table Example

Search Example

Filter Example

Docs

Ajax Table

How to use

Javascript

Settings

Color Scheme

RTL Mode

Fluid Layout

Navigation Position

Vertical Navbar Style

Like What You See?

iPhone

Falcon v1.8.2

Anna Karinina

Antony Hopkins

Emma Watson

Advance Tables

Table Example

Pagination with numbering

Search Example

Filter Example

Docs

Ajax Table

How to use

Javascript

Settings

Color Scheme

RTL Mode

Fluid Layout

Navigation Position

Vertical Navbar Style

Like What You See?