Usage: JSON Schema Tables

NOTE: This functionality is currently dev only

Include the JS

<script type="application/javascript"
        src="bower_components/appbuilder3/appbuilder3.js"></script>

Let Angular.js know your app depends on it

const MyApp = angular.module("MyApp", [
  "AppBuilder3"
]);

Use an inline JSON Schema

MyApp.controller("TableContainerCtrl", TableContainerCtrl);

TableContainerCtrl.$inject = ["JsonSchema"];
function TableContainerCtrl (  JsonSchema) {

  const $t = this;

  $t.schema = new JsonSchema({
    "$schema": "http://json-schema.org/draft-04/schema#",
    "description": "schema for a thing",
    "type": "object",
    "additionalProperties": false,
    "required": [ "id", "name", "date_added", "is_public" ],
    "properties": {
      "id": {
        "type": "string",
        "description": "The Thing's UUID",
        "format": "uuid"
      },
      "name": {
        "type": "string",
        "description": "E.g. 'Some thing'",
        "maxLength": 255
      },
      "date_added": {
        "type": "string",
        "format": "date-time"
      },
      "is_public": {
        "type": "boolean",
        "value": false
      }
    }
  });

  $t.table = {
    cols: [
      { property: "id", headers: { label: "ID" }, cells: { value: function (model, schema) { return model.id } },
      { property: "name", headers: { label: "Name" }, cells: { value: function (model, schema) { return model.name } },
      { property: "date_added", headers: { label: "Added" }, cells: { value: function (model, schema) { return model.date_added } },
      { property: "is_public", headers: { label: "Public" }, cells: { value: function (model, schema) { return model.is_public && "Yes" || "No"; } },
    ],
  };

  $t.models = [
    { id: "abc-115", name: "Test model #1", date_added: new Date(), is_public: false },
    { id: "abc-456", name: "Test model #2", date_added: new Date(), is_public: true },
    { id: "abc-333", name: "Test model #3", date_added: new Date(), is_public: false },
  ];

}

Render the table

<section ng-controller="TableContainerCtrl as $t">
  <div id="MyTable"
    ab-schema="$t.schema"
    ab-table="$t.table"
    ab-model="$t.model">
  </div>
</section>