Advance Tables

Phoenix uses List.Js for advance table. List.Js is a Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript library that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

Documentation for List.js

Example

<div 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"> &mdash; </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 Email Age ACTION
Anna 18
Homer 35
Oscar 52
Emily 30
Jara 25

1 to 5 Items of 43 View all View Less

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

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">
      <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 Email Age ACTION
Anna 18
Homer 35
Oscar 52
Emily 30
Jara 25
1 to 5 Items of 43

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-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>
Customer Email Payment
Sylvia Plath
Success
Homer
Pending
Edgar Allan Poe
Blocked
William Butler Yeats
Success
Rabindranath Tagore
Pending
1 to 5 Items of 10

Docs

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

Integrate List in Phoenix by following these easy steps:

  • Set unique ID and add data-list attribute to the wrapper element and list your column in valueNames property.
    <div id="tableExample" data-list='{"valueNames":["name","email","age"]}'>
      <!-- Your list content will go here-->
    </div>
  • To enable sorting in your column, add data-sort attribute and assign column name to the attribute.
    <th class="sort" data-sort="name">Customer</th>
  • Add list class to the content wrapper element.
    <tbody class="list">
      <!-- Your value will go here-->
    </tbody>
  • Then wrap your value with column name as a class. For example, if your column name is name then the value will look like this:
    <td class="name">John Doe</td>
  • To add pagination add .pagination class inside your wrapper element
  • To enable button pagination add data-list-pagination='prev' and data-list-pagination='next' to the "Prev" and "Next" buttons respectively.
  • To see the list info, add data-list-info attribute to a DOM element inside your wrapper element.

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>
Order Customer Date Ship To Delivery Type Status Amount
#2181 Carry Anna 10/03/2023 Carry Anna, 2392 Main Avenue, Penasauka, New Jersey 02149

Cash on Delivery

Completed $99
#2182 Milind Mikuja 10/03/2023 Milind Mikuja, 1 Hollywood Blvd,Beverly Hills, California 90210

Cash on Delivery

Processing $120
#2183 Stanly Drinkwater 30/04/2023 Stanly Drinkwater, 1 Infinite Loop, Cupertino, California 90210

Local Delivery

On Hold $70
#2184 Bucky Robert 30/04/2023 Bucky Robert, 1 Infinite Loop, Cupertino, California 90210

Free Shipping

Pending $92
#2185 Josef Stravinsky 30/04/2023 Josef Stravinsky, 1 Infinite Loop, Cupertino, California 90210

Via Free Road

On Hold $120
#2186 Igor Borvibson 30/04/2023 Igor Borvibson, 1 Infinite Loop, Cupertino, California 90210

Free Shipping

Processing $145
#2187 Katerina Karenin 30/04/2023 Katerina Karenin, 1 Infinite Loop, Cupertino, California 90210

Flat Rate

Completed $55
#2188 Roy Anderson 29/04/2023 Roy Anderson, 1 Infinite Loop, Cupertino, California 90210

Local Delivery

On Hold $90
#2189 Thomas Stephenson 29/04/2023 Thomas Stephenson, 116 Ballifeary Road, Bamff

Flat Rate

Processing $52
#2190 Evie Singh 29/04/2023 Evie Singh, 54 Castledore Road, Tunstead

Flat Rate

Completed $90

How to use

If you are using Gulp based workflow, follow these easy steps:

  • Give your table a unique ID.
  • Use the advanceAjaxTableInit() function from src/js/theme/advance-ajax-table.js in 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 from theme.js, copy the code, and update the ID in a new function.

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.19.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize