List.js v1.5.0 Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

I hope you like the lib. I’ve put a lot of hours into it! Feel free to follow me on Twitter and GitHub for news and donate a coffee for good karma ;)

Basic examples

Here is an example of a list with List.js applied. List.js can be used in three different ways. It can be on existing HTML, it can create it's own HTML or a combination of both methods.

Sort by name Sort by born Jonny Strömberg 1990 Jonas Arnklint 1985 Martina Elm 1986 Gustaf Lindqvist 1983

Apply List.js on existing HTML

<div id="users"> <!-- class="search" automagically makes an input a search field. --> <input class="search" placeholder="Search" /> <!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. --> <button class="sort" data-sort="name"> Sort </button> <!-- Child elements of container with class="list" becomes list items --> <ul class="list"> <li> <!-- The innerHTML of children with class="name" becomes this items "name" value --> <h3 class="name">Jonny Stromberg</h3> <p class="born">1986</p> </li> <li> <h3 class="name">Jonas Arnklint</h3> <p class="born">1985</p> </li> <li> <h3 class="name">Martina Elm</h3> <p class="born">1986</p> </li> <li> <h3 class="name">Gustaf Lindqvist</h3> <p class="born">1983</p> </li> </ul> </div> var options = { valueNames: [ 'name', 'born' ] }; var userList = new List('users', options);

Apply List.js on existing HTML and then add items

<div id="users"> <input class="search" placeholder="Search" /> <button class="sort" data-sort="name"> Sort </button> <ul class="list"> <!-- This, the first element in the list, will be used as template for new items. --> <li> <h3 class="name">Jonny Stromberg</h3> <p class="born">1986</p> </li> </ul> </div> var options = { valueNames: [ 'name', 'born' ] }; // These items will be added to the list on initialization. var values = [ { name: 'Jonas Arnklint', born: 1985 }, { name: 'Martina Elm', born: 1986 } ]; var userList = new List('users', options, values); // It's possible to add items after list been initiated userList.add({ name: 'Gustaf Lindqvist', born: 1983 });

Make List.js create a list from scratch