The KingTable widget supports custom views to display the results; and by default two kinds of view are enabled:

• table, which generates a table element
• gallery, which generates a ul element

The options that control the available views for an instance of KingTable are: views, and extraViews. When specifying extraViews, they are added to the list of default views; when specifying views, they override the list of default views.

The KingTable widget supports two kinds of custom views:

• views that are built by defining an item template
• views that are completely custom, built using a resolver function

To define custom views of the first type, it is necessary to:

• define the base template; which must contain an element with class "king-table-body"
• define the function that returns the template for a single item (using the Lodash template engine and the settings used by the KingTable
• include the custom view in the instance of KingTable

The base template, can be either defined inside a script element with id = ""

<script type="text/html" id="king-table-foo">
  <div class="king-table-body"></div>
</script>

$.KingTable.Templates["king-table-foo"] = "<div class='king-table-body'></div>";

The function that returns the item template must be specified inside the object that define the custom view. For example:

$("#content").kingtable({
  url: "/api/colors",
  extraViews: [
    {
      name: "Squares",
      value: "squares",
      getItemTemplate: function () {
        return "<li title=\"{{name}}\" style=\"background-color:{{color}}\"></li>";
      }
    }
  ]
});

To define custom views of the second type (with a resolver function), it is necessary to:

• define the function that returns the built view, and injects it in the KingTable element For example, it is possible to build a graph using d3.js library.

  extraViews: [
    {
      name: "Bubbles",
      value: "bubbles",
      resolver: function (items) {
        //the context (this) is the instance of KingTable
        //build the custom view, then inject it inside the element
        this.$el.find(".king-table-body").html("foo");
      }
    },
  ]

In order to disable the gallery view, which is enabled by default, configure the KingTable globally, this way:

$.KingTable.prototype.views = [{ name: "Table", value: "table" }];

It is recommended to style the gallery view in such a way that generated elements occupy the same space on the page. For example:

#my-table {
  .king-table-gallery > ul > li {
    width: 100px;
    > span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}