The DataTable.vue component is used in Vue pages and Formio forms. The datatable provides common functionality that is used in application forms and administrative pages:

• Data Label - a label for the data being displayed
• Export - selection of how to export the data
• Search Column - how to specify what column of the data should be searched
• Search - entry of the text to use in a search of the data
• Headers - the column headers of the data columns
• Rows - the result data rows
• Rows per page - how many rows to show
• Rows shown - what rows of displayed of the total rows
• Paging - first page, previous page, next page, and last page icons for navigating the results

An example data table:

The DataTable component has three pieces that handle how it is reused:

• /src/views/component/DataTable.vue - The Vue custom component that uses the Vuetify element
• /src/components/datatable/DataTableComponent.js - The Formio custom component that extends Component and renders the HTML element
• /src/views/FormDataTable.vue - Vue wrapper that interfaces with Vue and renders the Vue component in the HTML element

The DataTable.vue component uses a Vuetify component to display the result rows and assist in paging through the results. The component adds the ability to export and search the results. This component is used in the Formio forms within application pages, in Ad Hoc report screens, and in administration screens used to build the custom applications. The simplest uses are in Vue pages such as the AppMaint.vue or ReportBuilder.vue where it is added directly as a component on the page. When using the datatable component in a Formio form it is necessary to provide wrappers that handle the interfacing with both formio and loading the HTML element with a Vue component. Descriptions of those wrappers follow.

The DataTableComponent.js provides a Formio Component extension that provides two important functions:

1. In the FormBuilder it displays the Datatable component as a choice to be included in the form. It also defines the edit dialog that is used to configure the component instance. When saved the configuration is used to create the JSON that will be used when rendering the component in the Formio form.
2. When the component is rendered it provides the HTML element that is displayed:

<v22-datatable id="v22-datatable" class="appfactory-formio-component" elemid="eig77de" elemkey="workRequests" 
               on:formdata-change="onFormDataChange($event)" vce-ready="">
...
</v22-datatable>

The FormDataTable.vue is a component that wraps the DataTable.vue extending its functionality slightly and handling the firing of edit and delete events. The more important role that it plays is it is the component that is rendered when the 'v22-datatable' element is encountered using the vue-custom-element wrapper. The DataTableComponent.js renders the HTML element () and vue-custom-element initializes the FormDataTable component inside of the 'v22-datatable' tags providing the actual FormDataTable component as HTML.

The vue-custom-element package allows a Vue custom component to be used in HTML which is what is required for a Formio custom component. Basically a wrapper is provided for the Vue custom component so that it can be an HTML element which can exist in a Formio form.

Vue-custom-element is a tiny wrapper around Vue components. It provides a seamless way to use Vue components in HTML, plain JavaScript, Vue, React, Angular etc., without manually initialising Vue. It's using power of Web Components' Custom Elements.

Works with
Vue 0.12.x, 1.x and 2.x
Small - 2.7 kb min+gzip, optional polyfill - 5 kb min+gzip

The vue-custom-element package is imported in the main.js and the FormDataTable component is mapped to the 'v22-datatable' element in the call to customElement:

main.js

import vueCustomElement from 'vue-custom-element';
...
Vue.use(vueCustomElement);
Vue.customElement('v22-datatable', {
  ...FormDataTable,
  vuetify: new Vuetify({})
});
...
// override sanitize method to allow custom component html elements
Component.prototype.sanitize = function(dirty) {
  if(dirty.includes('<v22-datatable')
    || dirty.includes('historyNewestToOldest')
    || dirty.includes('appfactoryCustomForm')) {
    return dirty;
  }
  return baseSanitize.call(this, dirty, this.options);
};

The DataTable shows actions icons for edit and delete for each row (see the example data table illustration above). Clicking the icons fires an event which needs to be handled by the parent container taking the appropriate action. When used in a Formio form the action is generally handled by the Application.vue page. In the case of the delete action the deletion is done by the page. In the case of the edit action a check is made for a formeventactions record for the pageform and the appropriate action is taken if a action record is provided.

Removing or hiding the action icons when used in a Formio form is done by selecting the 'Hide Edit Action' and/or 'Hide Delete Action' checkbox in the Data Table Component edit dialog's Display tab when configuring the component in the FormBuilder. This will supress showing the action icons thereby preventing the edit or delete events.

This is illustrated in the Test Datatable page:

In order to add the hide action checkboxes the edit form for the DataTable Component was modified. This was done by creating a Datatable.edit.display.js which defines the custom property fields to be added to the Display tab. The Datatable.form.js does the adding of the custom property fields to the display tab and the DataTableComponent.js replaces the editForm with the updated Datatable.form.

src/components/datatable/editForm/Datatable.edit.display.js

export default [
  {
    type: 'checkbox',
    input: true,
    inputType: 'checkbox',
    key: 'hideEditAction',
    label: 'Hide Edit Action',
    weight: 115,
    tooltip: 'Checking this checkbox will hide and disable the Edit action.',
  },{
    type: 'checkbox',
    input: true,
    inputType: 'checkbox',
    key: 'hideDeleteAction',
    label: 'Hide Delete Action',
    weight: 115,
    tooltip: 'Checking this checkbox will hide and disable the Delete action.',
  }
];

src/components/datatable/Datatable.form.js

var __spreadArrays = (this && this.__spreadArrays) || function () {
  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
  for (var r = Array(s), k = 0, i = 0; i < il; i++)
    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
      r[k] = a[j];
  return r;
};

import nestedComponentForm from 'formiojs/components/_classes/nested/NestedComponent.form';
import DatatableEditDisplay from './editForm/Datatable.edit.display';

export default function () {
  var extend = [];
  for (var _i = 0; _i < arguments.length; _i++) {
    extend[_i] = arguments[_i];
  }
  return nestedComponentForm.apply(void 0, __spreadArrays([[
    {
      key: 'display',
      components: DatatableEditDisplay
    }
  ]], extend));
}

src/components/datatable/DataTableComponent.js

const editForm = require('./Datatable.form').default;
...
static editForm = editForm;