DataTable

This component is **deprecated** and will be removed in following versions.

WARNING: table is storing changes made by user (show/hide columns, order changes, filters, etc.) in the browser local storage. That values will take precedence over table html definition. For example: if a ID column is not in the visible-columns attribute but the user has chosen to display it manually, it will be visible in future loads. For restoring initial state is enough to delete it DataTables entries in browser local storage.

Table buttons

Example

<o-datatable attr="customers" entity="ECustomers" title="CUSTOMERS"
  columns="CUSTOMERID;PHOTO;NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  visible-columns="PHOTO;NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  editable-columns="NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  sort-columns="SURNAME" keys="CUSTOMERID" parent-keys="n:NAME;CUSTOMERTYPEID"
  query-on-init="true" query-rows="6" quick-filter="yes" insert-table="yes">

  <o-datatable-button label="My button" icon="account_circle"></o-datatable-button>

  <o-datatable-column attr="NAME" title="NAME"></o-datatable-column>
  ...
</o-datatable>

Typescript code

  ...
  import { ODataTableButtonComponent } from 'ontimize-web-ngx';
  ...
  @ViewChild('myButton')
  protected myButton: ODataTableButtonComponent;
  ...
  ngAfterViewInit() {
    this.myButton.click.subscribe(event => {
      alert('my button click');
    });
  }

Table options

Example

<o-datatable attr="customers" entity="ECustomers" title="CUSTOMERS"
  columns="CUSTOMERID;PHOTO;NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  visible-columns="PHOTO;NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  editable-columns="NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  sort-columns="SURNAME" keys="CUSTOMERID" parent-keys="n:NAME;CUSTOMERTYPEID"
  query-on-init="true" query-rows="6" quick-filter="yes" insert-table="yes">

  <o-datatable-option #myOption label="My option" icon="account_circle" icon-position="after"></o-datatable-option>

  <o-datatable-column attr="NAME" title="NAME"></o-datatable-column>
  ...
</o-datatable>

Typescript code

  ...
  import { ODataTableOptionComponent } from '';
  ...
  @ViewChild('myOption')
  protected myOption: ODataTableOptionComponent;
  ...
  ngAfterViewInit() {
    this.myOption.click.subscribe(event => {
      alert('my option click');
    });
  }

Columns

Using default renderer (o-datatable-cell-renderer-string) if column attr is present in visible-columns attribute from its parent o-datatable directive. In the same way, using the defualt editor (o-datatable-cell-editor-string) if column attr is contained in the editable-columns attribute from its parent o-datatable.

If o-datatable directive contains inner o-datatable-column elements, using renderers and editors defined on them.

Example

<o-datatable attr="customers" entity="ECustomers" title="CUSTOMERS"
  columns="CUSTOMERID;PHOTO;NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  visible-columns="PHOTO;NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  editable-columns="NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  sort-columns="SURNAME" keys="CUSTOMERID" parent-keys="n:NAME;CUSTOMERTYPEID"
  query-on-init="true" query-rows="6" quick-filter="yes" insert-table="yes">

  <o-datatable-column attr="PHOTO" orderable="no" searchable="no" type="image"
    image-type="base64" empty-image="assets/images/no-image.png" avatar="yes">
  </o-datatable-column>

  <o-datatable-column attr="NAME" title="NAME"></o-datatable-column>

  <o-datatable-column attr="STARTDATE" title="STARTDATE" type="date"
    format="MM/DD/YYYY HH:mm:ss">
  </o-datatable-column>

  <o-datatable-column attr="CUSTOMERTYPEID" title="TYPE" editable="true">
    <o-datatable-cell-renderer-service entity="ECustomerTypes"
      value-column="CUSTOMERTYPEID"
      columns="CUSTOMERTYPEID;DESCRIPTION" visible-columns="DESCRIPTION">
    </o-datatable-cell-renderer-service>
    <o-datatable-cell-editor-combo entity="ECustomerTypes"
      value-column="CUSTOMERTYPEID" separator=" - "
      columns="CUSTOMERTYPEID;DESCRIPTION"
      visible-columns="CUSTOMERTYPEID;DESCRIPTION">
    </o-datatable-cell-editor-combo>
  </o-datatable-column>

  <o-datatable-column attr="BOOLEAN" title="BOOLEAN" type="boolean"
    true-value-type="string" true-value="YES"
    false-value-type="icon" false-value="not_interested">
  </o-datatable-column>

  <o-datatable-column attr="INTEGER" title="INTEGER" type="integer" grouping="yes"
    thousand-separator=".">
  </o-datatable-column>

  <o-datatable-column attr="REAL" title="REAL" type="real" grouping="yes"
    thousand-separator="." decimal-separator="," decimal-digits="4">
  </o-datatable-column>

  <o-datatable-column attr="CURRENCY" title="CURRENCY" type="currency"
    currency-symbol="€" currency-symbol-position="right" grouping="yes"
    thousand-separator="." decimal-separator="," decimal-digits="2">
  </o-datatable-column>

</o-datatable>

Renderers

Specifies how to render a column cell content. A table column has the attribute type that indicates how its cells will be rendered.

For example:

<o-datatable-column attr="PHOTO" orderable="no" searchable="no" type="image"
  image-type="base64" empty-image="assets/images/no-image.png" avatar="yes">
</o-datatable-column>

It would be equivalent to define:

<o-datatable-column attr="PHOTO" orderable="no" searchable="no">
  <o-datatable-cell-renderer-image image-type="base64"
    empty-image="assets/images/no-image.png" avatar="yes">
  </o-datatable-cell-renderer-image>
</o-datatable-column>

Default renderers

The o-datatable component provides default renderers you can include in your application.

Cell renderer: string

The o-datatable-cell-renderer is the default renderer.

Cell renderer: boolean

The o-datatable-cell-renderer-boolean renders a boolean value into the table cell.

Cell renderer: real

The o-datatable-cell-real-boolean renders a real value into the table cell.

Cell renderer: currency

The o-datatable-cell-currency-boolean renders a real value formated and with a currency symbol into the table cell.

Cell renderer: date

The o-datatable-cell-date-boolean renders a date value into the table cell.

Cell renderer: image

The o-datatable-cell-image-boolean renders a image into the table cell.

Cell renderer: service

The o-datatable-cell-service-boolean gets the values to render from a service.

Cell renderer: action

The o-datatable-cell-action-boolean is a special renderer that allows the insertion of columns for handling some kind of action to be excecuted over the entire row: go to detail, edit, delete, etc.

IMPORTANT: o-datatable-column directives including this renderer must not have a attr attribute, because its not rendering a cell value.

  <o-datatable attr="customers" entity="ECustomers" title="CUSTOMERS" 
    columns="CUSTOMERID;SURNAME;NAME;STARTDATE;ADDRESS;EMAIL;CUSTOMERTYPEID;PHOTO;LATITUDE;LONGITUDE" 
    visible-columns="PHOTO;NAME;SURNAME;ADDRESS;STARTDATE;EMAIL;CUSTOMERTYPEID;LATITUDE;LONGITUDE" 
    editable-columns="NAME;SURNAME;ADDRESS;STARTDATE;EMAIL;LATITUDE;LONGITUDE" 
    sort-columns="SURNAME" keys="CUSTOMERID" 
    query-on-init="true" query-rows="10" quick-filter="yes" 
    insert-table="yes" detail-mode="none" edit-on-focus="no">

    <o-datatable-column>
      <o-datatable-cell-renderer-action action="detail" render-type="button" render-value="DETAIL"></o-datatable-cell-renderer-action>
    </o-datatable-column>

    <o-datatable-column attr="PHOTO" orderable="no" searchable="no"type="image" image-type="base64" avatar="yes" empty-image="assets/images/no-image.png"></o-datatable-column>

    <o-datatable-column attr="NAME" title="NAME"></o-datatable-column>

    <o-datatable-column attr="SURNAME" title="SURNAME"></o-datatable-column>

    <o-datatable-column attr="ADDRESS" title="ADDRESS"></o-datatable-column>

    <o-datatable-column attr="STARTDATE" title="STARTDATE" type="date" format="LL" date-model-type="string" date-model-format="YYYY-MM-DD HH:mm:ss"></o-datatable-column>

    <o-datatable-column attr="EMAIL" title="EMAIL"></o-datatable-column>

    <o-datatable-column attr="CUSTOMERTYPEID" title="CUSTOMERTYPEID" editable="true">
      <o-datatable-cell-renderer-service entity="ECustomerTypes" value-column="CUSTOMERTYPEID" columns="CUSTOMERTYPEID;DESCRIPTION" visible-columns="DESCRIPTION"></o-datatable-cell-renderer-service>
      <o-datatable-cell-editor-combo entity="ECustomerTypes" value-column="CUSTOMERTYPEID" columns="CUSTOMERTYPEID;DESCRIPTION" visible-columns="DESCRIPTION"></o-datatable-cell-editor-combo>
    </o-datatable-column>

    <o-datatable-column attr="LATITUDE" title="LATITUDE" type="real" grouping="no" decimal-separator="," decimal-digits="6"></o-datatable-column>

    <o-datatable-column attr="LONGITUDE" title="LONGITUDE" type="real" grouping="no" decimal-separator="," decimal-digits="6"></o-datatable-column>

    <o-datatable-column>
      <o-datatable-cell-renderer-action action="edit"></o-datatable-cell-renderer-action>
    </o-datatable-column>

    <o-datatable-column>
      <o-datatable-cell-renderer-action action="delete"></o-datatable-cell-renderer-action>
    </o-datatable-column>

  </o-datatable>

Custom renderer

To create a custom renderer is necessary to create a component implementing the ITableCellRenderer interface or extending another renderer component.

interface ITableCellRenderer {
  init(parameters: any);
  render(cellData: any, rowData: any): string;
  handleCreatedCell(cellElement: any, rowData: any);
}

init(parameters: any): used for initialization from ODataTableColumn in default renderers (passing o-datatable-column attributes to renderer). It is not necesary to implement in the renderers, initialization should be done in constructor or in ngOnInit method.
render(data: any): string: code for rendering received data.
handleCreatedCell(cellElement: any, rowData: any): this method receives cell HTML code. Useful for registering event listeners over that code.

For example: movement-types-cell-renderer.component.ts

import { Component, Inject, forwardRef } from '@angular/core';
import { ITableCellRenderer, ODataTableColumnComponent } from 'ontimize-web-ngx';

@Component({
  selector: 'movement-types-cell-renderer',
  template: ''
})
export class MovementTypesCellRendererComponent implements ITableCellRenderer {

  constructor(@Inject(forwardRef(() => ODataTableColumnComponent))
    tableColumn: ODataTableColumnComponent) {

    tableColumn.registerRenderer(this);
  }

  public init(parameters: any) {
    // nothing to initialize here
  }

  public render(cellData: any, rowData: any): string {
    return (typeof(cellData) !== 'undefined') ?
      ('<md-icon class="material-icons">filter_' +
      String(cellData) + '</md-icon>') : '';
  }

  public handleCreatedCell(cellElement: any, rowData: any) {
    // nothing to do here
  }

}

Using example

WARNING: do not forget to include MovementTypesCellRendererComponent in the component directives

<o-datatable entity="EMovements" title="MOVEMENTS" keys="MOVEMENTID"
  columns="MOVEMENTID;CONCEPT;MOVEMENTTYPEID" parent-keys="ACCOUNTID"
  visible-columns="CONCEPT;MOVEMENTTYPEID"  detail-form-route="transactions"
  query-on-init="false" query-rows="6" quick-filter="yes">

  <o-datatable-column attr="CONCEPT" title="CONCEPT"></o-datatable-column>

  <o-datatable-column attr="MOVEMENTTYPEID" title="MOVEMENTTYPES" type="integer">
    <movement-types-cell-renderer></movement-types-cell-renderer>
  </o-datatable-column>

</o-datatable>

Editors

As in the cell renderers, a column can have an type attribute indicating which editor will be used for its value edition.

For example:

<o-datatable-column attr="DATE_" title="DATE_" editable="yes" type="date" format="LL"
  date-model-type="string" date-model-format="YYYY-MM-DD HH:mm:ss">
</o-datatable-column>

It would be equivalent to define:

<o-datatable-column attr="DATE_" title="DATE_" editable="yes">

  <o-datatable-cell-renderer-date format="LL"></o-datatable-cell-renderer-date>

  <o-datatable-cell-editor-date date-model-type="string" date-model-format="YYYY-MM-DD HH:mm:ss">
  </o-datatable-cell-editor-date>

</o-datatable-column>

Default editors

The o-datatable component provides default cell editors you can include in your application.

Cell editor: string

The o-table-cell-editor-string is the default cell edito for the table.

Cell editor: boolean

The o-datatable-cell-editor-boolean allows to modify a boolean value in the table cell.

Cell editor: integer

The o-datatable-cell-editor-integer allows to modify a integer value in the table cell.

Cell editor: real

The o-datatable-cell-editor-real allows to modify a real value in the table cell.

Cell editor: date

The o-datatable-cell-editor-date allows to modify a date value in the table cell.

Cell editor: combo

The o-datatable-cell-editor-combo allows to modify a value in a table cell that is provided by a service.

Creating a custom editor

To create a custom renderer is necessary to create a component implementing the IDataTableCellEditor interface or extending another existing editor.

interface IDataTableCellEditor {
  onFocus: EventEmitter< any >;
  onBlur: EventEmitter< any >;
  onSubmit: EventEmitter< any >;
  init(parameters: any);
  getHtml(data: any): string;
  handleCellFocus(cellElement: any, data: any);
  handleCellBlur(cellElement: any);
  create(cellElement: any, data: any);
  destroy(cellElement: any);
  performInsertion(cellElement: any);
  createEditorForInsertTable(cellElement: any, data: any);
  getInsertTableValue(): any;
}

The implementation of this interface is more complex than the renderers interface, so it is recommended using existing editors as reference.

onFocus: event triggered when the editor gets focused.
onBlur: event triggered when the editor lost its focus.
onSubmit: event triggered when the editor submits its value.
init(parameters: any): used for initialization from ODataTableColumn in default editors (passing o-datatable-column attributes to renderer). It is not necesary to implement in the new editors, initialization should be done in constructor or in ngOnInit method.
getHtml(data: any): string: string containing editor HTML code.
handleCellFocus(cellElement: any, data: any): handler executed when the editable column cell receives the focus. Receiving the HTML cell code (<td></td>) to append the editor HTML code in it and current cell data.
handleCellBlur(cellElement: any): handler executed when the editable column cell losts focus. Receiving the HTML cell code (<td></td>) for deleting the editor code from it.
create(cellElement: any, data: any): method for creating the editor.
destroy(cellElement: any): method for deleting the editor.
performInsertion(cellElement: any): method for updating the cell with the editor value. It should invoke this.tableColumn.update method.
createEditorForInsertTable(cellElement: any, data: any): method for creating the editor in the table fast insert row (insert-table=”yes”).
getInsertTableValue(): any: method for obtaining the value inserted in the editor in a fast insert row (insert-table=”yes”).

For example, a editor extending o-datatable-cell-editor-string and hiding its content: password-cell-editor.ts

import { Component, Inject, forwardRef } from '@angular/core';

import { ODataTableColumnComponent,
  ODataTableCellEditorStringComponent } from 'ontimize-web-ngx';

@Component({
  selector: 'password-cell-editor',
  template: ''
})
export class PasswordCellEditorComponent extends ODataTableCellEditorStringComponent {

  constructor(@Inject(forwardRef(() => ODataTableColumnComponent))
  tableColumn: ODataTableColumnComponent) {
    super(tableColumn);
  }

  public getHtml(data: any): string {
    let html = '<input type="password" ';
    if (typeof(data) !== 'undefined') {
      html += 'value="' + data + '" ';
    }
    html += 'onclick="event.stopPropagation();" ';
    html += 'ondblclick="event.stopPropagation();" />';
    return html;
  }

}

Using example

WARNING: do not forget to include PasswordCellEditorComponent in the component directives

<o-datatable entity="EMovements" title="MOVEMENTS" columns="MOVEMENTID;CONCEPT"
  visible-columns="CONCEPT" keys="MOVEMENTID" parent-keys="ACCOUNTID"
  query-on-init="false" query-rows="6" quick-filter="yes">

  <o-datatable-column attr="CONCEPT" title="CONCEPT" editable="yes">
    <password-cell-editor></password-cell-editor>
  </o-datatable-column>

</o-datatable>

Directive: o-datatable

Inputs

Name	Description	Default
attr string	Field identifier. Registry property if component is inside a form.
columns string	Entity columns. Separated by ‘;’
columns-group-button no \| false \| yes \| true	Indicates whether or not to show a button for grouping columns	yes
columns-resize-button no \| false \| yes \| true	Indicates whether or not to show a button for changing columns size	yes
columns-visibility-button no \| false \| yes \| true	Indicates whether or not to show a button for changing columns visibility	yes
controls no \| false \| yes \| true	Indicates whether or not to show a controls bar. Including component actions or the quickfilter	yes
delete-button no \| false \| yes \| true	Indicates whether or not to show a button for deleting data	no
delete-method string	Service method name for deletions	delete
detail-button-in-row no \| false \| yes \| true	Indicates whether or not to add a button in each row for opening the detail form	no
detail-button-in-row-icon string	Detail icon name (see Google material design icons)	search
detail-form-route string	Detail form path appended to the current route	detail
detail-mode none \| click \| dblclick	Action for opening the detail form of a row	click
edit-button-in-row no \| false \| yes \| true	Indicates whether or not to add a button in each row for opening the edit form	no
edit-button-in-row-icon string	Edit icon name (see Google material design icons)	edit
edit-form-route string	Edit form path appended to the current route	edit
edit-on-focus no \| false \| yes \| true	Cell edition when it gains focus. Useful when using o-datatable-cell-renderer-action action=”edit” for editing records and avoid having two differents edition modes in same table	yes
editable-columns string	Columns that can be edited directly on the table. Separated by ‘;’
edition-mode inline \| other	Row edition mode. Setting inline row edition when value is inline or opening edition screen in other case
enabled no \| false \| yes \| true	Indicates whether or not the field is enabled. When table is not enabled the detail navigation is disabled too	yes
entity string	Service entity name
export-button no \| false \| yes \| true	Indicates whether or not to show a button for exporting table data (Excel, PDF, etc.)	yes
filter-case-sensitive no \| false \| yes \| true	Indicates whether or not to do a case sensitive quickfilter search	no
insert-button no \| false \| yes \| true	Indicates whether or not to show a button for inserting data	yes
insert-method string	Service method name for insertions	insert
insert-table no \| false \| yes \| true	Indicates whether or not to show a empty row at the end of the table for inserting a new record	no
keys string	Entity keys. Separated by ‘;’
pageable no \| false \| yes \| true	Indicates whether or not to do paginated queries for getting the data	no
paginated-query-method string	Service method name for paginated queries	advancedQuery
pagination-controls no \| false \| yes \| true	Indicates whether or not to show the pagination controls	yes
parent-keys string	Filtering keys. Separated by ‘;’
query-method string	Service method name for queries	query
query-on-bind no \| false \| yes \| true	Query table data on bind	yes
query-on-init no \| false \| yes \| true	Query table data on init	yes
query-rows number	Number of records by page. Initial number of registries in queries when using pagination in server side	10
quick-filter no \| false \| yes \| true	Indicates whether or not to show a input for filtering data	yes
recursive-detail no \| false \| yes \| true	Indicates whether or not to add a detail key to current url path (overwrite)	no
recursive-edit no \| false \| yes \| true	Indicates whether or not to add a edit key to current url path (overwrite)	no
refresh-button no \| false \| yes \| true	Indicates whether or not to show a button for refreshing data	yes
row-height small \| medium \| large	Predefined row height options	medium
select-all-checkbox no \| false \| yes \| true	Indicates whether or not to show a column of checkboxes for selecting table rows	no
service string	JEE service path
service-type string	Injection token indicated in the provider of the service
show-table-buttons-text no \| false \| yes \| true	Indicates whether or not to show table actions text alongside icons	yes
single-page-mode no \| false \| yes \| true	Indicates whether or not the single pagination mode is used. If true, the only records stored in application memory are those found on the current page, doing a query on each page change	no
sort-columns string	Initial ordering, using [ ASC or DESC ] format. Separated by ‘;’
static-data array	Static data for filling the table
title string	Title in exported files
update-method string	Service method name for updates	update
visible no \| false \| yes \| true	Indicates whether or not the component is visible	yes
visible-columns string	Visible columns. Separated by ‘;’

* required inputs.

Outputs

Name Description

onClick

Event triggered when a row is clicked

onDoubleClick

Event triggered when a row is double clicked

onPaginatedTableDataLoaded

Event triggered when table paginated data is updated

onRowDeleted

Event triggered when there some row deletion

onRowDeselected

Event triggered when a row is deselected

onRowSelected

Event triggered when a row is selected

onTableDataLoaded

Event triggered when table data is updated

DataTable column

Directive: o-datatable-column

Inputs

Name Description Default

attr

string

Column name

editable

no | false | yes | true

Indicates whether or not the column content can be edited. Alternative (with higher priority) to attribute editable-columns from o-datatable

no

orderable

no | false | yes | true

Indicates whether or not the column can be sorted

yes

searchable

no | false | yes | true

Indicates whether or not the column content can be searched

yes

title

string

Column title

type

string | boolean | integer | real | currency | date | image

Column data type

string

* required inputs.

DataTable b1.18datatableColumnRendererActionutton

Directive: o-datatable-button

Inputs

Name Description Default

icon

string

Name of google icon (see Google material design icons)

priority_high

label

string

Field label

DataTable option

Directive: o-datatable-option

Inputs

Name Description

icon

string

Name of google icon (see Google material design icons)

label

string

Field label

Cell renderer: string

Directive: o-datatable-cell-renderer-string

Cell renderer: boolean

Directive: o-datatable-cell-renderer-boolean

Inputs

Name Description

false-value

string

Value taken as false

false-value-type

string | number | icon | image

Type of false value

true-value

string

Value taken as true

true-value-type

string | number | icon | image

Type of true value

Cell renderer: real

Directive: o-datatable-cell-renderer-real

Inputs

Name Description Default

decimal-digits

decimal-separator

string

Decimal digits chacarter separator

Dot (.)

grouping

no | false | yes | true

Indicates whether or not to group the thousand digits

yes

thousand-separator

string

Thousand digits chacarter separator (in case of grouping)

Comma (,)

Cell renderer: currency

Directive: o-datatable-cell-renderer-currency

Inputs

Name Description Default

currency-symbol

string

Currency symbol (According to ISO 4217)

dolar ($)

currency-symbol-position

left | right

Position of currency symbol

left

decimal-digits

decimal-separator

string

Decimal digits chacarter separator

Dot (.)

grouping

no | false | yes | true

Indicates whether or not to group the thousand digits

yes

thousand-separator

string

Thousand digits chacarter separator (in case of grouping)

Comma (,)

Cell renderer: date

Directive: o-datatable-cell-renderer-date

Inputs

Name Description

format

string

Date format. See MomentJS

Cell renderer: image

Directive: o-datatable-cell-renderer-image

Inputs

Name Description Default

avatar

no | false | yes | true

Indicates whether or not to visualize image as an avatar (as a circle)

no

empty-image

string

Image URL when field has no value

image-type

base64 | url

Image type (external URL or base64)

Model value

Cell renderer: service

Directive: o-datatable-cell-renderer-service

Inputs

Name Description Default

columns

string

Entity columns. Separated by ‘;’

entity

string

Service entity name

query-method

string

Service method name for queries

query

separator

string

Separator used to concatenate the visible columns

service

string

JEE service path

value-column

string

Column name for cell value mapping (similar to component ComboReferenceDataField cod attribute in classic Ontimize Desktop)

visible-columns

string

Visible columns. Separated by ‘;’

Cell renderer: action

Directive: o-datatable-cell-renderer-action

Inputs

Name Description Default

action

detail | delete | edit

Name of the default action

edition-mode

inline | other

Row edition mode. Using only when action is edit. Setting inline row edition when value is inline or opening edition screen in other case

render-type

string | icon | image | button

Type of value to render

icon

render-value

string

Value to render

Depends on render-type value

Cell editor: string

Directive: o-table-cell-editor-string

Cell editor: boolean

Directive: o-datatable-cell-editor-boolean

Cell editor: integer

Directive: o-datatable-cell-editor-integer

Cell editor: real

Directive: o-datatable-cell-editor-real

Cell editor: date

Directive: o-datatable-cell-editor-date

Inputs

Name Description Default

date-model-format

string

Cover if the attribute date-model-type value is string

ISO date format

date-model-type

timestamp | string

If a column of type date is editable its model must be defined for saving its value. For example, in Ontimize classic server, dates have timestamp format (number) but to save them is necessary to send a string with format YYYY-MM-DD HH:MM:SS. In this case, the date-model-type attribute should have string value, and date-model-format should be YYYY-MM-DD HH:mm:ss (see MomentJS)

timestamp

Cell editor: combo

Directive: o-datatable-cell-editor-combo

Inputs

Name Description Default

columns

string

Entity columns. Separated by ‘;’

entity

string

Service entity name

query-method

string

Service method name for queries

query

separator

string

Separator used to concatenate the visible columns

service

string

JEE service path

value-column

string

Column name for cell value mapping (similar to component ComboReferenceDataField cod attribute in classic Ontimize Desktop)

visible-columns

string

Visible columns. Separated by ‘;’

Name	Description
onClick	Event triggered when a row is clicked
onDoubleClick	Event triggered when a row is double clicked
onPaginatedTableDataLoaded	Event triggered when table paginated data is updated
onRowDeleted	Event triggered when there some row deletion
onRowDeselected	Event triggered when a row is deselected
onRowSelected	Event triggered when a row is selected
onTableDataLoaded	Event triggered when table data is updated

Name	Description	Default
attr string	Column name
editable no \| false \| yes \| true	Indicates whether or not the column content can be edited. Alternative (with higher priority) to attribute editable-columns from o-datatable	no
orderable no \| false \| yes \| true	Indicates whether or not the column can be sorted	yes
searchable no \| false \| yes \| true	Indicates whether or not the column content can be searched	yes
title string	Column title
type string \| boolean \| integer \| real \| currency \| date \| image	Column data type	string

Name	Description	Default
icon string	Name of google icon (see Google material design icons)	priority_high
label string	Field label

Name	Description
icon string	Name of google icon (see Google material design icons)
label string	Field label

Name	Description
false-value string	Value taken as false
false-value-type string \| number \| icon \| image	Type of false value
true-value string	Value taken as true
true-value-type string \| number \| icon \| image	Type of true value

Name	Description	Default
decimal-digits
decimal-separator string	Decimal digits chacarter separator	Dot (.)
grouping no \| false \| yes \| true	Indicates whether or not to group the thousand digits	yes
thousand-separator string	Thousand digits chacarter separator (in case of grouping)	Comma (,)

Name	Description	Default
currency-symbol string	Currency symbol (According to ISO 4217)	dolar ($)
currency-symbol-position left \| right	Position of currency symbol	left
decimal-digits
decimal-separator string	Decimal digits chacarter separator	Dot (.)
grouping no \| false \| yes \| true	Indicates whether or not to group the thousand digits	yes
thousand-separator string	Thousand digits chacarter separator (in case of grouping)	Comma (,)

Name	Description
format string	Date format. See MomentJS

Name	Description	Default
avatar no \| false \| yes \| true	Indicates whether or not to visualize image as an avatar (as a circle)	no
empty-image string	Image URL when field has no value
image-type base64 \| url	Image type (external URL or base64)	Model value

Name	Description	Default
columns string	Entity columns. Separated by ‘;’
entity string	Service entity name
query-method string	Service method name for queries	query
separator string	Separator used to concatenate the visible columns
service string	JEE service path
value-column string	Column name for cell value mapping (similar to component ComboReferenceDataField cod attribute in classic Ontimize Desktop)
visible-columns string	Visible columns. Separated by ‘;’

Name	Description	Default
action detail \| delete \| edit	Name of the default action
edition-mode inline \| other	Row edition mode. Using only when action is edit. Setting inline row edition when value is inline or opening edition screen in other case
render-type string \| icon \| image \| button	Type of value to render	icon
render-value string	Value to render	Depends on render-type value

Name	Description	Default
date-model-format string	Cover if the attribute date-model-type value is string	ISO date format
date-model-type timestamp \| string	If a column of type date is editable its model must be defined for saving its value. For example, in Ontimize classic server, dates have timestamp format (number) but to save them is necessary to send a string with format YYYY-MM-DD HH:MM:SS. In this case, the date-model-type attribute should have string value, and date-model-format should be YYYY-MM-DD HH:mm:ss (see MomentJS)	timestamp

Name	Description	Default
columns string	Entity columns. Separated by ‘;’
entity string	Service entity name
query-method string	Service method name for queries	query
separator string	Separator used to concatenate the visible columns
service string	JEE service path
value-column string	Column name for cell value mapping (similar to component ComboReferenceDataField cod attribute in classic Ontimize Desktop)
visible-columns string	Visible columns. Separated by ‘;’

Updated: December 20, 2021

Previous Next