Common tasks

Implementing links to detail views

The KingTable offers options to generate automatically links to detailed views: detailRoute, idProperty, getIdProperty. The detail route is used to render an anchor tag pointing to a generated url, including the id. The getIdProperty is a function used to obtain the name of the property that should be used to get the ids of collection items. By default, "id", "_id", "guid" or "_guid" properties are used (case insensitive).

//example of go to details options:
var table = new KingTable({
  url: "/api/products",
  element: document.getElementById("table-container"),
  detailRoute: "/api/product/" //generates links to details view, to: /api/product/{{id}}
});

// or, specifying which property should be used as id:
var table = new KingTable({
  url: "/api/products",
  element: document.getElementById("table-container"),
  detailRoute: "/api/product/", //generates links to details view, to: /api/product/{{foo}}
  idProperty: "foo"
})

table.render();

Alternatively, instead of using idProperty, it's possible to specify a getIdProperty function.

// or, specifying which property should be used as id:
var table = new KingTable({
  url: "/api/products",
  element: document.getElementById("table-container"),
  detailRoute: "/api/product/", //generates links to details view, to: /api/product/{{foo}}
  getIdProperty: function() { return "foo"; }
})

table.render();

Another option is to specify a template for the id property. For example, let`s imagine that the id property of your object is called "_id", and that the link to a details view must be implemented using and a element. When instantiating the KingTable; it is possible to define links to details view using the columns option (like for any other property):

  columns: {
    _id: {
      name: "Id",
      html: function (item) { 
        return `<a href="/some/url/${item._id}">Go to details</a>`; 
      }
    },

Disposing of tables

Each instance of table can be disposed, causing the disposal of dependent items and removing all related event handlers and HTML (for HTML builders).

  // example:
  table.dispose();

Logic to decorate generated HTML elements for each item

It's possible to define a function that decorates HTML elements generated for table items, using the itemDecorator property.

//example of go to details options:
var table = new KingTable({
  url: "/api/products",
  element: document.getElementById("table-container"),
  itemDecorator: function (item) { // allows to define HTML properties for each item
    if (item.price > 2e6) {
      return {"style": "background-color: darkred;"};
    }
    return {};
  }
});

table.render();

Implementing custom buttons and extra actions

When using the built-in rich HTML table builder, HTML controls for extra actions (e.g. delete button, edit button, etc.) can be easily implemented using fields option:

//example of go to details options:
var table = new KingTable({
  url: "/api/products",
  element: document.getElementById("table-container"),
  fields: [
    {
      name: "delete-btn",
      displayName: "Delete",
      html: function() { "<button class='delete-item'>Delete</button>"; }
    }
  ],
  events: {
    "click .delete-item": function(e, item) {
      // event handler is called in the context of the table builder (access to table instance)
      // first parameter is the click Event; second parameter is the clicked item
    }
  }
});

table.render();

Make the height of the table body fixed

To make the height of the table body fixed, apply a style to its wrapper (king-table-container):

.king-table-container {
  overflow-x: hidden;
  overflow-y: auto;
  height: 300px;    /* replace this line with the desired height */
}