Phoenix

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--1 mb-0">
      <thead>
        <tr>
          <th class="sort border-top ps-3" data-sort="name">Name</th>
          <th class="sort border-top" data-sort="email">Email</th>
          <th class="sort border-top" data-sort="age">Age</th>
          <th class="sort text-end align-middle pe-0 border-top" scope="col">ACTION</th>
        </tr>
      </thead>
      <tbody class="list">
        <tr>
          <td class="align-middle ps-3 name">Anna</td>
          <td class="align-middle email">anna@example.com</td>
          <td class="align-middle age">18</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Homer</td>
          <td class="align-middle email">homer@example.com</td>
          <td class="align-middle age">35</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Oscar</td>
          <td class="align-middle email">oscar@example.com</td>
          <td class="align-middle age">52</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Emily</td>
          <td class="align-middle email">emily@example.com</td>
          <td class="align-middle age">30</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Jara</td>
          <td class="align-middle email">jara@example.com</td>
          <td class="align-middle age">25</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Clark</td>
          <td class="align-middle email">clark@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Jennifer</td>
          <td class="align-middle email">jennifer@example.com</td>
          <td class="align-middle age">52</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Tony</td>
          <td class="align-middle email">tony@example.com</td>
          <td class="align-middle age">30</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Tom</td>
          <td class="align-middle email">tom@example.com</td>
          <td class="align-middle age">25</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Michael</td>
          <td class="align-middle email">michael@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Antony</td>
          <td class="align-middle email">antony@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Raymond</td>
          <td class="align-middle email">raymond@example.com</td>
          <td class="align-middle age">52</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Marie</td>
          <td class="align-middle email">marie@example.com</td>
          <td class="align-middle age">30</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Cohen</td>
          <td class="align-middle email">cohen@example.com</td>
          <td class="align-middle age">25</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Rowen</td>
          <td class="align-middle email">rowen@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="d-flex flex-between-center pt-3">
    <div class="pagination d-none"></div>
    <p class="mb-0 fs--1">
      <span class="d-none d-sm-inline-block" data-list-info="data-list-info"></span>
      <span class="d-none d-sm-inline-block"> &mdash; </span>
      <a class="fw-semi-bold" href="#!" data-list-view="*">
        View all
        <span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span>
      </a><a class="fw-semi-bold d-none" href="#!" data-list-view="less">
        View Less
        <span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span>
      </a>
    </p>
    <div 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	View Export Remove
Homer	homer@example.com	35	View Export Remove
Oscar	oscar@example.com	52	View Export Remove
Emily	emily@example.com	30	View Export Remove
Jara	jara@example.com	25	View Export Remove
Clark	clark@example.com	39	View Export Remove
Jennifer	jennifer@example.com	52	View Export Remove
Tony	tony@example.com	30	View Export Remove
Tom	tom@example.com	25	View Export Remove
Michael	michael@example.com	39	View Export Remove
Antony	antony@example.com	39	View Export Remove
Raymond	raymond@example.com	52	View Export Remove
Marie	marie@example.com	30	View Export Remove
Cohen	cohen@example.com	25	View Export Remove
Rowen	rowen@example.com	39	View Export Remove

— 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":true}'>
  <div class="table-responsive">
    <table class="table table-striped table-sm fs--1 mb-0">
      <thead>
        <tr>
          <th class="sort border-top ps-3" data-sort="name">Name</th>
          <th class="sort border-top" data-sort="email">Email</th>
          <th class="sort border-top" data-sort="age">Age</th>
          <th class="sort text-end align-middle pe-0 border-top" scope="col">ACTION</th>
        </tr>
      </thead>
      <tbody class="list">
        <tr>
          <td class="align-middle ps-3 name">Anna</td>
          <td class="align-middle email">anna@example.com</td>
          <td class="align-middle age">18</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Homer</td>
          <td class="align-middle email">homer@example.com</td>
          <td class="align-middle age">35</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Oscar</td>
          <td class="align-middle email">oscar@example.com</td>
          <td class="align-middle age">52</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Emily</td>
          <td class="align-middle email">emily@example.com</td>
          <td class="align-middle age">30</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Jara</td>
          <td class="align-middle email">jara@example.com</td>
          <td class="align-middle age">25</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Clark</td>
          <td class="align-middle email">clark@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Jennifer</td>
          <td class="align-middle email">jennifer@example.com</td>
          <td class="align-middle age">52</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Tony</td>
          <td class="align-middle email">tony@example.com</td>
          <td class="align-middle age">30</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Tom</td>
          <td class="align-middle email">tom@example.com</td>
          <td class="align-middle age">25</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Michael</td>
          <td class="align-middle email">michael@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Antony</td>
          <td class="align-middle email">antony@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Raymond</td>
          <td class="align-middle email">raymond@example.com</td>
          <td class="align-middle age">52</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Marie</td>
          <td class="align-middle email">marie@example.com</td>
          <td class="align-middle age">30</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Cohen</td>
          <td class="align-middle email">cohen@example.com</td>
          <td class="align-middle age">25</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="align-middle ps-3 name">Rowen</td>
          <td class="align-middle email">rowen@example.com</td>
          <td class="align-middle age">39</td>
          <td class="align-middle white-space-nowrap text-end pe-0">
            <div class="font-sans-serif btn-reveal-trigger position-static"><button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs--2" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h fs--2"></span></button>
              <div class="dropdown-menu dropdown-menu-end py-2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Export</a>
                <div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#!">Remove</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="d-flex justify-content-center mt-3"><button class="page-link" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
    <ul class="mb-0 pagination"></ul><button class="page-link pe-0" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
  </div>
</div>

Name	Email	Age	ACTION
Anna	anna@example.com	18	View Export Remove
Homer	homer@example.com	35	View Export Remove
Oscar	oscar@example.com	52	View Export Remove
Emily	emily@example.com	30	View Export Remove
Jara	jara@example.com	25	View Export Remove
Clark	clark@example.com	39	View Export Remove
Jennifer	jennifer@example.com	52	View Export Remove
Tony	tony@example.com	30	View Export Remove
Tom	tom@example.com	25	View Export Remove
Michael	michael@example.com	39	View Export Remove
Antony	antony@example.com	39	View Export Remove
Raymond	raymond@example.com	52	View Export Remove
Marie	marie@example.com	30	View Export Remove
Cohen	cohen@example.com	25	View Export Remove
Rowen	rowen@example.com	39	View Export Remove

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.

MacBook Air - 13″

MacBook Pro - 13″

Carry Anna

John Smith

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Components

Forms

Icons

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Components

Forms

Icons

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Components

Forms

Icons

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Components

Forms

Icons

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Advance Tables

Example

Pagination with numbering

Docs

On this page

Theme Customizer

Color Scheme

RTL

Navigation Type

Vertical Navbar Appearance

Horizontal Navbar Shape

Horizontal Navbar Appearance