Skip to content

sc-datatables

sc-datatables-field-Example-1-Image-1

1 Purpose

This document is a user guide for the sc-datatables component as of version 5.23.

sc-datatables places a data table field on a form, allowing a form to display a parent document together with its child documents displayed as rows in a data table.

Except for columns defined with "type": "array" or "type": "boolean" or "type": "object":

  • Each column header has a sort button Icon-Table-Column-Header-Sort-Button. Clicking a column header sort button will sort the data table by that column.
  • A data table can be defined to display filter search boxes in the column headers.

sc-datatables is responsive to the size of the window i.e. when displayed on smaller windows, it automatically narrows column widths and/or hides one or more of its table columns, with the exception that column 1 is never hidden. If one or more columns are hidden then a + icon appears in the first column of each row. Clicking a row's + icon will display the hidden column values below the row.

The default responsive behaviour of each table column is dependent on the column order and width:

  • All column widths are subject to narrowing.
  • Column 1 is never hidden.
  • Wider columns are hidden first.

The default responsive behaviour of a column can be overridden by including the optional "responsive" field in its column definition.

The sc-datatables definition provides fields for setting the properties of the entire data table and fields for setting the properties of individual columns within the data table. These fields are fully described below.

 

2 Definition

sc-datatables is defined by a set of name/value pair fields consisting of:

  • Required system fields
  • Required customizable fields
  • Optional customizable fields

Note:

  1. Default values for the fields described in the tables below are shown in bold text.
  2. Fields for setting the properties of the entire data table are fully described in section 2.1 Root Level Fields.
  3. Fields for setting the properties of the individual columns within the data table are fully described in section 2.2 gridColumns Field.

2.1 Root Level Fields

This section lists and describes the root level fields for defining the properties of the entire data table.

2.1.1 Required System Fields

Field Valid Values Description
componentName sc-datatables The component name.
Example: "componentName": "sc-datatables"

2.1.2 Required Customizable Fields

Field Valid Values Description
filter elastic search query An Elasticsearch query for selecting the child documents to display as rows in the data table.
Example:
"filter": "{'query':{'bool':{'must':[{'term':{'appTags':'acceptanceTestDataScDatatables'}},{'term':{'systemHeader.systemType':'document'}}, {'term':{'customerPhoneCall.documentId':'{{document.documentId}}'}}],'must_not':[],'should':[],'minimum_should_match':1}}}"
gridColumns Array of column definitions An array of column definitions, each defining the properties of a data table column. Each column definition is a set of name/value pair fields, some being required, some being optional.
Section 2.2 gridColumns Field lists and describes the name/value pair fields for defining the properties of a data table column.
name Any value written in camel case The name of the data table field in the document and database.
Example: "name": "testScDatatables"

2.1.3 Optional Customizable Fields

Field Valid Values Description
allSelect Use in conjunction with the "multiSelect" field.
true Show the data table "Select All" button on the form.
If "multiSelect": true, clicking the "Select All" button will select all rows on all pages and change the button label to "Unselect All".
Upon selecting all rows, clicking individual rows will deselect them, leaving the other rows as selected.
Clicking the "Unselect All" button will deselect all rows on all pages and change the button label to "Select All".
If "multiSelect": false, clicking the "Select All" button will display the message 'multiSelect' option must be set to true.
Example: "allSelect": true
false Default value. Do not show the "Select All" button on the form.
columnSearch true Except for columns defined with "type": "array" or "type": "boolean" or "type": "date" or "type": "object", add a filter search box to the column header.
Only those rows having the values entered into one or more column filter search boxes will be displayed.
Example: "columnSearch": true
false Default value. Do not add a filter search box to any column header.
delayBeforeCallNum An integer value The timeout delay in milliseconds when performing a search.
Example: "delayBeforeCallNum": 300
200 Default value.
disableAutoDisplay Use in conjunction with the "multiSelect" field.
true Do not display the document of the selected row under the data table, regardless of the "multiSelect" field value.
Example: "disableAutoDisplay": true
false Default value.
If "multiSelect": false, display the document of the selected row under the data table. On selecting a row, clicking it again will deselect it and remove the display of its document from under the data table.
If "multiSelect": true, the document of a selected row does not display under the data table.
disableSave true Selecting a data table row does not trigger the Save icon to flash.
Exiting the form without saving does not trigger a warning message to display.
Example:"disableSave": true
false Default value. Selecting a data table row does trigger the Save icon to flash.
Exiting the form without saving does trigger a warning message to display.
Saving the document will save the selected data table row(s) to the database. If "selectOnLoad": true, then on reload the saved selected data table row(s) will be re-highlighted.
enableColumnMoving true Enables column moving for all columns of the data table.
Example: "enableColumnMoving": true
false Default value. Disables column moving for all columns of the data table.
enableColumnResizing true Enables column resizing for all columns of the data table.
Example: "enableColumnResizing": true
false Default value. Disables column resizing for all columns of the data table.
enforceWidth false Do not enforce proportional width column settings. Instead determine columns widths by the length of their data values.
Example: "enforceWidth": false
true Default value. Proportional width column settings are enforced and long data values may wrap.
exportTypes Array of export types The allowable export type values are 'Copy', 'CSV', 'Excel' and 'PDF'. Any other values will be ignored. Note:
    • The values are case-insensitive.
    • The values will display as buttons above the data table.
    • The array can contain 0 to 4 values in any order.
    • The order of array values defines the button order from left to right.
    • An empty array or a single empty string in the array is treated as no export options.
    • Clicking the 'Copy' button copies the data table to the clipboard.
    • Clicking the 'CSV' button saves the data table as a CSV file.
    • Clicking the 'Excel' button saves the data table as a XLSV file.
    • Clicking the 'PDF' button saves the data table as a PDF file.
Example:
"exportTypes": [
      "Copy",
      "CSV",
      "Excel",
      "PDF"
]
Defaults to an empty array and hence no export options. No export buttons are displayed above the data table.
forcePageInfo false Do not display page information at the bottom of the data table when there is less than one page of data.
Note: Regardless of the "forcePageInfo" value, when there is more than one page of data, page information will always display at the bottom of the data table.
Example: "forcePageInfo": false
true Default value. Display page information at the bottom of the data table when there is less than one page of data.
fullWidth true Display the data table full width on the form. Recommend displaying data tables full width.
Example: "fullWidth": true
false Default value. Do not display the data table full width on the form.
hideNoData true Hide the data table if the "filter" field returns no data.
Example: "hideNoData": true
false Default value. Do not hide the data table if the "filter" field returns no data.
label Any value The name of the data table field on the form i.e. the field label.
Example: "label": "Test sc-datatables"
Defaults to the data table field displays without a field label on the form.
lengthMenu Array of integers Defines the data table "Show" drop down field values, allowing the user to select the number of data table rows displayed per page.
Example:
"lengthMenu": [
      "5",
      "10",
      "25",
      "50"
]
When defined as a 2 dimensional array, the 1st array lists the integer values for the number of rows per page, whereas the 2nd array lists how to display these integer values in the data table "Show" drop down field.
Example:
"lengthMenu": [
    [
         "5",
         "10",
         "25",
         "50"
    ],
    [
         "Five",
         "Ten",
         "Twenty Five",
         "Fifty"
   ]
]
Defaults to:
"lengthMenu": [
      "10",
      "25",
      "50",
      "100"
]
noChildDocLink true When a document selected from the data table is displayed under the data table, disable the hyperlink to the document.
Example: "noChildDocLink": true
false Default value. When a document selected from the data table is displayed under the data table, enable the hyperlink to the document.
multiSelect true Enables the selection of multiple rows.
Example: "multiselect": true
false Default value. Enables the selection of only one row.
pageSelect Use in conjunction with the "multiSelect" field.
true Show the data table "Select Page" button on the form.
If "multiSelect": true, clicking the "Select Page" button will select all rows on the page and change the button label to "Unselect Page".
Upon selecting all rows on a page, clicking individual rows will deselect them, leaving the other rows as selected.
Clicking the "Unselect Page" button will deselect all rows on the page and change the button label to "Select Page".
If "multiSelect": false, clicking the "Select Page" button will display the message 'multiSelect' option must be set to true.
Example: "pageSelect": true
false Default value. Do not show the "Select Page" button on the form.
refreshInterval any integer Sets the number of seconds to re-run the "filter" field query for an automatic reload/refresh of the data table.
Example: "refreshInterval": 60
0 Default value. No automatic reload/refresh of the data table occurs.
rowsPerPage Any integer The number of data table rows to display per page.
Example: "rowsPerPage": 5
10 Default value. Displays 10 data table rows per page.
searchOptions A set of name value pairs Each name value pair defines the name and value of a search option. The currently available search option is:
"searchOfflineOnly": true forces the "filter" field query to query the device's offline database. Defaults to "searchOfflineOnly": false
Example:
"searchOptions": {
      "searchOfflineOnly": true
   }
selectOnLoad true On reload re-highlight any saved selected row(s).
Example: "selectOnLoad": true
false Default value. On reload do not re-highlight any saved selected row(s).
showHeadings false Do not display the data table column headings.
Example: "showHeadings": false
true Default value. Display the data table column headings.
showReload true Show the data table "Reload" button on the form, which when clicked, reloads the data table in the default sort order (if specified by the column definitions).
Example: "showReload": true
false Default value. Do not show the data table "Reload" button on the form.
showSearch The data table search box provides the ability to search for a value within the entire data table, resulting in the data table displaying only those rows containing the value.
false Do not show the data table search box.
Example: "showSearch": false
true Default value. Show the data table search box.
showSelected The data table "Items" and "Rows selected" fields respectively display a count of the total number of data table rows and of the number of rows selected. These two count fields are located under the data table.
false Do not show the data table "Items" and "Rows selected" count fields.
Example: "showSelected": false
true Default value. Show the data table "Items" and "Rows selected" count fields.
template Places a drop down list of child document templates below the data table. Each template provides the ability to create a child document for the current parent document displayed on the form.
Selecting a template will display its fields under the data table allowing the details of a new child document to be entered and saved. On save, the form displays the current parent document with the new child document added as row in the data table.
Provides the ability to:
    • Specify the template Id for each child document template.
    • Specify the display name for each child document template.
    • Map a child document template field to a parent document field. This will default the child document template field value to the parent document field value.
    • Show/hide a child document template in the drop down list (Defaults to "visible": true) .
Example:
For a form showing customer fields (e.g. name, address, etc) and each phone call with the customer shown as a row in a data table.
    • The parent document would contain the customer fields.
    • Each child document would contain fields for a phone call with the customer.
    • Including this "template" field in the sc-datatable definition allows a new phone call with the customer to be added as a row in the data table.
An array of templates "template": [
   {
      "templateId": "07482740-7f3a-11e8-ba75-4d138b997968"
      "name": "New Phone Call",
      "default": {
         "customerPhoneCall": "documentId",
         "customerId": "customerId"
      },
   },
]
templateTarget Defines how to display the template selected from the drop down list of templates.
overlay Display the selected template in a modal dialog overlaying the current window.
Example: "templateTarget": "overlay"
currentWindow Default value. Display the selected template below the data table.
visible false The data table is not visible on the form.
Example: "visible": false
true Default value. The data table is visible on the form.

 

2.2 gridColumns Field

The "gridColumns" field referred to in section 2.1.2 Required Customizable Fields is an array of column definitions, each defining the properties of a data table column.

This section lists and describes the fields for defining the properties of a data table column

2.2.1 Required System Fields

Field Valid Values Description
field A data source field name The name of the child document field whose value is to be displayed in a data table column.
If a field does not exist in the child document then the template variable will be replaced by an empty string.
Example: "field": "callDateTime"
Below are examples of how to reference an array field value:
"field": "callOperators.name"
"field" : "assetLocation.features[0].properties.suburb"

2.2.2 Optional Customizable Fields

Field Valid Values Description
cellFilter Used in conjunction with the "filter" field defined as "filter": "dateFilter" or "filter":"numericFilter"
Valid date format Defines the date/time display format to apply to each cell of a column defined with "filter": "dateFilter".
Example: "cellFilter": "date:'dd/MM/yyyy hh:mm:ss a'"
Example: "cellFilter": "date:'MMM d yyyy hh:mm:ss a'"
Example: "cellFilter": "date:'medium'"
Note: The last two examples produce the same display format e.g. Feb 2, 2017 12:22:11 PM
dd/MM/yyyy hh:mm:ss a Defaults to "cellFilter": "date:'dd/MM/yyyy hh:mm:ss a'".
Valid numeric format Defines the numeric display format to apply to each cell of a column defined with "filter": "numericFilter".
For a full list of valid numeric formats, refer to those listed for the "format" field in the sc-numeric component Guide.
Example: To display numeric values with no commas, no decimal places, rounded to the nearest integer, use:
"cellFilter": "0"
Example: To display as currency, prefix with $, display commas, 2 decimal places, rounded, use:
"cellFilter": "$0,0.00"
Example: To display as a percentage, 2 decimal places, rounded, use:
"format": "0.00%"
Defaults to display the value as saved in the database.
cellTemplate Valid HTML A custom template for styling each cell of an individual column.
Example:
Bold the contents of the column displaying "callCategory" field values.
"cellTemplate": "<div class=\"beBold\" > <strong>{{row.callCategory}} </strong></div>"
Example:
Display an address elements from a geoJSON field
"cellTemplate": "{{row.locationGeo.features[0].properties.streetNo}} {{row.locationGeo.features[0].properties.street}}, {{row.locationGeo.features[0].properties.suburb}}, {{row.locationGeo.features[0].properties.postcode}}"
displayName Any value The name to display as the column header.
Example: "displayName": "Call Date & Time"
Child document field name Defaults to the name of the child document field.
enableColumnMoving false Disable moving on an individual column when column moving is enabled for the entire data table.
Example: "enableColumnMoving": false
true Enable moving on an individual column when column moving is disabled for the entire data table.
Defaults to the "enableColumnMoving" value defined for the entire data table.
enableColumnResizing false Disable resizing on an individual column when column resizing is enabled for the entire data table.
Example: "enableColumnResizing": false
true Enable resizing on an individual column when column resizing is disabled for the entire data table.
Defaults to the "enableColumnResizing" value defined for the entire data table.
filter Use to specify a filter on an individual column.
dateFilter Display date/time values in local time.
Example: "filter": "dateFilter"
arrayFilter Display all values when a field has an array of values.
Example: "filter": "arrayFilter"
numericFilter Used in conjunction with "cellFilter" to format a column displaying numerics. The "cellFilter" is used to set the format, the default format being "0,0".
href Used to specify the hyperlink address when column values are displayed as a hyperlink. The hyperlink address can be an absolute URL, a relative URL, an email address or a phone number.
Used in conjunction with:
    • "type": "url" to display column values as a hyperlink.
    • "urlOpenIn" to define how a URL hyperlink address should open.
hyperlink specification The hyperlink can specify a relative url, http, https, mailto:, tel:
The hyperlink can contain {{{ }}} handlebar references to variables in the document linked to the selected row.
Examples:
"href": "/#/form/{{{documentId}}}"
"href": "/#/form/{{{assignee.0.documentId}}}"
"href": "https://comp-dev.formbird.com/#/form/{{{systemHeader.templateId}}}"
"href": "tel:{{{followUpEmail}}}"
"href": "tel:{{{followUpNumber}}}"
responsive An array of 4 name value pairs Used to override the default responsive behaviour of a table column when displayed on smaller windows.
See section 1 Purpose for a description of responsive behaviour.
The 4 name value pairs define the responsive behaviour of the column when displayed on extra small ("xs"), small ("sm"), medium ("md") and large ("lg") windows.
Example:
For a column with "width": 2, as windows get smaller, maintain its proportional width and if required hide the column on extra small windows.
"responsive": {
      "xs": 0,
      "sm": 2,
      "md": 2,
      "lg": 2
   }
Example:
For a column with "width": 3, as windows get smaller, reduce its proportional width and if required hide the column on small and extra small windows.
"responsive": {
      "xs": 0,
      "sm": 0,
      "md": 2,
      "lg": 3
   }
Default value for 1st column with"width": 2:
"responsive": {
      "xs": 2,
      "sm": 2,
      "md": 2,
      "lg": 2
   }
Default value for a non first column with"width": 1:
"responsive": {
      "xs": 0,
      "sm": 1,
      "md": 1,
      "lg": 1
   }
Default value for a non first column with"width": 2:
"responsive": {
      "xs": 0,
      "sm": 0,
      "md": 2,
      "lg": 2
   }
Default value for a non first column with"width": 3:
"responsive": {
      "xs": 0,
      "sm": 0,
      "md": 0,
      "lg": 3
   }
Default value for a non first column with"width": >3:
"responsive": {
      "xs": 0,
      "sm": 0,
      "md": 0,
      "lg": >3
   }
sort Use to specify the default sort direction and precedence of a column.
Valid values for sort direction are "asc" and "desc".
Valid values for precedence are integers, to indicate sort first by the column with precedence 1, then by the column with precedence 2, and so on.
Example:
"sort": {
      "direction": "asc",
      "precedence": 1
   },
Note:
• Clicking a column will clear all column default sort orders and sort by that column.
• The "sort" field is ignored for columns defined with "type": "array" or "type": "boolean" or "type": "object".
type The data type of the column. Used in sorting.
If not provided then the data table will guess the type.
Useful if the data table guessing is not satisfactory.
boolean Example: "type": "boolean"
date Example: "type": "date"
number Example: "type": "number"
object Example: "type": "object"
string Example: "type": "string"
url Used in conjunction with the "href" and "urlOpenIn" fields to set a hyperlink on the column values.
Example: "type": "url"
urlOpenIn Used in conjunction with the "type", "url" and "href" fields to set a hyperlink on the column values.
newWindow Opens a URL hyperlink in a new window.
Example: "urlOpenIn": "newWindow"
overlay Opens a URL hyperlink in a modal dialog overlaying the current window.
Example: "urlOpenIn": "overlay"
currentWindow Default value. Opens a URL hyperlink in the current window.
Example: "urlOpenIn": "currentWindow"
visible false The column is not visible.
Example: "visible": false
true Default value. The column is visible.
Note: If the entire data table is set as "visible": false, then no column is visible irrespective of the value of this field.
width Numeric Display the column width as a proportion of the total width.
Example: "width": 2
If the width values of 4 columns are defined as 1, 1, 2 and 1 respectively, then:
Columns 1, 2, & 4 are of equal width, each being 1/5 of the total width.
Column 3 width is double the width of column 1, being 2/5 of the total width.
1 Default value.

 

3 Typical sc-datatables Definition

Below is a typical sc-datatables definition, defined with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-datatables",
            "name": "testScDatatables",
            "label": "Phone Calls with Customer",
            "columnSearch":true,
            "enableColumnResizing": true,
            "enableColumnMoving": true,
            "filter": "{'query':{'bool':{'filter':[{'term':{'appTags':'acceptanceTestDataScDatatables'}},{'term':{'systemHeader.systemType':'document'}}, {'term':{'customerPhoneCall.documentId':'{{document.documentId}}'}}],'must_not':[],'should':[],'minimum_should_match':1}}}",
            "fullWidth":true,
            "gridColumns": [
                {
                    "displayName": "Call Description",
                    "field": "systemHeader.summaryName",
                    "href": "/#/form/{{{documentId}}}",
                    "type": "url",
                    "urlOpenIn": "newWindow",
                    "width": 3
                },
                {
                    "displayName": "Call Date & Time",
                    "field": "callDateTime",
                    "cellFilter": "date:'dd/MM/yyyy hh:mm a'",
                    "filter": "dateFilter",
                    "sort": {
                        "direction": "desc",
                        "precedence": 1
                    },
                    "type": "date",
                    "width": 2,
                },
                {
                    "displayName": "Handled By",
                    "field": "callOperators.name",
                    "filter": "arrayFilter",
                    "type": "array",
                    "width": 2
                },
                {
                    "displayName": "Call Duration (mins)",
                    "field": "callDuration",
                    "type": "number",
                    "width": 1
                },
                {
                    "displayName": "Follow Up?",
                    "field": "followUp",
                    "type": "boolean",
                    "width": 1
                },
                {
                    "width": 1,
                    "field": "followUpEmail",
                    "displayName": "Follow Up Email",
                    "type": "string"
                }
            ],
            "showReload":true
        }

One or more of the optional customizable fields below can be included in the above definition should a value other than their default value be required.
Note: Some fields below show more than one example e.g. "lengthMenu", "cellFilter",

ROOT LEVEL OPTIONAL CUSTOMIZABLE FIELDS:
            "allSelect": true,
            "delayBeforeCallNum": 300,
            "disableAutoDisplay": true,
            "disableSave": true,
            "enforceWidth": false,
            "exportTypes": [
                "Copy",
                "CSV",
                "Excel",
                "PDF"
            ],
            "hideNoData": true,

            "lengthMenu": [
                "5",
                "10",
                "25",
                "50"
            ],

            "lengthMenu": [
                [
                    "5",
                    "10",
                    "25",
                    "50"
                ],
                [
                    "Five",
                    "Ten",
                    "Twenty Five",
                    "Fifty"
                ]
            ],

            "forcePageInfo": false,
            "noChildDocLink": true,
            "pageSelect": true,
            "refreshInterval": 60,
            "rowsPerPage": 5,
            "selectOnLoad": true,
            "showHeadings": false,
            "showSearch": false,
            "showSelected": false,
            "template": [
                {
                    "name": "New Phone Call",
                    "templateId": "07482740-7f3a-11e8-ba75-4d138b997968",
                    "default": {
                        "customerPhoneCall": "documentId",
                        "customerId": "customerId"
                    }
                }
            ],
            "templateTarget": "overlay",
            "visible":false,


GRIDCOLUMNS OPTIONAL CUSTOMIZABLE FIELDS:
           "cellFilter":"date: 'dd/MM/YY'",
           "cellFilter": "date:'medium'",
           "cellTemplate": "<div class=\"beBold\" > <strong>{{row.callCategory}} </strong></div>",
            "enableColumnResizing": false,
            "enableColumnMoving": false,
            "responsive": {
                "xs": 0,
                "sm": 0,
                "md": 2,
                "lg": 3
            }
            "visible":false,

 

4 Examples

Example 1

sc-datatables defined with the typically needed fields plus:

  1. The following root level optional fields:

    • "allSelect"
    • "exportTypes"
    • "lengthMenu"
    • "rowsPerPage"
    • "template"
    • "templateTarget"
  2. The following optional fields defined for the "Call Description" column:

    • "urlOpenIn"
  3. The following optional fields defined for the "Call Category" column:

    • "cellTemplate"
  4. The following optional fields defined for the "Call Date & Time" column:

    • "cellFilter"
    • "filter"
  5. The following optional fields defined for the "Handled By" column:

    • "enableColumnResizing"
    • "enableColumnMoving"
    • "filter"
    • "responsive"
        {
            "componentName": "sc-datatables",
            "name": "testScDatatables",
            "label": "Phone Calls with Customer",
            "allSelect":true,
            "noChildDocLink": true,
            "columnSearch":true,
            "enableColumnResizing": true,
            "enableColumnMoving": true,
            "exportTypes": [
                "Copy",
                "CSV",
                "Excel",
                "PDF"
            ],
            "filter": "{'query':{'bool':{'must':[{'term':{'appTags':'acceptanceTestDataScDatatables'}},{'term':{'systemHeader.systemType':'document'}}, {'term':{'customerPhoneCall.documentId':'{{document.documentId}}'}}],'must_not':[],'should':[],'minimum_should_match':1}}}",
            "fullWidth":true,
            "gridColumns": [
                {
                    "displayName": "Call Description",
                    "field": "systemHeader.summaryName",
                    "type": "url",
                    "width": 3,
                    "href": "/#/form/{{{documentId}}}",
                    "urlOpenIn": "overlay"
                },
                {
                    "displayName": "Call Date & Time",
                    "field": "callDateTime",
                    "width": 2,
                    "type": "date",
                    "cellFilter": "date:'dd/MM/yyyy hh:mm:ss a'",
                    "filter": "dateFilter",
                    "sort": {
                        "direction": "desc",
                        "precedence": 1
                    }
                },
                {
                    "displayName": "Handled By",
                    "field": "callOperators.name",
                    "width": 2,
                    "responsive": {
                        "xs": 0,
                        "sm": 0,
                        "md": 2,
                        "lg": 3
                    },
                    "filter": "arrayFilter",
                    "enableColumnResizing": false,
                    "enableColumnMoving": false
                },
                {
                    "field": "callCategory",
                    "width": 1,
                    "cellTemplate": "<div class=\"beBold\" > <strong>{{row.callCategory}} </strong></div>",
                    "displayName": "Call Category"
                },
                {
                    "displayName": "Call Duration (mins)",
                    "field": "callDuration",
                    "width": 1,
                    "type": "number"
                },
                {
                    "displayName": "Follow Up?",
                    "field": "followUp",
                    "type": "boolean",
                    "width": 1
                },
                {
                    "displayName": "Follow Up Number",
                    "field": "followUpNumber",
                    "type": "url",
                    "width": 1,
                    "href": "tel:{{{followUpNumber}}}"
                },
                {
                    "href": "mailto:{{{followUpEmail}}}",
                    "width": 1,
                    "type": "url",
                    "field": "followUpEmail",
                    "displayName": "Follow Up Email"
                }
            ],
            "lengthMenu": [
                    "5",
                    "10",
                    "25",
                    "50"
            ],
            "rowsPerPage": 5,            
            "selectOnLoad": true,
            "showReload":true,
            "template": [
                {
                    "name": "New Phone Call",
                    "templateId": "07482740-7f3a-11e8-ba75-4d138b997968",
                    "default": {
                        "customerPhoneCall": "documentId",
                        "customerId": "customerId"
                    }
                }
            ],
            "templateTarget": "overlay"
        }

Resulting field on the form:

sc-datatables-field-Example-1-Image-1

Resulting field on the form after selecting a row:

Image to be added

Resulting field in the document and database after saving the selected row:

    "testScDatatables": [
        {
            "documentId": "f87e2500-806c-11e8-8e51-d53c77fc8a85",
            "name": "Outgoing Call (Customer 1): Sat Jul 07 2018 02:04:04 GMT+1000 (AEST)"
        }
    ],

 

Example 2

The images below illustrate the responsive behaviour sc-datatables. I.e. when displayed on smaller windows, the table shown in Example 1 automatically narrows column widths and/or hides one or more of its table columns, with the exception that column 1 is never hidden. If one or more columns are hidden then a + icon appears in the first column of each row. Clicking a row's + icon will display the hidden column values below the row.

Responsive behaviour on a smaller device:

Columns widths are narrowed and the "Call Date & Time" and "Handled By" columns are hidden.

sc-datatables-field-Example-2-Image-1

Clicking a row's expand icon Icon-Expand-Data-Table-Row will display its hidden column values below the row.

sc-datatables-field-Example-2-Image-2

Then clicking a row's collapse icon Icon-Collapse-Data-Table-Row will remove the display of it's hidden column values.

Responsive behaviour on an even smaller device:

All columns except the first are hidden.

sc-datatables-field-Example-2-Image-3

Clicking a row's Icon-Expand-Data-Table-Row icon will display its hidden column values below the row.

sc-datatables-field-Example-2-Image-4

Then clicking a row's collapse icon Icon-Collapse-Data-Table-Row will remove the display of it's hidden column values.