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
Clark 39
Jennifer 52
Tony 30
Tom 25
Michael 39
Antony 39
Raymond 52
Marie 30
Cohen 25
Rowen 39

— 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
Clark 39
Jennifer 52
Tony 30
Tom 25
Michael 39
Antony 39
Raymond 52
Marie 30
Cohen 25
Rowen 39

    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.
    On this page