List.js library

We were lucky enough to speak with Jonny Strömberg – a talented Swedish designer and engineer, co-founder of Confetti project and Nordic.js conference. When he was working for a startup, he had a specific task: to make a massive list searchable, sortable and filterable. This is how List.js was born.

What is List.js? It’s a tiny (5 KB) and powerful library (vanilla JavaScript) that adds search, sort, filters to your HTML lists, tables or anything else. Here are some of its advantages:

  • Simple and invisible
  • Easy to apply to existing HTML
  • No dependencies
  • Fast and tiny (5 KB minified & gzip)
  • Can handle thousands of items

Features

  • Works with lists, tables and almost anything else. E.g. <div>,<ul>,<table>, etc.
  • Search read more Sort read more Filter read more
  • Simple templating system that adds possibility to add, edit, remove items read more
  • Plugins read more
  • Supported in Chrome, Safari, Firefox, IE6+

Examples

Simple list

See the Pen zpuKF by Jonny Strömberg (@javve) on CodePen.

Simple table

See the Pen oEezp by Jonny Strömberg (@javve) on CodePen.

Using custom attributes like data, image and links

See the Pen GZREaN by Jonny Strömberg (@javve) on CodePen.

The story behind List.js by Jonny Strömberg

In 2010 I started building what would become List.js. I was working with a startup at that time and we had to make a list with thousands of email subscribers, and this list had to support search, sort and filters.

I soon realized that it was very hard to make a long list performant, and for various reasons we couldn’t use server side pagination, etc. But after a couple of rewrites the list finally started to get both performant and flexible. This led us to adopt the same code for all lists in our product. While this was happening I realized that this code could be flexible enough to become an open source library.

So in the autumn of 2011 I released List.js as my first open source project ever. It was a bit scary, but I thought that only a few people would find the project.

Well, that was before the project was posted on Hackernews by a friend. It reached the top quickly and stayed there for hours and hours. This resulted in 27,000 visitors and 440 GitHub stars within 48 hours after release. So much for a chill first open source project.

It’s been a crazy ride working with List.js and it totally sparked my passion for open source projects. Now I’m working on a new project which I’m very excited about. So stay updated by following me at twitter: twitter.com/javve

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You may also like