Finder.js

Introduction

FinderJS allows you to browse tree-like data in columns, similar to OS X's file manager Finder.

Data source: Array or Function (useful for asynchronous operations, e.g. calling an API).
Styling: Use any CSS/framework of choice, or feel free to use the example CSS (which leverages Flexbox). You can also define how items are rendered and change default classnames.
Keyboard navigation: use arrows keys to navigate.
Events: several events are emitted to allow for custom behavior.
Module formats: Provided as an npm module (CommonJS), a jQuery plugin, and exported as the global finder.
File size: 4KB minified and gzipped. No external dependencies.
Code quality: Code Climate.

The data source is an array.

The data source is a function that pulls in sample data from REST Countries.

Selects default path build/finder.js on load. You can also programmatically select a path:

npm install finderjs

or download the latest release and include the standalone script or jquery plugin directly onto your page.

FinderJS expects a container HTML element, a data source (Array or Function), and an options object.


  finder(container, data, options)
  .on('leaf-selected', function(item) {
    console.log('Leaf node selected', item);
  });

For more information see the README or view the source of the examples above.