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-9 mb-0">
<thead>
<tr>
<th class="sort border-top border-translucent ps-3" data-sort="name">Name</th>
<th class="sort border-top border-translucent" data-sort="email">Email</th>
<th class="sort border-top border-translucent" data-sort="age">Age</th>
<th class="sort text-end align-middle pe-0 border-top border-translucent" 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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">John</td>
<td class="align-middle email">john@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">31</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Alice</td>
<td class="align-middle email">alice@example.com</td>
<td class="align-middle age">42</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">David</td>
<td class="align-middle email">david@example.com</td>
<td class="align-middle age">29</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Sullivan Benton</td>
<td class="align-middle email">sullivan@example.com</td>
<td class="align-middle age">23</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Uriah Nunez</td>
<td class="align-middle email">uriah@example.com</td>
<td class="align-middle age">32</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Terry Lynch</td>
<td class="align-middle email">terry@example.com</td>
<td class="align-middle age">45</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Lailah Green</td>
<td class="align-middle email">lailah@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Phillip Mack</td>
<td class="align-middle email">phillip@example.com</td>
<td class="align-middle age">21</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Whitney Sawyer</td>
<td class="align-middle email">whitney@example.com</td>
<td class="align-middle age">12</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jaliyah Ritter</td>
<td class="align-middle email">jaliyah@example.com</td>
<td class="align-middle age">12</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Clayton Arnold</td>
<td class="align-middle email">clayton@example.com</td>
<td class="align-middle age">52</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jett Donovan</td>
<td class="align-middle email">jett@example.com</td>
<td class="align-middle age">31</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Javion Christensen</td>
<td class="align-middle email">javion@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Brittany Griffin</td>
<td class="align-middle email">brittany@example.com</td>
<td class="align-middle age">41</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Dustin Middleton</td>
<td class="align-middle email">dustin@example.com</td>
<td class="align-middle age">45</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Janessa Mann</td>
<td class="align-middle email">janessa@example.com</td>
<td class="align-middle age">65</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Evangeline Santos</td>
<td class="align-middle email">evangeline@example.com</td>
<td class="align-middle age">32</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Parker Todd</td>
<td class="align-middle email">parker@example.com</td>
<td class="align-middle age">41</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jaxson Gill</td>
<td class="align-middle email">jaxson@example.com</td>
<td class="align-middle age">33</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Lucille</td>
<td class="align-middle email">lucille@example.com</td>
<td class="align-middle age">34</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Terrell</td>
<td class="align-middle email">terrell@example.com</td>
<td class="align-middle age">35</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Shayna</td>
<td class="align-middle email">shayna@example.com</td>
<td class="align-middle age">36</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Alvaro</td>
<td class="align-middle email">alvaro@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Clay</td>
<td class="align-middle email">clay@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Tabitha</td>
<td class="align-middle email">tabitha@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jordon</td>
<td class="align-middle email">jordon@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-9">
<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-semibold" href="#!" data-list-view="*">
View all
<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span>
</a><a class="fw-semibold 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 |
|
| John | john@example.com | 25 |
|
| Emily | emily@example.com | 31 |
|
| Alice | alice@example.com | 42 |
|
| David | david@example.com | 29 |
|
| Sullivan Benton | sullivan@example.com | 23 |
|
| Uriah Nunez | uriah@example.com | 32 |
|
| Terry Lynch | terry@example.com | 45 |
|
| Lailah Green | lailah@example.com | 25 |
|
| Phillip Mack | phillip@example.com | 21 |
|
| Whitney Sawyer | whitney@example.com | 12 |
|
| Jaliyah Ritter | jaliyah@example.com | 12 |
|
| Clayton Arnold | clayton@example.com | 52 |
|
| Jett Donovan | jett@example.com | 31 |
|
| Javion Christensen | javion@example.com | 25 |
|
| Brittany Griffin | brittany@example.com | 41 |
|
| Dustin Middleton | dustin@example.com | 45 |
|
| Janessa Mann | janessa@example.com | 65 |
|
| Evangeline Santos | evangeline@example.com | 32 |
|
| Parker Todd | parker@example.com | 41 |
|
| Jaxson Gill | jaxson@example.com | 33 |
|
| Lucille | lucille@example.com | 34 |
|
| Terrell | terrell@example.com | 35 |
|
| Shayna | shayna@example.com | 36 |
|
| Alvaro | alvaro@example.com | 37 |
|
| Clay | clay@example.com | 37 |
|
| Oscar | oscar@example.com | 37 |
|
| Tabitha | tabitha@example.com | 37 |
|
| Jordon | jordon@example.com | 37 |
|
Pagination with numbering
Add pagination class for enabling 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":{"innerWindow":2,"left":1,"right":1}}'>
<div class="table-responsive">
<table class="table table-striped table-sm fs-9 mb-0">
<thead>
<tr>
<th class="sort border-top border-translucent 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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">John</td>
<td class="align-middle email">john@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">31</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Alice</td>
<td class="align-middle email">alice@example.com</td>
<td class="align-middle age">42</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">David</td>
<td class="align-middle email">david@example.com</td>
<td class="align-middle age">29</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Sullivan Benton</td>
<td class="align-middle email">sullivan@example.com</td>
<td class="align-middle age">23</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Uriah Nunez</td>
<td class="align-middle email">uriah@example.com</td>
<td class="align-middle age">32</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Terry Lynch</td>
<td class="align-middle email">terry@example.com</td>
<td class="align-middle age">45</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Lailah Green</td>
<td class="align-middle email">lailah@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Phillip Mack</td>
<td class="align-middle email">phillip@example.com</td>
<td class="align-middle age">21</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Whitney Sawyer</td>
<td class="align-middle email">whitney@example.com</td>
<td class="align-middle age">12</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jaliyah Ritter</td>
<td class="align-middle email">jaliyah@example.com</td>
<td class="align-middle age">12</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Clayton Arnold</td>
<td class="align-middle email">clayton@example.com</td>
<td class="align-middle age">52</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jett Donovan</td>
<td class="align-middle email">jett@example.com</td>
<td class="align-middle age">31</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Javion Christensen</td>
<td class="align-middle email">javion@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Brittany Griffin</td>
<td class="align-middle email">brittany@example.com</td>
<td class="align-middle age">41</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Dustin Middleton</td>
<td class="align-middle email">dustin@example.com</td>
<td class="align-middle age">45</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Janessa Mann</td>
<td class="align-middle email">janessa@example.com</td>
<td class="align-middle age">65</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Evangeline Santos</td>
<td class="align-middle email">evangeline@example.com</td>
<td class="align-middle age">32</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Parker Todd</td>
<td class="align-middle email">parker@example.com</td>
<td class="align-middle age">41</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jaxson Gill</td>
<td class="align-middle email">jaxson@example.com</td>
<td class="align-middle age">33</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Lucille</td>
<td class="align-middle email">lucille@example.com</td>
<td class="align-middle age">34</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Terrell</td>
<td class="align-middle email">terrell@example.com</td>
<td class="align-middle age">35</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Shayna</td>
<td class="align-middle email">shayna@example.com</td>
<td class="align-middle age">36</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Alvaro</td>
<td class="align-middle email">alvaro@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Clay</td>
<td class="align-middle email">clay@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Tabitha</td>
<td class="align-middle email">tabitha@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jordon</td>
<td class="align-middle email">jordon@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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 |
|
| John | john@example.com | 25 |
|
| Emily | emily@example.com | 31 |
|
| Alice | alice@example.com | 42 |
|
| David | david@example.com | 29 |
|
| Sullivan Benton | sullivan@example.com | 23 |
|
| Uriah Nunez | uriah@example.com | 32 |
|
| Terry Lynch | terry@example.com | 45 |
|
| Lailah Green | lailah@example.com | 25 |
|
| Phillip Mack | phillip@example.com | 21 |
|
| Whitney Sawyer | whitney@example.com | 12 |
|
| Jaliyah Ritter | jaliyah@example.com | 12 |
|
| Clayton Arnold | clayton@example.com | 52 |
|
| Jett Donovan | jett@example.com | 31 |
|
| Javion Christensen | javion@example.com | 25 |
|
| Brittany Griffin | brittany@example.com | 41 |
|
| Dustin Middleton | dustin@example.com | 45 |
|
| Janessa Mann | janessa@example.com | 65 |
|
| Evangeline Santos | evangeline@example.com | 32 |
|
| Parker Todd | parker@example.com | 41 |
|
| Jaxson Gill | jaxson@example.com | 33 |
|
| Lucille | lucille@example.com | 34 |
|
| Terrell | terrell@example.com | 35 |
|
| Shayna | shayna@example.com | 36 |
|
| Alvaro | alvaro@example.com | 37 |
|
| Clay | clay@example.com | 37 |
|
| Oscar | oscar@example.com | 37 |
|
| Tabitha | tabitha@example.com | 37 |
|
| Jordon | jordon@example.com | 37 |
|
Search Example
Add search class for enable data searching. The following structure will enable search feature.
<div id="tableExample3" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
<div class="search-box mb-3 mx-auto">
<form class="position-relative" data-bs-toggle="search" data-bs-display="static"><input class="form-control search-input search form-control-sm" type="search" placeholder="Search" aria-label="Search" />
<span class="fas fa-search search-box-icon"></span>
</form>
</div>
<div class="table-responsive">
<table class="table table-striped table-sm fs-9 mb-0">
<thead>
<tr>
<th class="sort border-top border-translucent 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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">John</td>
<td class="align-middle email">john@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">31</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Alice</td>
<td class="align-middle email">alice@example.com</td>
<td class="align-middle age">42</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">David</td>
<td class="align-middle email">david@example.com</td>
<td class="align-middle age">29</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Sullivan Benton</td>
<td class="align-middle email">sullivan@example.com</td>
<td class="align-middle age">23</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Uriah Nunez</td>
<td class="align-middle email">uriah@example.com</td>
<td class="align-middle age">32</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Terry Lynch</td>
<td class="align-middle email">terry@example.com</td>
<td class="align-middle age">45</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Lailah Green</td>
<td class="align-middle email">lailah@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Phillip Mack</td>
<td class="align-middle email">phillip@example.com</td>
<td class="align-middle age">21</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Whitney Sawyer</td>
<td class="align-middle email">whitney@example.com</td>
<td class="align-middle age">12</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jaliyah Ritter</td>
<td class="align-middle email">jaliyah@example.com</td>
<td class="align-middle age">12</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Clayton Arnold</td>
<td class="align-middle email">clayton@example.com</td>
<td class="align-middle age">52</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jett Donovan</td>
<td class="align-middle email">jett@example.com</td>
<td class="align-middle age">31</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Javion Christensen</td>
<td class="align-middle email">javion@example.com</td>
<td class="align-middle age">25</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Brittany Griffin</td>
<td class="align-middle email">brittany@example.com</td>
<td class="align-middle age">41</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Dustin Middleton</td>
<td class="align-middle email">dustin@example.com</td>
<td class="align-middle age">45</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Janessa Mann</td>
<td class="align-middle email">janessa@example.com</td>
<td class="align-middle age">65</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Evangeline Santos</td>
<td class="align-middle email">evangeline@example.com</td>
<td class="align-middle age">32</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Parker Todd</td>
<td class="align-middle email">parker@example.com</td>
<td class="align-middle age">41</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jaxson Gill</td>
<td class="align-middle email">jaxson@example.com</td>
<td class="align-middle age">33</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Lucille</td>
<td class="align-middle email">lucille@example.com</td>
<td class="align-middle age">34</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Terrell</td>
<td class="align-middle email">terrell@example.com</td>
<td class="align-middle age">35</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Shayna</td>
<td class="align-middle email">shayna@example.com</td>
<td class="align-middle age">36</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Alvaro</td>
<td class="align-middle email">alvaro@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Clay</td>
<td class="align-middle email">clay@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Tabitha</td>
<td class="align-middle email">tabitha@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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">Jordon</td>
<td class="align-middle email">jordon@example.com</td>
<td class="align-middle age">37</td>
<td class="align-middle white-space-nowrap text-end pe-0">
<div class="btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" 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-10"></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-between mt-3"><span class="d-none d-sm-inline-block" data-list-info="data-list-info"></span>
<div class="d-flex"><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>
</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 |
|
| John | john@example.com | 25 |
|
| Emily | emily@example.com | 31 |
|
| Alice | alice@example.com | 42 |
|
| David | david@example.com | 29 |
|
| Sullivan Benton | sullivan@example.com | 23 |
|
| Uriah Nunez | uriah@example.com | 32 |
|
| Terry Lynch | terry@example.com | 45 |
|
| Lailah Green | lailah@example.com | 25 |
|
| Phillip Mack | phillip@example.com | 21 |
|
| Whitney Sawyer | whitney@example.com | 12 |
|
| Jaliyah Ritter | jaliyah@example.com | 12 |
|
| Clayton Arnold | clayton@example.com | 52 |
|
| Jett Donovan | jett@example.com | 31 |
|
| Javion Christensen | javion@example.com | 25 |
|
| Brittany Griffin | brittany@example.com | 41 |
|
| Dustin Middleton | dustin@example.com | 45 |
|
| Janessa Mann | janessa@example.com | 65 |
|
| Evangeline Santos | evangeline@example.com | 32 |
|
| Parker Todd | parker@example.com | 41 |
|
| Jaxson Gill | jaxson@example.com | 33 |
|
| Lucille | lucille@example.com | 34 |
|
| Terrell | terrell@example.com | 35 |
|
| Shayna | shayna@example.com | 36 |
|
| Alvaro | alvaro@example.com | 37 |
|
| Clay | clay@example.com | 37 |
|
| Oscar | oscar@example.com | 37 |
|
| Tabitha | tabitha@example.com | 37 |
|
| Jordon | jordon@example.com | 37 |
|
Filter Example
<div id="tableExample4" data-list='{"valueNames":["name","email","payment"],"page":5,"pagination":true,"filter":{"key":"payment"}}'>
<div class="row justify-content-end g-0">
<div class="col-auto px-3"><select class="form-select form-select-sm mb-3" data-list-filter="data-list-filter">
<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">
<table class="table table-sm fs-9 mb-0">
<thead>
<tr class="bg-body-highlight">
<th class="sort border-top border-translucent ps-3" data-sort="name">Customer</th>
<th class="sort border-top border-translucent" data-sort="email">Email</th>
<th class="sort border-top border-translucent text-end pe-3" data-sort="payment">Payment</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="align-middle ps-3 name">Sylvia Plath</td>
<td class="align-middle email">john@gmail.com</td>
<td class="align-middle payment text-end py-3 pe-3">
<div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold">Success</span><span class="ms-1 fas fa-check"></span></div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Homer</td>
<td class="align-middle email">sylvia@mail.ru</td>
<td class="align-middle payment text-end py-3 pe-3">
<div class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="fw-bold">Pending</span><span class="ms-1 fas fa-stream"></span></div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Edgar Allan Poe</td>
<td class="align-middle email">edgar@yahoo.com</td>
<td class="align-middle payment text-end py-3 pe-3">
<div class="badge badge-phoenix fs-10 badge-phoenix-secondary"><span class="fw-bold">Blocked</span><span class="ms-1 fas fa-ban"></span></div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">William Butler Yeats</td>
<td class="align-middle email">william@gmail.com</td>
<td class="align-middle payment text-end py-3 pe-3">
<div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold">Success</span><span class="ms-1 fas fa-check"></span></div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Rabindranath Tagore</td>
<td class="align-middle email">tagore@twitter.com</td>
<td class="align-middle payment text-end py-3 pe-3">
<div class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="fw-bold">Pending</span><span class="ms-1 fas fa-stream"></span></div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Emily Dickinson</td>
<td class="align-middle email">emily@gmail.com</td>
<td class="align-middle payment text-end py-3 pe-3">
<div class="badge badge-phoenix fs-10 badge-phoenix-secondary"><span class="fw-bold">Blocked</span><span class="ms-1 fas fa-ban"></span></div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Giovanni Boccaccio</td>
<td class="align-middle email">giovanni@outlook.com</td>
<td class="align-middle payment text-end py-3 pe-3">
<div class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="fw-bold">Pending</span><span class="ms-1 fas fa-stream"></span></div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Oscar Wilde</td>
<td class="align-middle email">oscar@hotmail.com</td>
<td class="align-middle payment text-end py-3 pe-3">
<div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold">Success</span><span class="ms-1 fas fa-check"></span></div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">John Doe</td>
<td class="align-middle email">doe@gmail.com</td>
<td class="align-middle payment text-end py-3 pe-3">
<div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold">Success</span><span class="ms-1 fas fa-check"></span></div>
</td>
</tr>
<tr>
<td class="align-middle ps-3 name">Emma Watson</td>
<td class="align-middle email">emma@gmail.com</td>
<td class="align-middle payment text-end py-3 pe-3">
<div class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="fw-bold">Pending</span><span class="ms-1 fas fa-stream"></span></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>| Customer | Payment | |
|---|---|---|
| Sylvia Plath | john@gmail.com |
Success
|
| Homer | sylvia@mail.ru |
Pending
|
| Edgar Allan Poe | edgar@yahoo.com |
Blocked
|
| William Butler Yeats | william@gmail.com |
Success
|
| Rabindranath Tagore | tagore@twitter.com |
Pending
|
| Emily Dickinson | emily@gmail.com |
Blocked
|
| Giovanni Boccaccio | giovanni@outlook.com |
Pending
|
| Oscar Wilde | oscar@hotmail.com |
Success
|
| John Doe | doe@gmail.com |
Success
|
| Emma Watson | emma@gmail.com |
Pending
|
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 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 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.
Ajax Table
<div class="table-list" id="advanceAjaxTable">
<div class="table-responsive scrollbar mb-3">
<table class="table table-sm fs-9 mb-0 overflow-hidden">
<thead class="text-body">
<tr>
<th class="sort ps-3 pe-1 align-middle white-space-nowrap" data-sort="orderId" style="min-width: 4.5rem;">Order</th>
<th class="sort pe-1 align-middle white-space-nowrap" data-sort="customer" style="min-width: 8.5rem">Customer</th>
<th class="sort pe-1 align-middle white-space-nowrap pe-7" data-sort="date">Date</th>
<th class="sort pe-1 align-middle white-space-nowrap" data-sort="address" style="min-width: 12.5rem;">Ship To</th>
<th class="sort pe-1 align-middle white-space-nowrap" data-sort="deliveryType" style="min-width: 7rem">Delivery Type</th>
<th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="status">Status</th>
<th class="sort pe-1 align-middle white-space-nowrap text-end" data-sort="amount">Amount</th>
<th class="no-sort"></th>
</tr>
</thead>
<tbody class="list"></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>
<div class="p-3">
<h4 class="mb-3">How to use</h4>
<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/phoenix.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>How to use
If you are using Gulp based workflow, follow these easy steps:
- Give your table a unique ID.
- Use the
advanceAjaxTableInit()function fromsrc/js/theme/advance-ajax-table.jsin a new JS file and update the ID. - Import the file on
src/js/phoenix.js
If you are not using Gulp based workflow:
- Give your table a unique ID.
- Find the
advanceAjaxTableInit()function fromtheme.js,copy the code, and update the ID in a new function.
