Minimum effort

One of the main objectives of the KingTable library is to allow the implementation of administrative tables with the minimum amount of effort from the developer; especially on the client side.

For example, in order to obtain the table shown in the examples and in the colors demo, this is the amount of required client code:

  var table = new KingTable({
    element: document.getElementById("my-table"),
    data: COLORS_DATA, // if we were loading from server side --> url: "/api/colors"
    columns: {
      name: "Name",
      color: {
        name: "Color",
        html: function (item, value) {
          // NB: context is the table builder; it includes an `highlight` function to highlight strings when a search is active
          return "<span class=\"kt-color\" style=\"background-color:" + value + "\"></span><span class=\"kt-color-hex\">" + this.highlight(value) + "</span>";
        }
      },
      red: "Red",
      green: "Green",
      blue: "Blue",
      hue: "Hue",
      hslLight: "Light (HSL)",
      hslSaturation: "Saturation (HSL)",
      hsvSaturation: "Saturation (HSV)",
      hsvValue: "Value (HSV)"
    }
  });

  table.render();

Note how for the most part, parameters consist of display names for columns. The built table offers pagination controls, search field; a menu to hide the columns; a menu to export the displayed results in csv, json and xml formats. Caching mechanism for filters, table related data and fetched collections.

And this is not everything: for collections that don't require server side pagination (fixed tables), the KingTable library takes care also of the client side pagination and search functionality, without any input from the programmer.