Skip to content

Extensibility points

Jump to bottom
Roberto Prevato edited this page May 3, 2017 · 8 revisions

The KingTable library offers several extensibility points, to simplify the programmer's life. Following paragraphs describe them.

KingTable.Schemas.DefaultByName

KingTable.Schemas.DefaultByName allows to define default columns properties by property name.

Example:

It's necessary to display items with decimal amount and currency in several tables, and it's desirable to display the currency close to the formatted amount, and not in a separated column.

    { amount: 10.45, currency: "PLN" },
    { amount: 100.50, currency: "EUR" },
    { amount: 54.45, currency: "PLN" },
    { amount: 22.30, currency: "EUR" },
    { amount: 65.45, currency: "PLN" },
    { amount: 70.45, currency: "DKK" },
    { amount: 80.45, currency: "DKK" }

Solution: Using KingTable.Schemas.DefaultByName.

  // extend schemas with default configuration by property name
  KingTable.Schemas.DefaultByName.amount = {
    format: function (value, item) {
      // NB: internally it utilizes the Intl.NumberFormat HTML5 API to format
      // numbers (it could be unavailable in certain browsers)
      return KingTable.NumberUtils.format(value) + " " + item.currency;
    }
  };

Then, defaults by name are used whenever needed.

  var table = new KingTable({
    // option to feed data (data: collection or url: "url")
    element: document.getElementById("container"),
    columns: {
      currency: { secret: true } // hide currency property, to not display it twice
    }
  });

Live demo.

KingTable.Schemas.DefaultByType

KingTable.Schemas.DefaultByType allows to define default columns properties by property type. Column type doesn't represent the default JavaScript types, but something more descriptive. For example, in JavaScript typeof [] gives "Object"; but the KingTable object analyzer is more specific, and returns "array" as property type. When defining table columns, it's possible to define arbitrary type names, and define default properties by type inside KingTable.Schemas.DefaultByType.

Example:

It's necessary to display thumbnails in several tables. For example:

    { avatar: "http://i.pravatar.cc/200?img=1", name: "Derpina" },
    { avatar: "http://i.pravatar.cc/200?img=2", name: "Jane Doe" },
    { avatar: "http://i.pravatar.cc/200?img=3", name: "Derp" },
    { avatar: "http://i.pravatar.cc/200?img=4", name: "Filip" },
    { avatar: "http://i.pravatar.cc/200?img=5", name: "Aleksandra" }

Solution: Using KingTable.Schemas.DefaultByType to define a thumbnail type.

  // extend schemas with default configuration by property type
  KingTable.Schemas.DefaultByType.thumbnail = {
    sortable: false,    // disable sort by url
    allowSearch: false, // disable text search url
    html: function (item, value) {
      // return HTML fragment to display a picture
      return "<img src='" + value + "' width='150' height='150' alt='" + value + "'>";
    }
  };

Then, use thumbnail type whenever needed.

  var table = window.table = new KingTable({
    // option to feed data (data: collection or url: "url")
    element: document.getElementById("container"),
    columns: {
      avatar: { type: "thumbnail" } // set the type of the property
    }
  });

Live demo.

Rich HTML Builder callbacks

The default Rich HTML Builder offers some callbacks to apply custom HTML logic to the table, upon render. These callbacks can be configured using table options parameter.

onLayoutRender

Callback fired when the table layout is rendered, with root element as parameter.

onFiltersRender

Callback fired when the table layout is rendered, with custom filters view element as parameter.

onViewUpdate

Callback fired when the table view is updated, with custom filters view element as parameter.

    onLayoutRender: function (rootEl) {
      console.log("On layout render", rootEl);
    },
    onFiltersRender: function (filtersViewEl) {
      console.log("On filters view render", filtersViewEl);
    },
    onViewUpdate: function (viewEl) {
      console.log("On view update", viewEl);
    },
Clone this wiki locally