### 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
Clark | clark@example.com | 39
Jennifer | jennifer@example.com | 52
Tony | tony@example.com | 30
Tom | tom@example.com | 25
Michael | michael@example.com | 39
Antony | antony@example.com | 39
Raymond | raymond@example.com | 52
Marie | marie@example.com | 30
Cohen | cohen@example.com | 25
Rowen | rowen@example.com | 39

— 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
Clark | clark@example.com | 39
Jennifer | jennifer@example.com | 52
Tony | tony@example.com | 30
Tom | tom@example.com | 25
Michael | michael@example.com | 39
Antony | antony@example.com | 39
Raymond | raymond@example.com | 52
Marie | marie@example.com | 30
Cohen | cohen@example.com | 25
Rowen | rowen@example.com | 39

    <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
Clark | clark@example.com | 39
Jennifer | jennifer@example.com | 52
Tony | tony@example.com | 30
Tom | tom@example.com | 25
Michael | michael@example.com | 39
Antony | antony@example.com | 39
Raymond | raymond@example.com | 52
Marie | marie@example.com | 30
Cohen | cohen@example.com | 25
Rowen | rowen@example.com | 39

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

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

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize