Client-side, JavaScript-based Miller Columns

Question

Background

Miller Columns describe a user interface design for browsing and editing hierarchical lists. Some notable implementations include:

• Frédéric Hardy's
• Christian Yates'
• Jonathan Fine's

Problem

There are a number of problems with these implementations.

Frédéric Hardy

Demo and code. This is nearly perfect, the main issue is that the hierarchy cannot be set up in advance. Ideally, the JSON code would resemble:

{ 'id': 'ID1', 'name': 'Name2', 'parent': false },
{ 'id': 'ID2', 'name': 'Name2', 'parent': 'ID1' },

Where the second item ('ID2') refers to its parent ID ('ID1'). Unfortunately, the 'parent' parameter takes a boolean to indicate whether or not a parent exists. This means that using the library requires registering events and implementing the hierarchy data as separate files (requests), as far as I can tell.

Christian Yates

Demo and code. Seems to have some severe bugs (e.g., clicking on a category without children causes a child element to appear in the next column). No hooks for create/update/delete operations.

Jonathan Fine

Demo and code. The issues abound: awkward user interface (keyboard navigation using input field focus), not structured in a multi-column layout, large number of JS library files to include, no hooks for create/update/delete operations.

Additional Implementations

Other implementations that are encumbered with problems:

• Christian Heilmann wrote about complex dynamic lists, which uses HTML markup in its demo.
• Buwei Chiu has developed hColumns, with a demo that looks like it meets nearly all the criteria.
• Martin Wendt has written a fancy tree jQuery plug-in that has a skinnable columnview extension, which uses nested data, but only supports three columns.
• Carsten Griesheimer has written a column-view-component for the Polymer Web framework; the source code for the demo is reasonably close.
• The SmartGWT framework has Miller Columns that use in-memory tree structures.
• The GWT framework has a Cell Browser.
• The Vaadin framework (GWT-based?) has Miller Columns, but its plug-in demo has issues.

Question

What JavaScript library meets the following criteria:

• reads a complete JSON document in hierarchical form (XML or HTML are suitable, too);
• creates a user interface with dynamic columns;
• fully and accurately documented (in terms of API and CSS);
• has a "back" button or horizontal scrollbar to handle any number of columns;
• offers events for create/update/delete operations;
• can have its UI updated by changing a CSS template;
• works in all major browsers (IE10+),
• optionally, has a search feature (with or without regular expressions); and
• is free, open-source software?

Vanilla JS, jQuery, MooTools, or Closure are fine.

Answer 1

After an extensive search, no suitably simple Miller Columns software surfaced. Here's my software that has the specified functionality:

• Source

The editing operations are equally trivial:

$(document).ready( function() {
  $.getScript( "js/columns.js", function() {
    var $current;

    $("div.columns").millerColumns({
      current: function( $item ) {
        $current = $item;
      }
    });

    /** Called when an edit link is clicked. */
    update = function( link, def, undef ) {
      $(link).on( "click", function( event ) {
        event.preventDefault();

        ($current === undefined) ?
          typeof undef === "function" && undef() :
          typeof def === "function" && def();

        return false;
      });
    }

    update( "#new",
      function() {
        console.log( "new child of: " + $current );
      },
      function() {
        console.log( "new root sibling" );
      }
    );

    update( "#edit",
      function() {
        console.log( "edit" );
      }
    );

    update( "#del",
      function() {
        console.log( "delete" );
      }
    );
  });
});