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

Table Example

Name	Email	Age
Anna	[email protected]	18
Homer	[email protected]	35
Oscar	[email protected]	52
Emily	[email protected]	30
Jara	[email protected]	25
Clark	[email protected]	39
Jennifer	[email protected]	52
Tony	[email protected]	30
Tom	[email protected]	25
Michael	[email protected]	39
Antony	[email protected]	39
Raymond	[email protected]	52
Marie	[email protected]	30
Cohen	[email protected]	25
Rowen	[email protected]	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--1 mb-0">
      <thead class="bg-200 text-900">
        <tr>
          <th class="sort" data-sort="name">Name</th>
          <th class="sort" data-sort="email">Email</th>
          <th class="sort" data-sort="age">Age</th>
        </tr>
      </thead>
      <tbody class="list">
        <tr>
          <td class="name">Anna</td>
          <td class="email">[email protected]</td>
          <td class="age">18</td>
        </tr>
        <tr>
          <td class="name">Homer</td>
          <td class="email">[email protected]</td>
          <td class="age">35</td>
        </tr>
        <tr>
          <td class="name">Oscar</td>
          <td class="email">[email protected]</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Emily</td>
          <td class="email">[email protected]</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Jara</td>
          <td class="email">[email protected]</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Clark</td>
          <td class="email">[email protected]</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Jennifer</td>
          <td class="email">[email protected]</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Tony</td>
          <td class="email">[email protected]</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Tom</td>
          <td class="email">[email protected]</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Michael</td>
          <td class="email">[email protected]</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Antony</td>
          <td class="email">[email protected]</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Raymond</td>
          <td class="email">[email protected]</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Marie</td>
          <td class="email">[email protected]</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Cohen</td>
          <td class="email">[email protected]</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Rowen</td>
          <td class="email">[email protected]</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--1">
        <span class="d-none d-sm-inline-block" data-list-info="data-list-info"></span>
        <span class="d-none d-sm-inline-block"> &mdash; </span>
        <a class="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	[email protected]	18
Homer	[email protected]	35
Oscar	[email protected]	52
Emily	[email protected]	30
Jara	[email protected]	25
Clark	[email protected]	39
Jennifer	[email protected]	52
Tony	[email protected]	30
Tom	[email protected]	25
Michael	[email protected]	39
Antony	[email protected]	39
Raymond	[email protected]	52
Marie	[email protected]	30
Cohen	[email protected]	25
Rowen	[email protected]	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--1 mb-0">
      <thead class="bg-200 text-900">
        <tr>
          <th class="sort" data-sort="name">Name</th>
          <th class="sort" data-sort="email">Email</th>
          <th class="sort" data-sort="age">Age</th>
        </tr>
      </thead>
      <tbody class="list">
        <tr>
          <td class="name">Anna</td>
          <td class="email">[email protected]</td>
          <td class="age">18</td>
        </tr>
        <tr>
          <td class="name">Homer</td>
          <td class="email">[email protected]</td>
          <td class="age">35</td>
        </tr>
        <tr>
          <td class="name">Oscar</td>
          <td class="email">[email protected]</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Emily</td>
          <td class="email">[email protected]</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Jara</td>
          <td class="email">[email protected]</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Clark</td>
          <td class="email">[email protected]</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Jennifer</td>
          <td class="email">[email protected]</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Tony</td>
          <td class="email">[email protected]</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Tom</td>
          <td class="email">[email protected]</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Michael</td>
          <td class="email">[email protected]</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Antony</td>
          <td class="email">[email protected]</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Raymond</td>
          <td class="email">[email protected]</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Marie</td>
          <td class="email">[email protected]</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Cohen</td>
          <td class="email">[email protected]</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Rowen</td>
          <td class="email">[email protected]</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>

Docs

Integrate List in Falcon by following these easy steps:

Set unique ID and add data-list attribute to the wrapper element and list your column in valueNames property.

<div id="tableExample" data-list='{"valueNames":["name","email","age"]}'>

   <!-- Your list content will go here-->
 </div>

To enable sorting in your column, add data-sort attribute and assign column name to the attribute.
```
<th class="sort" data-sort="name">Customer</th>
```

Add list class to the content wrapper element.

<tbody class="list">

   <!-- Your value will go here-->
 </tbody>

Then wrap your value with column name as a class. For example, if your column name is name then the value will be look like this:
```
<td class="name">John Doe</td>
```
To add pagination add .pagination class inside your wrapper element
To enable button pagination add data-list-pagination='prev' and data-list-pagination='next' to the "Prev" and "Next" buttons respectively.
To see the list info, add data-list-info attribute to a DOM element inside your wrapper element.

Javascript

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

Advance Tables

Table Example

Pagination with numbering

Docs

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

Docs

Javascript

Settings

Color Scheme

RTL Mode

Fluid Layout

Navigation Position

Vertical Navbar Style

Like What You See?