Custom views

This page describes how to create custom views, to be used by default Rich HTML table builder.

1. Define a resolver object implementing required interface

Custom views for default RHTML builder must implement a resolver: that is an object that creates and HTML view, given table, columns and data information. A resolver can be either an instantiable object, or a plain JavaScript object, and must implement a method: buildView(table, columns, data).

var MyCustomViewResolver = function() {};

MyCustomViewResolver.prototype.buildView = function(table, columns, data) {
  // use this.table information to build a table like you desire.
  // subscribe to table events to know when to update the view, display loading view, error view, etc.

  // The function must return an HTML fragment, build it as you prefer
  // data contains the items to display, with extra information (such as item number)
  // table is the instance of KingTable; columns contain the items' properties information
  return "<div class='king-table-body'><p>Test</p></div>";
};

2. Use the custom resolver

Create a view definition that utilizes the custom resolver: either when instantiating a KingTable, or editing the tables globally.

To use a custom view with a specific table:

  var table = new KingTable({
    // {...} other required options
    extraViews: [
      {
        name: "My View", // --> used as display name in built menu
        resolver: MyCustomViewResolver
      }
    ]
  })

To use a custom view globally:

var view = {
    name: "My View", // --> used as display name in built menu
    resolver: MyCustomViewResolver
};

KingTable.RichHtmlBuilder.defaults.views.push(view);

How to override default views

To override completely views for an instance of KingTable, use the views option instead of extraViews. This way, the default table and gallery views are removed completely.

  var table = new KingTable({
    // {...} other required options
    views: [
      {
        name: "My View", // --> used as display name in built menu
        resolver: MyCustomViewResolver
      }
    ]
  })

Notes

The selected view for each table is automatically cached and restored by KingTable library, so it's persisted upon page refresh.