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.jsExample
<div id="tableExample" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
<div class="table-responsive">
<table class="table table-sm fs--1 mb-0">
<thead>
<tr>
<th class="sort border-top ps-3" data-sort="name">Name</th>
<th class="sort border-top" data-sort="email">Email</th>
<th class="sort border-top" data-sort="age">Age</th>
<th class="sort text-end align-middle pe-0 border-top" scope="col">ACTION</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="align-middle ps-3 name">Anna</td>
<td class="align-middle email">anna@example.com</td>
<td class="align-middle age">18</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Homer</td>
<td class="align-middle email">homer@example.com</td>
<td class="align-middle age">35</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Oscar</td>
<td class="align-middle email">oscar@example.com</td>
<td class="align-middle age">52</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Emily</td>
<td class="align-middle email">emily@example.com</td>
<td class="align-middle age">30</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Jara</td>
<td class="align-middle email">jara@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Clark</td>
<td class="align-middle email">clark@example.com</td>
<td class="align-middle age">39</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Jennifer</td>
<td class="align-middle email">jennifer@example.com</td>
<td class="align-middle age">52</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Tony</td>
<td class="align-middle email">tony@example.com</td>
<td class="align-middle age">30</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Tom</td>
<td class="align-middle email">tom@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Michael</td>
<td class="align-middle email">michael@example.com</td>
<td class="align-middle age">39</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Antony</td>
<td class="align-middle email">antony@example.com</td>
<td class="align-middle age">39</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Raymond</td>
<td class="align-middle email">raymond@example.com</td>
<td class="align-middle age">52</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Marie</td>
<td class="align-middle email">marie@example.com</td>
<td class="align-middle age">30</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Cohen</td>
<td class="align-middle email">cohen@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Rowen</td>
<td class="align-middle email">rowen@example.com</td>
<td class="align-middle age">39</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex flex-between-center pt-3">
<div class="pagination d-none"></div>
<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"> — </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 class="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 | Age | ACTION | |
|---|---|---|---|
| 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 |
|
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">
<table class="table table-striped table-sm fs--1 mb-0">
<thead>
<tr>
<th class="sort border-top ps-3" data-sort="name">Name</th>
<th class="sort border-top" data-sort="email">Email</th>
<th class="sort border-top" data-sort="age">Age</th>
<th class="sort text-end align-middle pe-0 border-top" scope="col">ACTION</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="align-middle ps-3 name">Anna</td>
<td class="align-middle email">anna@example.com</td>
<td class="align-middle age">18</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Homer</td>
<td class="align-middle email">homer@example.com</td>
<td class="align-middle age">35</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Oscar</td>
<td class="align-middle email">oscar@example.com</td>
<td class="align-middle age">52</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Emily</td>
<td class="align-middle email">emily@example.com</td>
<td class="align-middle age">30</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Jara</td>
<td class="align-middle email">jara@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Clark</td>
<td class="align-middle email">clark@example.com</td>
<td class="align-middle age">39</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Jennifer</td>
<td class="align-middle email">jennifer@example.com</td>
<td class="align-middle age">52</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Tony</td>
<td class="align-middle email">tony@example.com</td>
<td class="align-middle age">30</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Tom</td>
<td class="align-middle email">tom@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Michael</td>
<td class="align-middle email">michael@example.com</td>
<td class="align-middle age">39</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Antony</td>
<td class="align-middle email">antony@example.com</td>
<td class="align-middle age">39</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Raymond</td>
<td class="align-middle email">raymond@example.com</td>
<td class="align-middle age">52</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Marie</td>
<td class="align-middle email">marie@example.com</td>
<td class="align-middle age">30</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Cohen</td>
<td class="align-middle email">cohen@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Rowen</td>
<td class="align-middle email">rowen@example.com</td>
<td class="align-middle age">39</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-center mt-3"><button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
<ul class="mb-0 pagination"></ul><button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
</div>
</div>| Name | Age | ACTION | |
|---|---|---|---|
| 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 |
|
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"><div id="tableExample" data-list='{"valueNames":["name","email","age"]}'>
<!-- Your list content will go here-->
</div></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"><th class="sort" data-sort="name">Customer</th></code></pre>
</li>
<li>Add <code>list </code>class to the content wrapper element.<pre class="my-1"><code class="language-html"><tbody class="list">
<!-- Your value will go here-->
</tbody></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"><td class="name">John Doe</td></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 invalueNamesproperty.<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'anddata-list-pagination='next'to the "Prev" and "Next" buttons respectively. - To see the list info, add
data-list-infoattribute to a DOM element inside your wrapper element.