Get support Preview Demo

Data Tables

Search, sort, filters, flexibility for tables, lists and more!

List.js documentation share-external-link-1

Basic example

ID Name Project manager Status
1 Alibaba Jon Richardson Completed
2 Nike Alba Monday Completed
3 Amazon Rose Watson In-progress
4 Webinning Levente Kosa In-progress
5 eBay Andy Webb Outdated 
<div class="table-responsive">
    <table class="table table-nowrap mb-0" data-list='{"valueNames": ["id", "name", "manager", "status"]}'>
        <thead class="thead-light">
            <tr>
                <th class="w-80px">
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="id">
                        ID
                    </a>
                </th>
                <th>
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="name">
                        Name
                    </a>
                </th>
                <th class="min-w-200px">
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="manager">
                        Project manager
                    </a>
                </th>
                <th>
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="status">
                        Status
                    </a>
                </th>
            </tr>
        </thead>

        <tbody class="list">
            <tr>
                <td class="id">1</td>
                <td class="name">Alibaba</td>
                <td class="manager">Jon Richardson</td>
                <td class="status"><span class="badge text-bg-success rounded-pill">Completed</span></td>
            </tr>
            <tr>
                <td class="id">2</td>
                <td class="name">Nike</td>
                <td class="manager">Alba Monday</td>
                <td class="status"><span class="badge text-bg-success rounded-pill">Completed</span></td>
            </tr>
            <tr>
                <td class="id">3</td>
                <td class="name">Amazon</td>
                <td class="manager">Rose Watson</td>
                <td class="status"><span class="badge text-bg-warning rounded-pill">In-progress</span></td>
            </tr>
            <tr>
                <td class="id">4</td>
                <td class="name">Webinning</td>
                <td class="manager">Levente Kosa</td>
                <td class="status"><span class="badge text-bg-warning rounded-pill">In-progress</span></td>
            </tr>
            <tr>
                <td class="id">5</td>
                <td class="name">eBay</td>
                <td class="manager">Andy Webb</td>
                <td class="status"><span class="badge text-bg-danger rounded-pill">Outdated</span></td>
            </tr>
        </tbody>
    </table>
</div>

Sort anything

Sometimes you need to sort other than strings or numbers, for example dates. In this case you can define them as timstamps and use them as sorting values.

Price Email ID Date Sales
802£ #9265 03.26.2022
81%
499£ #8545 08.02.2021
25%
349£ #4445 03.14.2021
41%
599£ #2391 03.17.2021
62%
1200£ #8987 12.15.2020
36% 
<div class="table-responsive" data-list='{"valueNames": [{"name": "price", "attr": "data-price"}, "email", "id", {"name": "date", "attr": "data-signed"}, {"name": "sales", "attr": "data-sales"}]}' id="sortingList">
    <table class="table table-nowrap">
        <thead class="thead-light">
            <tr>
                <th>
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="price">
                        Price
                    </a>
                </th>
                <th>
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="email">
                        Email
                    </a>
                </th>
                <th>
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="id">
                        ID
                    </a>
                </th>
                <th>
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="date">
                        Date
                    </a>
                </th>
                <th class="min-w-200px">
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="sales">
                        Sales
                    </a>
                </th>
            </tr>
        </thead>

        <tbody class="list">
            <tr>
                <td class="price" data-price="802">802£</td>
                <td class="email">lobortis.augue@natoquepenatibuset.ca</td>
                <td class="id">#9265</td>
                <td class="date" data-signed="1648252800">03.26.2022</td>
                <td class="sales" data-sales="81">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="progress d-flex flex-grow-1">
                            <div class="progress-bar" role="progressbar" style="width: 81%" aria-valuenow="81" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <span class="ms-3 text-body-secondary">81%</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="price" data-price="499">499£</td>
                <td class="email">pede@at.com</td>
                <td class="id">#8545</td>
                <td class="date" data-signed="1627858800">08.02.2021</td>
                <td class="sales" data-sales="25">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="progress w-100">
                            <div class="progress-bar bg-dark" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <span class="ms-3 text-body-secondary">25%</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="price" data-price="349">349£</td>
                <td class="email">diam@nislNullaeu.net</td>
                <td class="id">#4445</td>
                <td class="date" data-signed="1615680000">03.14.2021</td>
                <td class="sales" data-sales="41">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="progress w-100">
                            <div class="progress-bar bg-dark" role="progressbar" style="width: 41%" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <span class="ms-3 text-body-secondary">41%</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="price" data-price="599">599£</td>
                <td class="email">in.lobortis.tellus@faucibusorci.co.uk</td>
                <td class="id">#2391</td>
                <td class="date" data-signed="1615939200">03.17.2021</td>
                <td class="sales" data-sales="62">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="progress w-100">
                            <div class="progress-bar" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <span class="ms-3 text-body-secondary">62%</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="price" data-price="1200">1200£</td>
                <td class="email">eleifend.nec@ligulaconsectetuerrhoncus.ca</td>
                <td class="id">#8987</td>
                <td class="date" data-signed="1607990400">12.15.2020</td>
                <td class="sales" data-sales="36">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="progress w-100">
                            <div class="progress-bar bg-dark" role="progressbar" style="width: 36%" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <span class="ms-3 text-body-secondary">36%</span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Pagination

You can add pagination and limit the shown row numbers easily. In this case you need a custom id on the main tag.

Name Email Company
Chava Franks Magnis Dis Institute
Uriel Hays Curabitur Ut Inc.
Zia Castro Mauris A Institute
Jescie Kline Gravida Sit Amet Associates
Colleen Riggs Quis Foundation
Lars Roy Mauris Id Foundation
Lois Battle Tellus Lorem Eu Institute
Erasmus Gutierrez Porttitor Vulputate Incorporated
Garth Romero Vehicula Pellentesque PC
Randall Cleveland Elit Curabitur Incorporated
Stuart Hickman Neque Nullam Ut LLC
Kylee Hickman Ac Corp.
Jonah Flynn Sagittis Placerat Corp.
Channing Yang Nibh Donec Est PC
Leigh Solomon Sed Leo Cras Incorporated
Arden Andrews Enim Commodo Corporation
Carla Sherman Volutpat Nunc Sit Institute
Hadassah Reyes Lorem Corp.
Stuart Good Augue Incorporated
Nevada Mays Mauris Ltd
Showing: - of 
    <div class="table-responsive">
    <table class="table table-nowrap">
        <thead class="thead-light">
            <tr>
                <th class="min-w-200px">
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="name">
                        Name
                    </a>
                </th>
                <th class="min-w-250px">
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="email">
                        Email
                    </a>
                </th>
                <th class="min-w-200px">
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="company">
                        Company
                    </a>
                </th>
            </tr>
        </thead>

        <tbody class="list">
            <tr>
                <td class="name">Chava Franks</td>
                <td class="email">in.tincidunt@protonmail.net</td>
                <td class="company">Magnis Dis Institute</td>
            </tr>
            <tr>
                <td class="name">Uriel Hays</td>
                <td class="email">cras@outlook.couk</td>
                <td class="company">Curabitur Ut Inc.</td>
            </tr>
            <tr>
                <td class="name">Zia Castro</td>
                <td class="email">erat.vitae@yahoo.ca</td>
                <td class="company">Mauris A Institute</td>
            </tr>
            <tr>
                <td class="name">Jescie Kline</td>
                <td class="email">nibh.quisque@yahoo.com</td>
                <td class="company">Gravida Sit Amet Associates</td>
            </tr>
            <tr>
                <td class="name">Colleen Riggs</td>
                <td class="email">purus.duis@protonmail.couk</td>
                <td class="company">Quis Foundation</td>
            </tr>
            <tr>
                <td class="name">Lars Roy</td>
                <td class="email">sodales@outlook.org</td>
                <td class="company">Mauris Id Foundation</td>
            </tr>
            <tr>
                <td class="name">Lois Battle</td>
                <td class="email">diam.at.pretium@icloud.net</td>
                <td class="company">Tellus Lorem Eu Institute</td>
            </tr>
            <tr>
                <td class="name">Erasmus Gutierrez</td>
                <td class="email">a.enim@outlook.net</td>
                <td class="company">Porttitor Vulputate Incorporated</td>
            </tr>
            <tr>
                <td class="name">Garth Romero</td>
                <td class="email">phasellus@hotmail.net</td>
                <td class="company">Vehicula Pellentesque PC</td>
            </tr>
            <tr>
                <td class="name">Randall Cleveland</td>
                <td class="email">dui.nec@aol.edu</td>
                <td class="company">Elit Curabitur Incorporated</td>
            </tr>
            <tr>
                <td class="name">Stuart Hickman</td>
                <td class="email">pellentesque@icloud.couk</td>
                <td class="company">Neque Nullam Ut LLC</td>
            </tr>
            <tr>
                <td class="name">Kylee Hickman</td>
                <td class="email">tempus.risus@hotmail.net</td>
                <td class="company">Ac Corp.</td>
            </tr>
            <tr>
                <td class="name">Jonah Flynn</td>
                <td class="email">neque.in@yahoo.edu</td>
                <td class="company">Sagittis Placerat Corp.</td>
            </tr>
            <tr>
                <td class="name">Channing Yang</td>
                <td class="email">a.facilisis@protonmail.edu</td>
                <td class="company">Nibh Donec Est PC</td>
            </tr>
            <tr>
                <td class="name">Leigh Solomon</td>
                <td class="email">tristique.ac.eleifend@hotmail.ca</td>
                <td class="company">Sed Leo Cras Incorporated</td>
            </tr>
            <tr>
                <td class="name">Arden Andrews</td>
                <td class="email">euismod.et@protonmail.edu</td>
                <td class="company">Enim Commodo Corporation</td>
            </tr>
            <tr>
                <td class="name">Carla Sherman</td>
                <td class="email">porta.elit@google.edu</td>
                <td class="company">Volutpat Nunc Sit Institute</td>
            </tr>
            <tr>
                <td class="name">Hadassah Reyes</td>
                <td class="email">at.velit@yahoo.net</td>
                <td class="company">Lorem Corp.</td>
            </tr>
            <tr>
                <td class="name">Stuart Good</td>
                <td class="email">ut@aol.org</td>
                <td class="company">Augue Incorporated</td>
            </tr>
            <tr>
                <td class="name">Nevada Mays</td>
                <td class="email">feugiat.tellus@aol.couk</td>
                <td class="company">Mauris Ltd</td>
            </tr>
        </tbody>
    </table>
</div>

    Custom pagination

    You can create custom pagination too, e.g. previous or next buttons.

    Name Email Company
    Chava Franks Magnis Dis Institute
    Uriel Hays Curabitur Ut Inc.
    Zia Castro Mauris A Institute
    Jescie Kline Gravida Sit Amet Associates
    Colleen Riggs Quis Foundation
    Lars Roy Mauris Id Foundation
    Lois Battle Tellus Lorem Eu Institute
    Erasmus Gutierrez Porttitor Vulputate Incorporated
    Garth Romero Vehicula Pellentesque PC
    Randall Cleveland Elit Curabitur Incorporated
    Stuart Hickman Neque Nullam Ut LLC
    Kylee Hickman Ac Corp.
    Jonah Flynn Sagittis Placerat Corp.
    Channing Yang Nibh Donec Est PC
    Leigh Solomon Sed Leo Cras Incorporated
    Arden Andrews Enim Commodo Corporation
    Carla Sherman Volutpat Nunc Sit Institute
    Hadassah Reyes Lorem Corp.
    Stuart Good Augue Incorporated
    Nevada Mays Mauris Ltd
    - of 
    <div data-list='{"valueNames": ["name", "email", "company"], "page": 5}' id="longListCustom">
    <div class="table-responsive">
        <table class="table table-nowrap">
            <thead class="thead-light">
                <tr>
                    <th class="min-w-200px">
                        <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="name">
                            Name
                        </a>
                    </th>
                    <th class="min-w-250px">
                        <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="email">
                            Email
                        </a>
                    </th>
                    <th class="min-w-200px">
                        <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="company">
                            Company
                        </a>
                    </th>
                </tr>
            </thead>

            <tbody class="list">
                <tr>
                    <td class="name">Chava Franks</td>
                    <td class="email">in.tincidunt@protonmail.net</td>
                    <td class="company">Magnis Dis Institute</td>
                </tr>
                <tr>
                    <td class="name">Uriel Hays</td>
                    <td class="email">cras@outlook.couk</td>
                    <td class="company">Curabitur Ut Inc.</td>
                </tr>
                <tr>
                    <td class="name">Zia Castro</td>
                    <td class="email">erat.vitae@yahoo.ca</td>
                    <td class="company">Mauris A Institute</td>
                </tr>
                <tr>
                    <td class="name">Jescie Kline</td>
                    <td class="email">nibh.quisque@yahoo.com</td>
                    <td class="company">Gravida Sit Amet Associates</td>
                </tr>
                <tr>
                    <td class="name">Colleen Riggs</td>
                    <td class="email">purus.duis@protonmail.couk</td>
                    <td class="company">Quis Foundation</td>
                </tr>
                <tr>
                    <td class="name">Lars Roy</td>
                    <td class="email">sodales@outlook.org</td>
                    <td class="company">Mauris Id Foundation</td>
                </tr>
                <tr>
                    <td class="name">Lois Battle</td>
                    <td class="email">diam.at.pretium@icloud.net</td>
                    <td class="company">Tellus Lorem Eu Institute</td>
                </tr>
                <tr>
                    <td class="name">Erasmus Gutierrez</td>
                    <td class="email">a.enim@outlook.net</td>
                    <td class="company">Porttitor Vulputate Incorporated</td>
                </tr>
                <tr>
                    <td class="name">Garth Romero</td>
                    <td class="email">phasellus@hotmail.net</td>
                    <td class="company">Vehicula Pellentesque PC</td>
                </tr>
                <tr>
                    <td class="name">Randall Cleveland</td>
                    <td class="email">dui.nec@aol.edu</td>
                    <td class="company">Elit Curabitur Incorporated</td>
                </tr>
                <tr>
                    <td class="name">Stuart Hickman</td>
                    <td class="email">pellentesque@icloud.couk</td>
                    <td class="company">Neque Nullam Ut LLC</td>
                </tr>
                <tr>
                    <td class="name">Kylee Hickman</td>
                    <td class="email">tempus.risus@hotmail.net</td>
                    <td class="company">Ac Corp.</td>
                </tr>
                <tr>
                    <td class="name">Jonah Flynn</td>
                    <td class="email">neque.in@yahoo.edu</td>
                    <td class="company">Sagittis Placerat Corp.</td>
                </tr>
                <tr>
                    <td class="name">Channing Yang</td>
                    <td class="email">a.facilisis@protonmail.edu</td>
                    <td class="company">Nibh Donec Est PC</td>
                </tr>
                <tr>
                    <td class="name">Leigh Solomon</td>
                    <td class="email">tristique.ac.eleifend@hotmail.ca</td>
                    <td class="company">Sed Leo Cras Incorporated</td>
                </tr>
                <tr>
                    <td class="name">Arden Andrews</td>
                    <td class="email">euismod.et@protonmail.edu</td>
                    <td class="company">Enim Commodo Corporation</td>
                </tr>
                <tr>
                    <td class="name">Carla Sherman</td>
                    <td class="email">porta.elit@google.edu</td>
                    <td class="company">Volutpat Nunc Sit Institute</td>
                </tr>
                <tr>
                    <td class="name">Hadassah Reyes</td>
                    <td class="email">at.velit@yahoo.net</td>
                    <td class="company">Lorem Corp.</td>
                </tr>
                <tr>
                    <td class="name">Stuart Good</td>
                    <td class="email">ut@aol.org</td>
                    <td class="company">Augue Incorporated</td>
                </tr>
                <tr>
                    <td class="name">Nevada Mays</td>
                    <td class="email">feugiat.tellus@aol.couk</td>
                    <td class="company">Mauris Ltd</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="d-flex align-items-center justify-content-end">
        <div class="mx-5 link-secondary small">
            <span class="list-pagination-page-first"></span> - <span class="list-pagination-page-last"></span> of <span class="list-pagination-pages"></span>
        </div>

        <div>
            <!-- Button -->
            <button type="button" class="list-pagination-prev btn btn-sm btn-secondary w-30px h-30px p-0 d-inline-flex align-items-center justify-content-center" disabled>
                <svg height="12" width="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><style type="text/css">.st100{fill:currentColor;}</style><path class="st100" d="M4.5,12c0-0.7,0.3-1.3,0.8-1.7l11.2-9.8c0.8-0.7,1.9-0.6,2.6,0.2c0.6,0.8,0.6,1.9-0.2,2.5l-9.8,8.6 C9,11.9,9,12,9.1,12.1c0,0,0,0,0,0l9.8,8.6c0.8,0.7,0.9,1.8,0.2,2.6c-0.7,0.8-1.8,0.9-2.6,0.2c0,0,0,0-0.1-0.1L5.3,13.7 C4.8,13.3,4.5,12.6,4.5,12z"/></svg>
            </button>

            <!-- Button -->
            <button type="button" class="list-pagination-next btn btn-sm btn-secondary w-30px h-30px p-0 d-inline-flex align-items-center justify-content-center" disabled>
                <svg height="12" width="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><style type="text/css">.st101{fill:currentColor;}</style><path class="st101" d="M19.5,12c0,0.7-0.3,1.3-0.8,1.7L7.5,23.6c-0.8,0.7-2,0.6-2.6-0.2c-0.6-0.8-0.6-1.9,0.2-2.6l9.8-8.6 c0.1-0.1,0.1-0.2,0-0.4c0,0,0,0,0,0L5.1,3.2C4.3,2.5,4.3,1.3,5,0.6c0.7-0.7,1.8-0.8,2.6-0.2l11.2,9.8C19.2,10.7,19.5,11.3,19.5,12z"/></svg>
            </button>
        </div>
    </div>
</div>

    Search

    Name Email Company
    Chava Franks Magnis Dis Institute
    Uriel Hays Curabitur Ut Inc.
    Zia Castro Mauris A Institute
    Jescie Kline Gravida Sit Amet Associates
    Colleen Riggs Quis Foundation
    Lars Roy Mauris Id Foundation
    Lois Battle Tellus Lorem Eu Institute
    Erasmus Gutierrez Porttitor Vulputate Incorporated
    Garth Romero Vehicula Pellentesque PC
    Randall Cleveland Elit Curabitur Incorporated 
    <div class="table-responsive" data-list='{"valueNames": ["name", "email", "company"]}' id="listSearch">
    <input class="form-control list-search mw-300px mb-5" type="search" placeholder="Search">

    <table class="table table-nowrap">
        <thead class="thead-light">
            <tr>
                <th class="min-w-200px">
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="name">
                        Name
                    </a>
                </th>
                <th class="min-w-250px">
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="email">
                        Email
                    </a>
                </th>
                <th class="min-w-200px">
                    <a href="javascript: void(0);" class="text-body-secondary list-sort" data-sort="company">
                        Company
                    </a>
                </th>
            </tr>
        </thead>

        <tbody class="list">
            <tr>
                <td class="name">Chava Franks</td>
                <td class="email">in.tincidunt@protonmail.net</td>
                <td class="company">Magnis Dis Institute</td>
            </tr>
            <tr>
                <td class="name">Uriel Hays</td>
                <td class="email">cras@outlook.couk</td>
                <td class="company">Curabitur Ut Inc.</td>
            </tr>
            <tr>
                <td class="name">Zia Castro</td>
                <td class="email">erat.vitae@yahoo.ca</td>
                <td class="company">Mauris A Institute</td>
            </tr>
            <tr>
                <td class="name">Jescie Kline</td>
                <td class="email">nibh.quisque@yahoo.com</td>
                <td class="company">Gravida Sit Amet Associates</td>
            </tr>
            <tr>
                <td class="name">Colleen Riggs</td>
                <td class="email">purus.duis@protonmail.couk</td>
                <td class="company">Quis Foundation</td>
            </tr>
            <tr>
                <td class="name">Lars Roy</td>
                <td class="email">sodales@outlook.org</td>
                <td class="company">Mauris Id Foundation</td>
            </tr>
            <tr>
                <td class="name">Lois Battle</td>
                <td class="email">diam.at.pretium@icloud.net</td>
                <td class="company">Tellus Lorem Eu Institute</td>
            </tr>
            <tr>
                <td class="name">Erasmus Gutierrez</td>
                <td class="email">a.enim@outlook.net</td>
                <td class="company">Porttitor Vulputate Incorporated</td>
            </tr>
            <tr>
                <td class="name">Garth Romero</td>
                <td class="email">phasellus@hotmail.net</td>
                <td class="company">Vehicula Pellentesque PC</td>
            </tr>
            <tr>
                <td class="name">Randall Cleveland</td>
                <td class="email">dui.nec@aol.edu</td>
                <td class="company">Elit Curabitur Incorporated</td>
            </tr>
        </tbody>
    </table>
</div>