Data Tables
Search, sort, filters, flexibility for tables, lists and more!
List.js documentationBasic 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 | ID | Date | Sales | |
|---|---|---|---|---|
| 802£ | lobortis.augue@natoquepenatibuset.ca | #9265 | 03.26.2022 |
|
| 499£ | pede@at.com | #8545 | 08.02.2021 |
|
| 349£ | diam@nislNullaeu.net | #4445 | 03.14.2021 |
|
| 599£ | in.lobortis.tellus@faucibusorci.co.uk | #2391 | 03.17.2021 |
|
| 1200£ | eleifend.nec@ligulaconsectetuerrhoncus.ca | #8987 | 12.15.2020 |
|
<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.
<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 | Company | |
|---|---|---|
| Chava Franks | in.tincidunt@protonmail.net | Magnis Dis Institute |
| Uriel Hays | cras@outlook.couk | Curabitur Ut Inc. |
| Zia Castro | erat.vitae@yahoo.ca | Mauris A Institute |
| Jescie Kline | nibh.quisque@yahoo.com | Gravida Sit Amet Associates |
| Colleen Riggs | purus.duis@protonmail.couk | Quis Foundation |
1 - 5 of 20
<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 | Company | |
|---|---|---|
| Chava Franks | in.tincidunt@protonmail.net | Magnis Dis Institute |
| Uriel Hays | cras@outlook.couk | Curabitur Ut Inc. |
| Zia Castro | erat.vitae@yahoo.ca | Mauris A Institute |
| Jescie Kline | nibh.quisque@yahoo.com | Gravida Sit Amet Associates |
| Colleen Riggs | purus.duis@protonmail.couk | Quis Foundation |
| Lars Roy | sodales@outlook.org | Mauris Id Foundation |
| Lois Battle | diam.at.pretium@icloud.net | Tellus Lorem Eu Institute |
| Erasmus Gutierrez | a.enim@outlook.net | Porttitor Vulputate Incorporated |
| Garth Romero | phasellus@hotmail.net | Vehicula Pellentesque PC |
| Randall Cleveland | dui.nec@aol.edu | 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>
By using code splitting and dynamic import techniques you don't need to worry about the size of the JavaScript file. Dashly will only import the necessary files when they are needed.