Advance Tables

Phoenix 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

Example

<div class="my-4" 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">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--1">
        <span class="d-none d-sm-inline-block" 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>
Name Email Age
Anna 18
Homer 35
Oscar 52
Emily 30
Jara 25

1 to 5 Items of 15 View allView Less

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--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">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>
Name Email Age
Anna 18
Homer 35
Oscar 52
Emily 30
Jara 25

Docs

<p>Integrate List in phoenix by following these easy steps: </p>
<ul>
  <li>Set unique ID and add <code>data-list </code>attribute to the wrapper element and list your column in <code>valueNames </code>property. <pre class="my-1"><code class="language-html">&lt;div id=&quot;tableExample&quot; data-list='{&quot;valueNames&quot;:[&quot;name&quot;,&quot;email&quot;,&quot;age&quot;]}'&gt;
  &lt;!-- Your list content will go here--&gt;
&lt;/div&gt;</code></pre>
  </li>
  <li>To enable sorting in your column, add <code>data-sort </code>attribute and assign column name to the attribute. <pre class="my-1"><code class="language-html">&lt;th class=&quot;sort&quot; data-sort=&quot;name&quot;&gt;Customer&lt;/th&gt;</code></pre>
  </li>
  <li>Add <code>list </code>class to the content wrapper element.<pre class="my-1"><code class="language-html">&lt;tbody class=&quot;list&quot;&gt;
  &lt;!-- Your value will go here--&gt;
&lt;/tbody&gt;</code></pre>
  </li>
  <li>Then wrap your value with column name as a class. For example, if your column name is <code>name </code>then the value will be look like this:<pre class="my-1"><code class="language-html">&lt;td class=&quot;name&quot;&gt;John Doe&lt;/td&gt;</code></pre>
  </li>
  <li>To add pagination add <code>.pagination </code>class inside your wrapper element</li>
  <li>To enable button pagination add <code>data-list-pagination='prev' </code>and <code>data-list-pagination='next' </code>to the "Prev" and "Next" buttons respectively.</li>
  <li>To see the list info, add <code>data-list-info</code> attribute to a DOM element inside your wrapper element.</li>
</ul>

Integrate List in phoenix by following these easy steps:

  • Set unique ID and add data-listattribute to the wrapper element and list your column in valueNamesproperty.
    <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 add .paginationclass 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.