Advance Tables

Falcon tailwind 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
Table Example
Name Email Age
Anna 18
Homer 35
Oscar 52
Emily 30
Jara 25
Clark 39
Jennifer 52
Tony 30
Tom 25
Michael 39
Antony 39
Raymond 52
Marie 30
Cohen 25
Rowen 39

View all 

<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 text-sm mb-0">
      <thead class="bg-highlight">
        <tr>
          <th class="text-highlight sort" data-sort="name">Name</th>
          <th class="text-highlight sort" data-sort="email">Email</th>
          <th class="text-highlight 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 items-center mt-4">
    <div class="pagination hidden"></div>
    <div class="col">
      <p class="mb-0 text-sm">
        <span class="hidden sm:inline-block" data-list-info="data-list-info"></span>
        <span class="hidden sm:inline-block"> &mdash;</span>
        <a class="font-semibold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="font-semibold hidden" 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 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-7 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 18
Homer 35
Oscar 52
Emily 30
Jara 25
Clark 39
Jennifer 52
Tony 30
Tom 25
Michael 39
Antony 39
Raymond 52
Marie 30
Cohen 25
Rowen 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 text-sm mb-0">
      <thead class="bg-highlight">
        <tr>
          <th class="text-highlight sort" data-sort="name">Name</th>
          <th class="text-highlight sort" data-sort="email">Email</th>
          <th class="text-highlight 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="flex justify-center mt-4"><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 18
    Homer 35
    Oscar 52
    Emily 30
    Jara 25
    Clark 39
    Jennifer 52
    Tony 30
    Tom 25
    Michael 39
    Antony 39
    Raymond 52
    Marie 30
    Cohen 25
    Rowen 39 
      <div id="tableExample3" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
  <div class="row justify-end g-0">
    <div class="col-auto sm:col-5 mb-4">
      <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 text-sm text-muted"></span></div>
        </div>
      </form>
    </div>
  </div>
  <div class="table-responsive scrollbar">
    <table class="table table-bordered table-striped text-sm mb-0">
      <thead class="bg-highlight">
        <tr>
          <th class="text-highlight sort" data-sort="name">Name</th>
          <th class="text-highlight sort" data-sort="email">Email</th>
          <th class="text-highlight 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="flex justify-center mt-4"><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 Success
      Homer canada Pending
      Edgar Allan Poe UK Blocked
      William Butler Yeats USA Success
      Rabindranath Tagore canada Pending
      Emily Dickinson UK Blocked
      Giovanni Boccaccio USA Pending
      Oscar Wilde USA Success
      John Doe canada Success
      Emma Watson UK 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-4" data-list-filter="country"></select>
      <div id="tableExample4" data-list='{"valueNames":["name","country","email","payment"]}'>
  <div class="row justify-end gx-4 gy-0 px-4">
    <div class="sm:col-auto"><select class="form-select form-select-sm mb-4" 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="sm:col-auto"><select class="form-select form-select-sm mb-4" 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 text-sm mb-0 overflow-hidden">
      <thead class="bg-highlight">
        <tr>
          <th class="text-highlight sort pe-1 align-middle whitespace-nowrap" data-sort="name">Customer</th>
          <th class="text-highlight sort pe-1 align-middle whitespace-nowrap" data-sort="country">Country</th>
          <th class="text-highlight sort pe-1 align-middle whitespace-nowrap" data-sort="email">Email</th>
          <th class="text-highlight sort align-middle whitespace-nowrap text-end pe-7" data-sort="payment">Payment</th>
        </tr>
      </thead>
      <tbody class="list" id="table-purchase-body">
        <tr class="btn-reveal-trigger">
          <th class="align-middle whitespace-nowrap name"><a href="../../app/e-commerce/customer-details.html">Sylvia Plath</a></th>
          <td class="align-middle whitespace-nowrap country">USA</td>
          <td class="align-middle whitespace-nowrap email">john@gmail.com</td>
          <td class="align-middle text-end text-base whitespace-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 whitespace-nowrap name"><a href="../../app/e-commerce/customer-details.html">Homer</a></th>
          <td class="align-middle whitespace-nowrap country">canada</td>
          <td class="align-middle whitespace-nowrap email">sylvia@mail.ru</td>
          <td class="align-middle text-end text-base whitespace-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 whitespace-nowrap name"><a href="../../app/e-commerce/customer-details.html">Edgar Allan Poe</a></th>
          <td class="align-middle whitespace-nowrap country">UK</td>
          <td class="align-middle whitespace-nowrap email">edgar@yahoo.com</td>
          <td class="align-middle text-end text-base whitespace-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 whitespace-nowrap name"><a href="../../app/e-commerce/customer-details.html">William Butler Yeats</a></th>
          <td class="align-middle whitespace-nowrap country">USA</td>
          <td class="align-middle whitespace-nowrap email">william@gmail.com</td>
          <td class="align-middle text-end text-base whitespace-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 whitespace-nowrap name"><a href="../../app/e-commerce/customer-details.html">Rabindranath Tagore</a></th>
          <td class="align-middle whitespace-nowrap country">canada</td>
          <td class="align-middle whitespace-nowrap email">tagore@twitter.com</td>
          <td class="align-middle text-end text-base whitespace-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 whitespace-nowrap name"><a href="../../app/e-commerce/customer-details.html">Emily Dickinson</a></th>
          <td class="align-middle whitespace-nowrap country">UK</td>
          <td class="align-middle whitespace-nowrap email">emily@gmail.com</td>
          <td class="align-middle text-end text-base whitespace-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 whitespace-nowrap name"><a href="../../app/e-commerce/customer-details.html">Giovanni Boccaccio</a></th>
          <td class="align-middle whitespace-nowrap country">USA</td>
          <td class="align-middle whitespace-nowrap email">giovanni@outlook.com</td>
          <td class="align-middle text-end text-base whitespace-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 whitespace-nowrap name"><a href="../../app/e-commerce/customer-details.html">Oscar Wilde</a></th>
          <td class="align-middle whitespace-nowrap country">USA</td>
          <td class="align-middle whitespace-nowrap email">oscar@hotmail.com</td>
          <td class="align-middle text-end text-base whitespace-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 whitespace-nowrap name"><a href="../../app/e-commerce/customer-details.html">John Doe</a></th>
          <td class="align-middle whitespace-nowrap country">canada</td>
          <td class="align-middle whitespace-nowrap email">doe@gmail.com</td>
          <td class="align-middle text-end text-base whitespace-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 whitespace-nowrap name"><a href="../../app/e-commerce/customer-details.html">Emma Watson</a></th>
          <td class="align-middle whitespace-nowrap country">UK</td>
          <td class="align-middle whitespace-nowrap email">emma@gmail.com</td>
          <td class="align-middle text-end text-base whitespace-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-4">
  <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-4&quot; data-list-filter=&quot;country&quot;&gt;&lt;/select&gt;</code></pre>
</div>
      Docs

      Integrate List in Falcon tailwind 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-4">
    <table class="table table-sm table-striped text-sm mb-0 overflow-hidden">
      <thead class="bg-highlight">
        <tr>
          <th class="text-highlight sort pe-1 align-middle whitespace-nowrap" data-sort="orderId">Order</th>
          <th class="text-highlight sort pe-1 align-middle whitespace-nowrap pe-20" data-sort="date">Date</th>
          <th class="text-highlight sort pe-1 align-middle whitespace-nowrap min-w-50" data-sort="address">Ship To</th>
          <th class="text-highlight sort pe-1 align-middle whitespace-nowrap text-center" data-sort="status">Status</th>
          <th class="text-highlight sort pe-1 align-middle whitespace-nowrap text-end" data-sort="amount">Amount</th>
          <th class="no-sort"></th>
        </tr>
      </thead>
      <tbody class="list"></tbody>
    </table>
  </div>
  <div class="flex items-center justify-center"><button class="btn btn-sm btn-falcon-default me-1 inline-block" 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 inline-block" 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-4">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>

        Thank you for creating with Falcon tailwind
        2026 © ThemeWagon

        v1.0.0-alpha

        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 tailwind now and create beautiful dashboards with hundreds of widgets.

        Purchase
        customize