## 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 | anna@example.com | 18 |
Homer | homer@example.com | 35 |
Oscar | oscar@example.com | 52 |
Emily | emily@example.com | 30 |
Jara | jara@example.com | 25 |
Clark | clark@example.com | 39 |
Jennifer | jennifer@example.com | 52 |
Tony | tony@example.com | 30 |
Tom | tom@example.com | 25 |
Michael | michael@example.com | 39 |
Antony | antony@example.com | 39 |
Raymond | raymond@example.com | 52 |
Marie | marie@example.com | 30 |
Cohen | cohen@example.com | 25 |
Rowen | rowen@example.com | 39 |
John | john@example.com | 25 |
Emily | emily@example.com | 31 |
Alice | alice@example.com | 42 |
David | david@example.com | 29 |
Sullivan Benton | sullivan@example.com | 23 |
Uriah Nunez | uriah@example.com | 32 |
Terry Lynch | terry@example.com | 45 |
Lailah Green | lailah@example.com | 25 |
Phillip Mack | phillip@example.com | 21 |
Whitney Sawyer | whitney@example.com | 12 |
Jaliyah Ritter | jaliyah@example.com | 12 |
Clayton Arnold | clayton@example.com | 52 |
Jett Donovan | jett@example.com | 31 |
Javion Christensen | javion@example.com | 25 |
Brittany Griffin | brittany@example.com | 41 |
Dustin Middleton | dustin@example.com | 45 |
Janessa Mann | janessa@example.com | 65 |
Evangeline Santos | evangeline@example.com | 32 |
Parker Todd | parker@example.com | 41 |
Jaxson Gill | jaxson@example.com | 33 |
Lucille | lucille@example.com | 34 |
Terrell | terrell@example.com | 35 |
Shayna | shayna@example.com | 36 |
Alvaro | alvaro@example.com | 37 |
Clay | clay@example.com | 37 |
Oscar | oscar@example.com | 37 |
Tabitha | tabitha@example.com | 37 |
Jordon | jordon@example.com | 37 |

— 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 | anna@example.com | 18 |
Homer | homer@example.com | 35 |
Oscar | oscar@example.com | 52 |
Emily | emily@example.com | 30 |
Jara | jara@example.com | 25 |
Clark | clark@example.com | 39 |
Jennifer | jennifer@example.com | 52 |
Tony | tony@example.com | 30 |
Tom | tom@example.com | 25 |
Michael | michael@example.com | 39 |
Antony | antony@example.com | 39 |
Raymond | raymond@example.com | 52 |
Marie | marie@example.com | 30 |
Cohen | cohen@example.com | 25 |
Rowen | rowen@example.com | 39 |
John | john@example.com | 25 |
Emily | emily@example.com | 31 |
Alice | alice@example.com | 42 |
David | david@example.com | 29 |
Sullivan Benton | sullivan@example.com | 23 |
Uriah Nunez | uriah@example.com | 32 |
Terry Lynch | terry@example.com | 45 |
Lailah Green | lailah@example.com | 25 |
Phillip Mack | phillip@example.com | 21 |
Whitney Sawyer | whitney@example.com | 12 |
Jaliyah Ritter | jaliyah@example.com | 12 |
Clayton Arnold | clayton@example.com | 52 |
Jett Donovan | jett@example.com | 31 |
Javion Christensen | javion@example.com | 25 |
Brittany Griffin | brittany@example.com | 41 |
Dustin Middleton | dustin@example.com | 45 |
Janessa Mann | janessa@example.com | 65 |
Evangeline Santos | evangeline@example.com | 32 |
Parker Todd | parker@example.com | 41 |
Jaxson Gill | jaxson@example.com | 33 |
Lucille | lucille@example.com | 34 |
Terrell | terrell@example.com | 35 |
Shayna | shayna@example.com | 36 |
Alvaro | alvaro@example.com | 37 |
Clay | clay@example.com | 37 |
Oscar | oscar@example.com | 37 |
Tabitha | tabitha@example.com | 37 |
Jordon | jordon@example.com | 37 |

#### Search Example

Add `search` class for enable data searching. The following structure will enable search feature.

    <div id="tableExample3" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
      <div class="search-box mb-3 mx-auto">
        <form class="position-relative"><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 | anna@example.com | 18 |
Homer | homer@example.com | 35 |
Oscar | oscar@example.com | 52 |
Emily | emily@example.com | 30 |
Jara | jara@example.com | 25 |
Clark | clark@example.com | 39 |
Jennifer | jennifer@example.com | 52 |
Tony | tony@example.com | 30 |
Tom | tom@example.com | 25 |
Michael | michael@example.com | 39 |
Antony | antony@example.com | 39 |
Raymond | raymond@example.com | 52 |
Marie | marie@example.com | 30 |
Cohen | cohen@example.com | 25 |
Rowen | rowen@example.com | 39 |
John | john@example.com | 25 |
Emily | emily@example.com | 31 |
Alice | alice@example.com | 42 |
David | david@example.com | 29 |
Sullivan Benton | sullivan@example.com | 23 |
Uriah Nunez | uriah@example.com | 32 |
Terry Lynch | terry@example.com | 45 |
Lailah Green | lailah@example.com | 25 |
Phillip Mack | phillip@example.com | 21 |
Whitney Sawyer | whitney@example.com | 12 |
Jaliyah Ritter | jaliyah@example.com | 12 |
Clayton Arnold | clayton@example.com | 52 |
Jett Donovan | jett@example.com | 31 |
Javion Christensen | javion@example.com | 25 |
Brittany Griffin | brittany@example.com | 41 |
Dustin Middleton | dustin@example.com | 45 |
Janessa Mann | janessa@example.com | 65 |
Evangeline Santos | evangeline@example.com | 32 |
Parker Todd | parker@example.com | 41 |
Jaxson Gill | jaxson@example.com | 33 |
Lucille | lucille@example.com | 34 |
Terrell | terrell@example.com | 35 |
Shayna | shayna@example.com | 36 |
Alvaro | alvaro@example.com | 37 |
Clay | clay@example.com | 37 |
Oscar | oscar@example.com | 37 |
Tabitha | tabitha@example.com | 37 |
Jordon | jordon@example.com | 37 |

#### Filter Example

    <div id="tableExample4" data-list='{"valueNames":["name","email","payment"],"page":5,"pagination":true,"filter":{"key":"payment"}}'>
      <div class="row justify-content-end g-0">
        <div class="col-auto px-3"><select class="form-select form-select-sm mb-3" data-list-filter="data-list-filter">
            <option selected="" value="">Select payment status</option>
            <option value="Pending">Pending</option>
            <option value="Success">Success</option>
            <option value="Blocked">Blocked</option>
          </select></div>
      </div>
      <div class="table-responsive">
        <table class="table table-sm fs-9 mb-0">
          <thead>
            <tr class="bg-body-highlight">
              <th class="sort border-top border-translucent ps-3" data-sort="name">Customer</th>
              <th class="sort border-top border-translucent" data-sort="email">Email</th>
              <th class="sort border-top border-translucent text-end pe-3" data-sort="payment">Payment</th>
            </tr>
          </thead>
          <tbody class="list">
            <tr>
              <td class="align-middle ps-3 name">Sylvia Plath</td>
              <td class="align-middle email">john@gmail.com</td>
              <td class="align-middle payment text-end py-3 pe-3">
                <div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold">Success</span><span class="ms-1 fas fa-check"></span></div>
              </td>
            </tr>
            <tr>
              <td class="align-middle ps-3 name">Homer</td>
              <td class="align-middle email">sylvia@mail.ru</td>
              <td class="align-middle payment text-end py-3 pe-3">
                <div class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="fw-bold">Pending</span><span class="ms-1 fas fa-stream"></span></div>
              </td>
            </tr>
            <tr>
              <td class="align-middle ps-3 name">Edgar Allan Poe</td>
              <td class="align-middle email">edgar@yahoo.com</td>
              <td class="align-middle payment text-end py-3 pe-3">
                <div class="badge badge-phoenix fs-10 badge-phoenix-secondary"><span class="fw-bold">Blocked</span><span class="ms-1 fas fa-ban"></span></div>
              </td>
            </tr>
            <tr>
              <td class="align-middle ps-3 name">William Butler Yeats</td>
              <td class="align-middle email">william@gmail.com</td>
              <td class="align-middle payment text-end py-3 pe-3">
                <div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold">Success</span><span class="ms-1 fas fa-check"></span></div>
              </td>
            </tr>
            <tr>
              <td class="align-middle ps-3 name">Rabindranath Tagore</td>
              <td class="align-middle email">tagore@twitter.com</td>
              <td class="align-middle payment text-end py-3 pe-3">
                <div class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="fw-bold">Pending</span><span class="ms-1 fas fa-stream"></span></div>
              </td>
            </tr>
            <tr>
              <td class="align-middle ps-3 name">Emily Dickinson</td>
              <td class="align-middle email">emily@gmail.com</td>
              <td class="align-middle payment text-end py-3 pe-3">
                <div class="badge badge-phoenix fs-10 badge-phoenix-secondary"><span class="fw-bold">Blocked</span><span class="ms-1 fas fa-ban"></span></div>
              </td>
            </tr>
            <tr>
              <td class="align-middle ps-3 name">Giovanni Boccaccio</td>
              <td class="align-middle email">giovanni@outlook.com</td>
              <td class="align-middle payment text-end py-3 pe-3">
                <div class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="fw-bold">Pending</span><span class="ms-1 fas fa-stream"></span></div>
              </td>
            </tr>
            <tr>
              <td class="align-middle ps-3 name">Oscar Wilde</td>
              <td class="align-middle email">oscar@hotmail.com</td>
              <td class="align-middle payment text-end py-3 pe-3">
                <div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold">Success</span><span class="ms-1 fas fa-check"></span></div>
              </td>
            </tr>
            <tr>
              <td class="align-middle ps-3 name">John Doe</td>
              <td class="align-middle email">doe@gmail.com</td>
              <td class="align-middle payment text-end py-3 pe-3">
                <div class="badge badge-phoenix fs-10 badge-phoenix-success"><span class="fw-bold">Success</span><span class="ms-1 fas fa-check"></span></div>
              </td>
            </tr>
            <tr>
              <td class="align-middle ps-3 name">Emma Watson</td>
              <td class="align-middle email">emma@gmail.com</td>
              <td class="align-middle payment text-end py-3 pe-3">
                <div class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="fw-bold">Pending</span><span class="ms-1 fas fa-stream"></span></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="d-flex justify-content-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 | john@gmail.com | Success
Homer | sylvia@mail.ru | Pending
Edgar Allan Poe | edgar@yahoo.com | Blocked
William Butler Yeats | william@gmail.com | Success
Rabindranath Tagore | tagore@twitter.com | Pending
Emily Dickinson | emily@gmail.com | Blocked
Giovanni Boccaccio | giovanni@outlook.com | Pending
Oscar Wilde | oscar@hotmail.com | Success
John Doe | doe@gmail.com | Success
Emma Watson | emma@gmail.com | Pending

#### Docs

    <p>Integrate List in Phoenix by following these easy steps: </p>
    <ul>
      <li>Set unique ID and add <code>data-list </code>attribute to the wrapper element and list your column in <code>valueNames </code>property. <pre class="my-1"><code class="language-html">&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 and invoke the function in your script file.</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>public/assets/js/pages/advance-ajax-table.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 |
--- | --- | --- | --- | --- | --- | --- | ---

#### 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 and invoke the function in your script file.

If you are not using Gulp based workflow:

- Give your table a unique ID.
- Find the `advanceAjaxTableInit()` function from `public/assets/js/pages/advance-ajax-table.js,` copy the code, and update the ID in a new function.

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize