Create interactive html table using List.js

List.js is a tiny vanilla JavaScript library that adds search, sort, filters, and flexibility to plain HTML lists, tables, or anything. I’m going to share a snippet below to show how to use List.js to create an interactive HTML table similar to what jQuery library DataTable does. For the styling part, I’ll use Bootstrap, though you can apply your own styles or any other CSS framework. In the end, we’ll have an interactive HTML table with the features of searching, sorting, pagination, etc.

To understand how to apply the search and sort to apply in HTML lists, tables, or anything via List.js, visit here and check the “Example 5: Add automagic search and sort inputs and buttons“.

Here is the html structure for the table.

<div id="listjs">
    <div class="btn-toolbar mb-3">
        <div class="input-group">
            <label class="input-group-text">Search</label>
            <input type="search" class="form-control listjs-search">
        </div>
    
        <div class="ms-auto input-group">
            <label class="input-group-text">Show</label>
            <select class="form-select" id="listjs-items-per-page">
                <option value="10" selected>10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            <label class="input-group-text">items</label>
        </div>
    </div>
  
    <div class="table-responsive">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th class="listjs-sorter" data-sort="id">ID</th>
                    <th class="listjs-sorter" data-sort="first_name">First Name</th>
                    <th class="listjs-sorter" data-sort="last_name">Last Name</th>
                    <th class="listjs-sorter" data-sort="email">Email</th>
                    <th class="listjs-sorter" data-sort="gender">Gender</th>
                    <th class="listjs-sorter" data-sort="ip_address">IP Address</th>
                </tr>
            </thead>
            <tbody class="list">
                <tr>
                    <td class="id">1</td>
                    <td class="first_name">Zaria</td>
                    <td class="last_name">Fowlestone</td>
                    <td class="email">zfowlestone0@jugem.jp</td>
                    <td class="gender">Agender</td>
                    <td class="ip_address">235.169.203.89</td>
                </tr>
                ...
                ...
                ...
                ...
                ...
            </tbody>
        </table>
    </div>
  
    <div class="btn-toolbar">
        <p class="mb-0" id="listjs-showing-items-label">Showing 100 items</p>
        <ul class="pagination ms-auto mb-0"></ul>
    </div>
</div>

 

Styles that I’ve applied to add the sort icons.

.listjs-sorter {
    position: relative;
    cursor: pointer;
    padding-right: 1.25rem;
}
.listjs-sorter:after {
    font-weight: normal;
    line-height: 1;
    content: "\21C5";

    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
}
.listjs-sorter.asc:after {
    content: "\2191";
}
.listjs-sorter.desc:after {
    content: "\2193";
}

 

Finally the Javascript part

var options = {
 valueNames: [ 'id', 'first_name', 'last_name', 'email', 'gender', 'ip_address' ],
 page: 10,
 searchClass: 'listjs-search',
 sortClass: 'listjs-sorter',
 pagination: [{
  name: "pagination",
  paginationClass: "pagination",
  left: 1,
  right: 1,
  item: '<li class="page-item"><a class="page-link page" href="#"></a></li>'
 }]
};

var listjs = new List('listjs', options);

function update_entries_label(listjs) {
 var total_items = listjs.items.length;
 var visible_items = listjs.visibleItems.length;
 var showing_items_label = total_items + " entries found";
 document.getElementById('listjs-showing-items-label').innerHTML = showing_items_label;
}

update_entries_label(listjs);

listjs.on('updated', function(list){
 update_entries_label(list);
});

document.getElementById('listjs-items-per-page').addEventListener('change', function(e){
 var items = this.value;
 listjs.page = items;
 listjs.update();
});

 

Putting together all the codes, we can see below how the table looks like.