finderjs

Browse hierarchical data in columns, similar to OS X's Finder

View on Github Download .zip Download .tar.gz

Introduction

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

Features

  • Data source: Array or Function (useful for asynchronous operations, e.g. calling an API).
  • Stlying: 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.
  • Test coverage: 100%.

Examples

Note: these examples require CSS flexbox support.

Example A

The data source is an array.

View source

Example B

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

View source

Installation

npm install finderjs

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

Usage

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.