$.formhandler

An interactive table component for FormHandler data.

<div class="formhandler" data-src="formhandler-url" data-page-size="10"></div>
<script>
  $(".formhandler").formhandler({
    pageSize: 20,
  });
</script>

Options can passed via an options dict, and over-ridden using data- attributes. In the above example, data-page-size="10" over-rides pageSize: 20.

$.formhandler options

The full list of options is below. Simple options can be specified as data- attributes as well.

Advanced. Each component can have a target which specifies a selector. For e.g., to render the export button somewhere else, use data-export-target=".navbar-export". This replaces the .navbar-export contents with the export button. (It searches within the table container for .navbar-export first, and if not found, searches everywhere.) Available targets are:

Advanced: Each component’s template string can be over-ridden. For example, data-search-template="<input type='search'>" will replace the search template with a simple input. Available template strings are:

Features to be implemented:

$.formhandler events

$.formhandler data

When you run $(...).formhandler() on an element, you can access FormHandler-related data and methods via $(...).data('formhandler'). This returns an object with these keys:

For example:

$(".formhandler").formhandler();
var data = $(".formhandler").data("formhandler");
data.data; // data displayed by component
data.meta; // metadata returned by the FormHandler
data.args; // args passed to the FormHandler

$.formhandler examples

Render from a FormHandler

<div class="formhandler" data-src="./data"></div>
<script>
  $(".formhandler").formhandler();
</script>

Access data inside formhandler

<div class="formhandler" data-src="./data"></div>
<script>
  $(".formhandler")
    .on("load", function (data, meta, args, options) {
      console.log("data inside formhandler table: ", data);
    })
    .formhandler();
</script>

Draw chart in cell

<div class="formhandler" data-src="./data"></div>
<script>
  $('.formhandler').formhandler({
    columns: [
      {name: '*'},
      {
        name: 'c1',
        format: function (o) {
          return '<svg height="10" width="10"><circle cx="5" cy="5" r="' + o.c1 / 10 + '" fill="red"></circle></svg>'
        }
      }
    }
  })
</script>

Customize inputs in edit mode

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>

<div class="edit-fh" data-src="./data"></div>
<script>
  $(".edit-fh")
    .formhandler({
      columns: [
        {
          name: "ID",
          editable: false, // Disable edit for column "ID" because it is a primary key and cannot be edited.
        },
        {
          name: "Continent", // Defaults to editable: false
        },
        {
          name: "c1",
          editable: {
            input: "number",
            // keys and values in `attrs` will be added as
            // <input type="number" min=10 max=100 placeholder="Age"/>
            attrs: {
              min: 10,
              max: 100,
              placeholder: "Age",
            },
            validationMessage: "Age must be between 0-100",
          },
        },
        {
          name: "Stripes",
          editable: {
            input: "select", // renders a default select dropdown as <select class="form-control form-control-sm">...</select>
            options: [
              // `options` is mandatory because `input` is "select"
              "Vertical",
              "Horizontal",
              "Diagonal",
            ],
          },
        },
        {
          name: "Shapes",
          editable: {
            input: "select",
            options: ["Circle", "Crescent", "Triangle", "Stars"],
            attrs: {
              class: "select-example-basic", // To render the dropdown as select2 library dropdown, add class attribute as identifier
              name: "shapes",
            },
          },
        },
        {
          name: "date_col",
          editable: {
            input: "text",
            attrs: {
              // To edit column "date_col" using a date picker widget using "bootstrap-datepicker" library, add class attribute as identifier
              class: "datepicker-example form-control form-control-sm",
            },
          },
        },
      ],
    })
    .on("editmode", function () {
      // turns <select class="select-example-basic">...</select> to select2 dropdown widget
      $(".select-example-basic").select2();
      // turns <input type="text" class="datepicker-example"/> to bootstrap-datepicker calendar widget
      $(".datepicker-example").datepicker({
        format: "dd-mm-yyyy",
        todayHighlight: true,
        autoclose: true,
      });
    });
</script>