xrm/public/javascripts/index.js

$(function() {
  $('#collections li').live('click', function() {
    showCollection(this);
  });
  showCollection($('#collections li:first')[0]);
});
function showCollection(liCollection) {
  var grid;
  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    enableAddRow: false
  };
  $('#collections li').removeClass('selected');
  $(liCollection).addClass('selected');
  $.getJSON(liCollection.innerText+'.json', function(data) {
    // create columns structure for grid
    if(data.length==0) {
      $('myGrid').hide();
    }
    // we'll take the columns from the first document in the collection, we assume they are all of the same structure - temp assumption!
    var columns = [];
    for(var c in data[0]) {
      columns.push( {id:c, name:c, field:c} );
    }
    grid = new Slick.Grid("#myGrid", data, columns, options);
    $("#myGrid").show();
  });
}