---
layout: default
title: Search, sort, filters, flexibility to tables, list and more!
---

<div class="intro">
  <div class="intro-logo">
    <img src="/assets/images/graphics/listjs-logo.png" />
  </div>
  <div class="intro-text">
    <h1>List.js <small>v{{site.data.package.version}}</small></h1>
    <h2>
      Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript
      that adds <em>search</em>, <em>sort</em>, <em>filters</em> and <em>flexibility</em>
      to plain HTML <em>lists</em>, <em>tables</em>, or anything.
    </h2>
  </div>
</div>


{% include examples/annotated-example.html %}

<div class="startpage-more-examples">
  <h3>More examples</h3>
  <ul>
    {% for example in site.examples %}
      <li><a href="{{example.url}}">{{example.name}}</a></li>
    {% endfor %}
  </ul>
</div>


<div class="startpage-quotes">
  <div class="startpage-quotes-quote">
    <blockquote class="twitter-tweet"><p>List.js: native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable - <a href="http://t.co/nOoE1RJg">http://t.co/nOoE1RJg</a></p>&mdash; Smashing Magazine (@smashingmag) <a href="https://twitter.com/smashingmag/statuses/148142949287477248">December 17, 2011</a></blockquote>
  </div>
  <div class="startpage-quotes-quote">
    <blockquote class="twitter-tweet" lang="en"><p>Search, sort, and filter your <a href="https://twitter.com/search?q=%23HTML&amp;src=hash">#HTML</a> tables, lists, and more with List.js <a href="http://t.co/4BHjmOEU56">http://t.co/4BHjmOEU56</a> – dev&#39;d by <a href="https://twitter.com/javve">@javve</a> log&#39;d by <a href="https://twitter.com/jerodsanto">@jerodsanto</a> <a href="https://twitter.com/search?q=%23js&amp;src=hash">#js</a></p>&mdash; The Changelog (@TheChangelog) <a href="https://twitter.com/TheChangelog/statuses/406428113510604800">November 29, 2013</a></blockquote>
  </div>
  <div class="startpage-quotes-quote">
    <blockquote class="twitter-tweet"><p>List.js: Add Search, Sort and Flexibility to HTML Lists or Tables - <a href="http://t.co/ygEp2Tk7Pu">http://t.co/ygEp2Tk7Pu</a> (“Native” JavaScript, no dependencies.)</p>&mdash; JavaScript Daily (@JavaScriptDaily) <a href="https://twitter.com/JavaScriptDaily/statuses/335832684137943040">May 18, 2013</a></blockquote>
  </div>
</div>


<div class="misc">

  <div class="misc-author">
    <img src="/assets/images/graphics/javve.jpg" id="javve-pic" class="misc-author-pic" />
    <h4>Hi! I'm Jonny and the author of List.js.</h4>
    <p>
      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 ;)
    </p>
    <iframe src="http://ghbtns.com/github-btn.html?user=javve&type=follow" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
    <a href="https://twitter.com/javve" class="twitter-follow-button" data-show-count="false">Follow @javve</a>

    <form class="donate-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
      <input type="hidden" name="cmd" value="_s-xclick">
      <input type="hidden" name="hosted_button_id" value="V2SDE9QNU6KMA">
      <button type="submit" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" class="donate">
        <span onmouseover="$('#javve-pic').attr('src', '/assets/images/graphics/javve-coffee2.jpg');" onmouseout="$('#javve-pic').attr('src', '/assets/images/graphics/javve.jpg');">Donate a cup of coffee</span>
      </button>
      <img class="donate-pixel" alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>
  </div>
</div>