Table

Introduction

The o-table provides a table of data that can be used to display rows of data and include a ready-to-use features like crud operations, paging, filtering, sorting, editing, grouping, resizing, exporting to PDF and excel, and virtual scrolling.

If the table also is inside a form, the attr property is required for registry the table in the form.

WARNING: table is storing changes made by user (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 sort-columns attribute but the user has ordered other column it manually, it will be order in future loads. For restoring initial state is enough to go to the Configuration -> Load Configuration option in the table menu and load the default configuration that deletes in browser local storage and restore the values defined over table html definition.

Table component

To define a table, it is necessary to define the columns

You can define it as follows:

Using the input columns, adding the columns separated by ‘;’.
Using the o-table-column component. If o-table component contains inner o-table-column elements, using renderers and editors defined in them. If you use this option, the attr attribute is required. For more information see the API.

With visible-columns you can indicate which columns will be visible. You can also use default-visible-columns input to select which columns of the setted ones in visible-columns will be visible on first load, user will be able to show or not columns in context menu of the table.

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

Define columns

Firstly, you must define the columns of the entity that queries the database in columns, in visible-columns you can configure the visible columns.

You can represent the columns in extended mode with o-table-column component. To define a column it’s necessary to add the attr property in the visible-columns property, with the exception of the columns generated for the calculated columns. To consult all the parameters of the ‘o-table-column’ see the API.

Example

<o-table 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">
  <!--definition o-table-column-->
  <o-table-column attr="PHOTO" orderable="no" searchable="no" type="image"
    image-type="base64" empty-image="assets/images/no-image.png" avatar="yes">
  </o-table-column>
  <o-table-column attr="NAME" title="NAME"></o-table-column>
  <o-table-column attr="STARTDATE" title="STARTDATE" type="date"
    format="MM/DD/YYYY HH:mm:ss">
  </o-table-column>
  <o-table-column attr="CUSTOMERTYPEID" title="TYPE" editable="true">
    <o-table-cell-renderer-service entity="ECustomerTypes"
      value-column="CUSTOMERTYPEID"
      columns="CUSTOMERTYPEID;DESCRIPTION" visible-columns="DESCRIPTION">
    </o-table-cell-renderer-service>
  </o-table-column>
  <o-table-column attr="BOOLEAN" title="BOOLEAN" type="boolean"
    true-value-type="string" true-value="YES"
    false-value-type="icon" false-value="not_interested">
  </o-table-column>
  <o-table-column attr="INTEGER" title="INTEGER" type="integer" grouping="yes"
    thousand-separator=".">
  </o-table-column>
  <o-table-column attr="REAL" title="REAL" type="real" grouping="yes"
    thousand-separator="." decimal-separator="," max-decimal-digits="4">
  </o-table-column>
  <o-table-column attr="CURRENCY" title="CURRENCY" type="currency"
    currency-symbol="€" currency-symbol-position="right" grouping="yes"
    thousand-separator="." decimal-separator="," max-decimal-digits="2">
  </o-table-column>

</o-table>

CRUD operations

The o-table allows to perform the basic operations like create, read, update and delete. There are various ways you can use for editing like cell editing by click on them or use an o-form component to edit the currently selected item.

Ontimize Web provides several modes for editing its data by o-form like editable detail, dialog, split pane, tabs. For more information about o-form lifecycle you can see this url and the dialog, split pane, tabs modes are explained in o-form-layout-manager component.

These operations are available from the table toolbar or from the context menu. This operations are configured by default if detail-mode is other than none but you can disable them with delete-button='no', insert-button='no', refresh-button='no'

Crud operations

Sorting

Since this functionality is built-in, all you have to do is to set the sorting configuration via sort-columns input in the o-table component using [ ASC or DESC ] format.

All columns are sortable by default, if you don’t want to avoid to set column as sortable you must add sortable= "no" in its column definition.

Example

<o-table attr="customers" entity="ECustomers" keys="CUSTOMERID" sort-columns="SURNAME:DESC"
  columns="CUSTOMERID;PHOTO;NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  visible-columns="PHOTO;NAME;STARTDATE;CUSTOMERTYPEID;BOOLEAN;INTEGER;REAL;CURRENCY"
  query-on-init="true" query-rows="6" quick-filter="yes" insert-table="yes">
...
  <o-table-column attr="SURNAME" orderable="yes" searchable="no" type="string">
  </o-table-column>
</o-table>

Pagination

By default, the table is paginating the data, but if you want avoid that behaviour you must set pagination-controls= "no" in the o-table component.

You can configure the pagination using the o-table-paginator component inside the table. For more information see the API.

You can also configure the number of records initially displayed with query-rows attribute.

Below is an example of how to define a paginator for the table.

Example

<o-table 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"
  sort-columns="SURNAME" keys="CUSTOMERID" parent-keys="n:NAME;CUSTOMERTYPEID"
  query-on-init="true" query-rows="6" quick-filter="yes" >

  <o-table-button attr="myButton" label="My button" icon="account_circle"></o-table-button>
  <o-table-column attr="NAME" title="NAME"></o-table-column>

  <o-table-paginator page-size="20"></o-table-paginator>
</o-table>

Data binding

The o-table component supports data binding and you can command the component to display data either from local or remote data storage

Binding to local data

For local data binding you simply need to supply an array of TypeScript objects/JSON via the static-data property. Adicional, you need to set query-on-init="false" in the o-table component.

Example

 <o-table attr="accounts" columns="CARDID;CARDTYPE;NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE" visible-columns="NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE" title="ACCOUNTS" [static-data]="getStaticData()" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
  <o-table-columns-filter columns="NUMCARD;TOTALCREDIT;TOTALREADY;BALANCE"></o-table-columns-filter>
  <o-table-column attr="NUMCARD" title="NUMCARD">
    <o-table-column-renderer-cardtype></o-table-column-renderer-cardtype>
  </o-table-column>
  <o-table-column attr="TOTALCREDIT" type="currency" title="TOTALCREDIT" thousand-separator="." decimal-separator="," currency-symbol="€" currency-symbol-position="right"></o-table-column>
  <o-table-column attr="TOTALREADY" title="TOTALREADY">
    <o-table-column-renderer-totalready></o-table-column-renderer-totalready>
  </o-table-column>
  <o-table-column attr="BALANCE" title="BALANCE">
    <o-table-column-renderer-balance></o-table-column-renderer-balance>
  </o-table-column>
</o-table>

getTableData(){
  const account =  [
    { PRODUCTID: 1, 'PRODUCTNAME': 'Alice Mutton', UNITPRICE: 39, UNITSINORDER: 0, UNITSINSTOCK: 1 },
    { PRODUCTID: 2, 'PRODUCTNAME': 'Gorgonzola Telino', UNITPRICE: 12.5, UNITSINORDER: 70, UNITSINSTOCK: 2 },
    { PRODUCTID: 3, 'PRODUCTNAME': 'Louisiana Hot Spiced Okra', UNITPRICE: 17, UNITSINORDER: 100, UNITSINSTOCK: 4 },
    { PRODUCTID: 4, 'PRODUCTNAME': 'Sir Rodney Scones', UNITPRICE: 10, UNITSINORDER: 40, UNITSINSTOCK: 3 },
    { PRODUCTID: 5, 'PRODUCTNAME': 'Alice Mutton', UNITPRICE: 39, UNITSINORDER: 0, UNITSINSTOCK: 0 }
    ];
    return account;
}

If you need the data query to be performed after the parent-keys is updated, query-on-init = false and query-on-bind = true must be changed

Binding to remote data

To manage server data, it is necessary to configure the service and the entity attributes. You may need configure the service-type attribute in case you don’t use the default OntimizeWebService to manage. For more information see in App configuration.

Example

<o-table fxFlex attr="customers" title="CUSTOMERS" service="customers" entity="customer"
keys="CUSTOMERID" columns="CUSTOMERID;PHOTO;NAME;SURNAME;ADDRESS;STARTDATE;EMAIL" visible-columns="PHOTO;NAME;SURNAME;STARTDATE;EMAIL;ADDRESS" sort-columns="SURNAME" query-rows="10" quick-filter="yes" row-height="medium" select-all-checkbox="true">
  <o-table-columns-filter columns="STARTDATE;SURNAME"></o-table-columns-filter>
  <o-table-column async-load="true" width="48px" attr="PHOTO" orderable="no" searchable="no" type="image" image-type="base64"
    empty-image="assets/images/no-image.png" avatar="yes">
  </o-table-column>
  <o-table-column attr="NAME" title="NAME" orderable="no"></o-table-column>
  <o-table-column attr="STARTDATE" title="STARTDATE" type="date" format="LL"></o-table-column>
</o-table>

You can configure the methods by default with the ìnsert-method,update-method,delete-method

By default the filtering is local, you can enable remote filtering setting pageable="yes".

Quick filter

This option is enabled by default and the filter is visible in the top right. You can disable it setting quick-filter="no". You can also configure filtering to be case sensitive with filter-case-sensitive="yes". By default, it’s disabled.

This option creates the o-table-quickfilter component within the o-table. This component displays a checkbox list (when you click on the icon) where you can select which columns to filter by when the input value changes, also allows to change the filter case sensitive option during execution.

All columns will be searchable by quickfilter component. The only way to remove columns of beeing searched is by setting searchable input to false in o-column definition, this will make this column to not appear in the checkbox list.

Table quickfilter

If you want to override this component to configure its options you can define your own quickfilter within your o-table and it will replace the default implementation. You can see its properties configuration in the API section.

<o-table 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">

  <o-table-quickfilter placeholder="MY_OWN_PLACEHOLDER" (onChange)="myOnChangeMethod()">
  </o-table-quickfilter>

</o-table>

NOTE The option to change the filter case sensitive filtering may not appear if pageable attribute is setted to false in table component.

Additionally, you can specify default filter function to be applied when the user enters value in the filter textbox in quick-filter-function property.

Filtering by columns

This option is active by default but it is also possible to configure filtering by columns as follows:

Using the input columns of the component o-table-columns-filter, adding the columns separated by ‘;’.
Using the o-table-columns-filter-column component. If o-table-columns-filter component contains inner o-table-columns-filter-column elements, the attr of the columns attribute is required. For more information see the API.

This option will be available in table menu and in table header by default. However, you can configure it unavailable in table header with filter-column-active-by-default= 'no'. You can also disable/enable the entire application or a certain module with the O_TABLE_GLOBAL_CONFIG injection token as shown below.

@NgModule({
  declarations: [
  ...
  ],
  ...
  providers: [
    ...
    { provide: O_TABLE_GLOBAL_CONFIG, useValue: { filterColumnActiveByDefault: false } },
    ...
  ],
  ...
})

Filter by Column

Example

<o-table service="branches" entity="account" keys="ACCOUNTID"
    columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;BALANCE;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
    visible-columns="ENTITYID;OFFICEID;CDID;ANID;ACCOUNTTYP;BALANCE,INTERESRATE"
    fxFlex layout-padding attr="accounts" title="ACCOUNTS"
    sort-columns="ANID:DESC" query-on-init="true" quick-filter="yes" filter-case-sensitive="true">
    <o-table-columns-filter columns="OFFICEID;NAME" ></o-table-columns-filter>

    ...

</o-table>

Example with o-table-columns-filter-column component

<o-table service="branches" entity="account" keys="ACCOUNTID"
    columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;BALANCE;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
    visible-columns="ENTITYID;OFFICEID;CDID;ANID;ACCOUNTTYP;BALANCE,INTERESRATE"
    fxFlex layout-padding attr="accounts" title="ACCOUNTS"
    sort-columns="ANID:DESC" query-on-init="true" quick-filter="yes" filter-case-sensitive="true">
    <o-table-columns-filter>
      <o-table-columns-filter-column attr="OFFICEID"> </o-table-columns-filter-column>
      <o-table-columns-filter-column attr="ACCOUNTTYP" sort="desc"> </o-table-columns-filter-column>
    </o-table-columns-filter>

    ...

</o-table>

o-table-columns-filter component can filter in one of three different ways based on the mode property.

Mode	Description
default	Combines selection and custom mode
selection	Allows filtering selected by the values in the column.
custom	Allows filtering by a form control

Filtering columns mode

Custom filter

OntimizeWeb allows to customize the table data filtering by building your own filters. You can build complex filtering structures by adding the o-filter-builder component to you application.

The o-filter-builder component uses the Expression interface that represents a filtering expression. You can read more about how to build complex filtering expressions here.

Cell renderers

The data is displayed in the table cells as simple text by default. OntimizeWeb allows you to modify the way the data is displayed by adding renderers to the table columns. You have different options to include table cell renderers in your table component:

Do nothing, the cell data is displayed as simple text.
Use a predefined cell renderer in the table column. The predefined renderers are: action, boolean, real, currency, date, integer, image, percentage and service.
Use one of the predefined table cell renderer components that OntimizeWeb offers. This option is equivalent to the previous one.
Create a custom renderer component and use it in your table.

<!-- 1.Do nothing, simple strings get used to display the table -->
<o-table-column attr="PHOTO" > </o-table-column>

<!-- 2. Use one of cell renderer predefined -->
<o-table-column attr="PHOTO" orderable="no" searchable="no" type="image" image-type="base64" empty-image="assets/images/no-image.png" avatar="yes"></o-table-column>

<!-- 3. Use equivalent code -->
<o-table-column attr="PHOTO" orderable="no" searchable="no">
  <o-table-cell-renderer-image image-type="base64" empty-image="assets/images/no-image.png" avatar="yes"></o-table-cell-renderer-image>
</o-table-column>

<!-- 4. Custom renderer -->
<o-table-column attr="NAME" orderable="no" searchable="no">
  <o-table-cell-renderer-name></o-table-cell-renderer-name>
</o-table-column>

Predefined renderers

OntimizeWeb offers you a set of prebuilt table cell renderers to include in your table. This cell renderers are the following data types: action, boolean, real, currency, date, integer, image, percentage and service.

For adding a cell renderer to the cells of a table column, you have to configure the attribute type in the desired table column with the value that indicates the cell render you want to use. You may need to configure additional parametres depending on the cell renderer configured. Check the examples in the following sections and the attributes for each cell renderer in the API section of this page.

You can see different predefined table cell renderers in the example below.

Predefined table cell renderers

<o-table  attr="accounts" columns="PHOTO;NAME;ACCOUNT;BALANCE;STARTDATE;NUMCARDS;ENDDATE;INTERESRATE;CLOSED" visible-columns="PHOTO;NAME;STARTDATE;ACCOUNT;BALANCE;NUMCARDS;INTERESRATE;COMMISSION" title="ACCOUNTS" [static-data]="getTableData()" sort-columns="ACCOUNT:DESC" query-on-init="false" quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no">
  <!--Date Renderer-->
  <o-table-column attr="STARTDATE" title="STARTDATE" type="date"> </o-table-column>
  <!--Currency Renderer-->
  <o-table-column attr="BALANCE" title="BALANCE" type="currency" thousand-separator="." decimal-separator="," currency-symbol="€" currency-symbol-position="right"></o-table-column>
  <!--Percentage Renderer-->
  <o-table-column attr="INTERESRATE" title="INTERESRATE" type="percentage" decimal-separator="," max-decimal-digits="2"></o-table-column>
  <!--Integer Renderer-->
  <o-table-column attr="NUMCARDS" title="NUMCARDS" type="integer"></o-table-column>
  <!--Boolean Renderer-->
  <o-table-column attr="COMMISSION" title="COMMISSION" type="boolean" render-true-value="check_circle" render-false-value="highlight_off" render-type="icon" boolean-type="string"></o-table-column>
</o-table>

You can see this live example in the OntimizeWeb playground.

Action cell renderer

The action cell renderer is used for displaying a button in a table cell. Include this renderer in your table column by configuring the attribute type in the column with the value action or adding the o-table-cell-renderer-action to the table column.

<o-table-column attr="EMPLOYEENAME" type="action" icon="person" (onClick)="showMessage($event)"></o-table-column>

<!-- Equivalent code -->

<o-table-column attr="EMPLOYEENAME">
  <o-table-cell-renderer-action icon="person" (onClick)="showMessage($event)"></o-table-cell-renderer-action>
</o-table-column>

You can display a text and/or a icon in the cell, also choosing the icon position using the icon-position attribute.

<o-table-column attr="EMPLOYEENAME">
  <o-table-cell-renderer-action icon="person" text="user" icon-position="right"></o-table-cell-renderer-action>
</o-table-column>

When an action cell is clicked you can trigger a predefined action or execute your custom callback. In the first case there are two predefined actions: detail or edit, that will trigger navigation to table detail or edition route. Otherwise, you can listen to the onClick event to perform your defined action. Check the definition of this and more attributes in the API section of this page.

<!-- Navigation to detail mode -->
<o-table-column attr="EMPLOYEENAME">
  <o-table-cell-renderer-action icon="person" action="detail"></o-table-cell-renderer-action>
</o-table-column>

<!-- Triggering showMessage method -->
<o-table-column attr="EMPLOYEENAME">
  <o-table-cell-renderer-action icon="person" (onClick)="showMessage($event)"></o-table-cell-renderer-action>
</o-table-column>

Boolean cell renderer

Include the table cell renderer boolean in your table column by configuring the attribute type in the column with the value boolean or adding the o-table-cell-renderer-boolean to the table column. You can indicate the type of the retrieved data by configuring the boolean-type attribute. Display a custom value by configuring false-value and true-value attributes depending on the false-value-type and true-value-type attributes. Display a custom value by configuring render-false-value and render-true-value attributes depending on the false-value-type and true-value-type attributes. Check the configuration of this attributes in the API section of this page.

<o-table-column attr="COMMISSION" title="COMMISSION" type="boolean" render-true-value="check_circle" render-false-value="highlight_off" render-type="icon" boolean-type="string"></o-table-column>

<!-- Equivalent code -->

<o-table-column attr="COMMISSION" title="COMMISSION">
  <o-table-cell-renderer-boolean render-true-value="check_circle" render-false-value="highlight_off" render-type="icon" boolean-type="string">
  </o-table-cell-renderer-boolean>
</o-table-column>

Currency cell renderer

Include the table cell renderer currency in your table column by configuring the attribute type in the column with the value currency or adding the o-table-cell-renderer-currency to the table column. Configure the currency symbol with the currency-symbol attribute. Check this and other attributes in the API section of this page.

<o-table-column attr="BALANCE" title="BALANCE" type="currency" currency-symbol="€" currency-symbol-position="right" thousand-separator="." decimal-separator=","></o-table-column>

<!-- Equivalent code -->

<o-table-column a ttr="BALANCE" title="BALANCE">
  <o-table-cell-renderer-currency currency-symbol="€" currency-symbol-position="right" thousand-separator="." decimal-separator=","></o-table-cell-renderer-currency>
</o-table-column>

Date cell renderer

You can include the table cell renderer date in your table column by configuring the attribute type in the column with the value date or adding the o-table-cell-renderer-date to the table column. You may want to set the displaying date format by configuring the format attribute. Check this and other attributes in the API section of this page.

<o-table-column attr="STARTDATE" title="STARTDATE" type="date"></o-table-column>

<!-- Equivalent code -->

<o-table-column attr="STARTDATE" title="STARTDATE">
  <o-table-cell-renderer-date></o-table-cell-renderer-date>
</o-table-column>

Integer cell renderer

Include the table cell renderer integer in your table column by configuring the attribute type in the column with the value integer or adding the o-table-cell-renderer-integer to the table column. Check the attributes of this component in the API section of this page.

<o-table-column attr="NUMCARDS" title="NUMCARDS" type="integer"></o-table-column>

<!-- Equivalent code -->

<o-table-column attr="NUMCARDS" title="NUMCARDS">
  <o-table-cell-renderer-integer></o-table-cell-renderer-integer>
</o-table-column>

Image cell renderer

You can include the table cell renderer image in your table column by configuring the attribute type in the column with the value image or adding the o-table-cell-renderer-image to the table column. Check the attributes of this component in the API section of this page.

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

<!-- Equivalent code -->

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

Percentage cell renderer

You can include the table cell renderer percentage in your table column by configuring the attribute type in the column with the value percentage or adding the o-table-cell-renderer-percentage to the table column. Check the attributes of this component in the API section of this page.

<o-table-column attr="INTERESRATE" title="INTERESRATE" type="percentage" decimal-separator="," max-decimal-digits="2"></o-table-column>

<!-- Equivalent code -->

<o-table-column attr="INTERESRATE" title="INTERESRATE">
  <o-table-cell-renderer-percentage decimal-separator="," max-decimal-digits="2"></o-table-cell-renderer-percentage>
</o-table-column>

Real cell renderer

Include the table cell renderer real in your table column by configuring the attribute type in the column with the value real or adding the o-table-cell-renderer-real to the table column. Check the attributes of this component in the API section of this page.

<o-table-column attr="UNITPRICE" title="UNITPRICE" type="real" thousand-separator="." decimal-separator=","></o-table-column>

<!-- Equivalent code -->

<o-table-column attr="UNITPRICE" title="UNITPRICE">
  <o-table-cell-renderer-real thousand-separator="." decimal-separator=","></o-table-cell-renderer-real>
</o-table-column>

Service cell renderer

The table cell renderer service component is used for retrieving data form an entity that is related to the current table entity. The most common usage of this is displaying some text description when the current table entity has the identifier for that entity.

You can include this component in your table in two different ways:

Configuring the attribute type in the column with the value service and including the attributes of the table cell renderer service. Check all the attributes of the table cell renderer service in the API section of this page.
Adding the o-table-cell-renderer-service component to the table column like in the example below.

<o-table-column attr="EMPLOYEETYPEID" title="EMPLOYEETYPEID">
  <o-table-cell-renderer-service service="employees" entity="employeeType" columns="TYPEID;EMPLOYEETYPENAME"
    parent-keys="TYPEID:EMPLOYEETYPEID" value-column="EMPLOYEETYPENAME">
  </o-table-cell-renderer-service>
</o-table-column>

<!-- Equivalent code -->

<o-table-column attr="EMPLOYEETYPEID" title="EMPLOYEETYPEID" type="service" service="employees"
  entity="employeeType" columns="TYPEID;EMPLOYEETYPENAME" parent-keys="TYPEID:EMPLOYEETYPEID"
  value-column="EMPLOYEETYPENAME">
</o-table-column>

You can see this example in the OntimizeWeb QuickStart or check the code in GitHub.

Translate cell renderer

You can include the table cell renderer translate in your table column by configuring the attribute type in the column with the value translate or adding the o-table-cell-renderer-translate to the table column. Check the attributes of this component in the API section of this page.

<o-table-column attr="CODE" type="translate"></o-table-column>

<!-- Equivalent code -->

<o-table-column attr="CODE">
  <o-table-cell-renderer-translate></o-table-cell-renderer-translate>
</o-table-column>

Custom renderers

A custom renderer allows you to display the data of a table cell formatted as you desire. For this, you need to create a new component that extends the base cell renderer class and place it into your table.

The requisites for a custom table cell renderer component are the following:

The component must extend the OBaseTableCellRenderer class.
Your renderer template must reference the template container. For this, wrap the content of your component HTML with the ng-template tag and define a template variable. Then create an attribute to your component referencing the template container defined previously, add this line to your component: @ViewChild('templateref', { read: TemplateRef }) public templateref: TemplateRef<any>. This will give your component a reference to acces the template container.
If you want to customize the internal value of the cell (this value is used for filtering or exporting the table data), you must overwrite the getCellData method.

You have an example of a custom renderer below. It displays a person full name in a table cell, for this, it concat the values in the getCellData method and displays its value in the template.

import { Component, Injector, TemplateRef ViewChild } from '@angular/core';
import { OBaseTableCellRenderer } from 'ontimize-web-ngx';

@Component({
  selector: 'custom-render',
  templateUrl: './custom-render.component.html'
})

export class OTableCellRendererName extends OBaseTableCellRenderer {

  @ViewChild('templateref', { read: TemplateRef, static: false }) public templateref: TemplateRef<any>;

  constructor(protected injector: Injector) {
    super(injector);
  }

  getCellData(cellvalue: any, rowvalue: Object) {
    return rowvalue['SURNAME'].toUpperCase() + ', ' + rowvalue['NAME'];
  }

}

  <ng-template #templateref let-cellvalue="cellvalue" let-rowvalue="rowvalue">
    {{ getCellData(cellvalue, rowvalue) }}
  </ng-template>

The let keyword declares a template input variable that you reference within the template. The input variables are cellvalue and rowvalue. The parser translates let cellvalue and let rowvalue into variables named, let-cellvalue and let-rowvalue.

Finally, add the created component to your module for including it in your table.

Cell editing

The o-table component supports cell editing.

All you have to do to enable data editing capabilities for the component is to:

Configure edition-mode="click" and detail-mode='none'
Configure data binding

You can also disable/enable cell editing the entire application or a certain module with the O_TABLE_GLOBAL_CONFIG injection token as shown below.

 @NgModule({
  declarations: [
  ...
  ],
  ...
  providers: [
    ...
    { provide: O_TABLE_GLOBAL_CONFIG, useValue: { editionMode: 'click', detailMode: 'none' } }
    ...
  ],
  ...
})

NOTE: It is necessary to configure detail-mode='none' attribute for editing in a table column cell.

Cell editing results in the following events.

Event	Description
editionCancelled	Event triggered when component input is canceled
editionCommitted	Event triggered when component input is committed
editionStarted	Event triggered when component input element started
onPostUpdateRecord	Event triggered after component record is succesfully updated

Cell editing

Default editors

Next we are specifing how to add a editor for a table column cell.

By default, the table will no define a editor for your data into a cell. If you want to be able to edit that data you have to use a cell editor. So, for editing your values, you have the following options.

1. Use one of the predefined cell editor, you should add editable="yes" in o-table-column. The predefined types are boolean, date, integer, real and text.

If a column haven’t type will be string. You can find all information here.

2. Use equivalent code.

3. Custom editor. Below is an example but you can find all information here.

You can see examples of this section in the OntimizeWeb playground.

For example:

// 1. Use one of the predefined cell editor
<o-table-column attr="STARTDATE" title="STARTDATE" type="date" format="LL" editable="yes"></o-table-column>

// 2. Use equivalent code
<o-table-column attr="STARTDATE" title="STARTDATE">
  <o-table-cell-editor-date format="LL">
  </o-table-cell-editor-date>
</o-table-column>

// 3. Custom editor.
<o-table-column attr="STARTDATE" title="STARTDATE">
  <o-table-cell-editor-startdate></o-table-cell-editor-startdate>
</o-table-column>

Boolean

The configuration is similar to the renderer boolean. The following example uses the second option named before, adding the o-table-cell-editor-boolean component inside the o-table-column. To consult all the parameters of the editor see the API.

  <o-table-column attr="CLOSED" title="CLOSED">
    <o-table-cell-editor-boolean true-value="1" false-value="0" boolean-type="number" (editionStarted)="editionStarted($event)"
    (editionCancelled)="editionCancelled($event)" (editionCommitted)="editionCommitted($event)"></o-table-cell-editor-boolean>
  </o-table-column>

 editionStarted(arg: any) {
    console.log('editionStarted');
    console.log(arg);
  }

  editionCancelled(arg: any) {
    console.log('editionCancelled');
    console.log(arg);
  }

  editionCommitted(arg: any) {
    console.log('editionCommitted');
    console.log(arg);
  }

Date

The configuration is similar to the renderer date. The following example uses the first option named before, in this case its required to add type="date" editable="yes" in o-table-column component. To consult all the parameters of the editor see the API.

  <o-table-column attr="STARTDATE" title="STARTDATE" format="LL" type="date" editable="yes" (editionStarted)="editionStarted($event)"
        (editionCancelled)="editionCancelled($event)" (editionCommitted)="editionCommitted($event)">
  </o-table-column>

Integer

The configuration is similar to the renderer integer. The following example uses the second option named before, adding the o-table-cell-editor-integer component inside the o-table-column. To consult all the parameters of the editor see the API.

  <o-table-column attr="NUMCARDS" title="NUMCARDS" class="o-table-column-centered">
    <o-table-cell-editor-integer (editionStarted)="editionStarted($event)" (editionCancelled)="editionCancelled($event)" (editionCommitted)="editionCommitted($event)">
        </o-table-cell-editor-integer>
  </o-table-column>

Real

The configuration is similar to the renderer real. The following example uses the first option named before, in this case its required to add type="currency" editable="yes" in o-table-column component. To consult all the parameters of the editor see the API.

 <o-table-column attr="BALANCE" title="BALANCE" editable="yes" type="currency" thousand-separator="." decimal-separator=","
        currency-symbol="€" currency-symbol-position="right" (editionStarted)="editionStarted($event)" (editionCancelled)="editionCancelled($event)"
        (editionCommitted)="editionCommitted($event)">
  </o-table-column>

Text

The configuration is similar to the renderer text. The following example uses the second option named before, adding the o-table-cell-editor-integer component inside the o-table-column. To consult all the parameters of the editor see the API.

    <o-table-column attr="NAME" title="NAME">
        <o-table-cell-editor-text (editionStarted)="editionStarted($event)" (editionCancelled)="editionCancelled($event)" (editionCommitted)="editionCommitted($event)"></o-table-cell-editor-text>
    </o-table-column>

Email

The configuration is similar to the text editor. To consult all the parameters of the editor see the API.

    <o-table-column attr="EMAIL" title="EMAIL">
        <o-table-cell-editor-email (editionStarted)="editionStarted($event)" (editionCancelled)="editionCancelled($event)" (editionCommitted)="editionCommitted($event)"></o-table-cell-editor-email>
    </o-table-column>

Custom editors

To create a custom editor, you need to create a new component to display custom editor information and place it inside a cell.

Here’s how you might begin in your file .ts:

Your component must extend OBaseTableCellEditor class.
It also must get the templateref view child reference, using @ViewChild('templateref', { read: TemplateRef, static: false }) public templateref: TemplateRef<any> where you’ll acquire the <ng-template> contents with a TemplateRef and access the view container.
In your editor constructor you must set its type property value.
In your editor constructor you must register it as a new editor, using the OTableColumnComponent addEditor static method.
In your editor, the input must register formControl

In the following example shows how to render two values of column in a cell (“SURNAME, name”) and how to override the getCellData method.

The o-table-cell-editor-name.ts file is as follows:

import { Component, Injector, ViewChild, TemplateRef } from '@angular/core';
import { OBaseTableCellEditor, OTableColumnComponent } from 'ontimize-web-ngx';

@Component({
  selector: 'custom-editor',
  templateUrl: './custom-editor.component.html'
})
export class OTableCellEditorName extends OBaseTableCellEditor {

  @ViewChild('templateref', { read: TemplateRef, static: false }) public templateref: TemplateRef<any>;

  constructor(protected injector: Injector) {
    super(injector);
    this.type = 'custom-editor';
    OTableColumnComponent.addEditor(this.type, OTableCellEditorName);
  }

}

Here’s how you might build your editor html template:

You must wrap your component template with <ng-template #templateref let-cellvalue="cellvalue" let-rowvalue="rowvalue"> and </ng-template>. The let keyword declares a template input variable that you reference within the template. The input variables are cellvalue and rowvalue. The parser translates ‘let cellvalue’ and ‘let rowvalue’ into variables named, let-cellvalue and let-rowvalue.

The o-table-cell-editor-name.html file is as follows:

<ng-template #templateref let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  <div [formGroup]="formGroup">
    <mat-form-field floatLabel="never">
      <input #input matInput type="text" [placeholder]="getPlaceholder()" [formControl]="formControl" [required]="orequired">
      <mat-error *ngIf="hasError('required')">FORM_VALIDATION.REQUIRED</mat-error>
    </mat-form-field>
  </div>
</ng-template>

Finally, add the OTableCellEditorName component to your module.

Validators on editors

You can setup validation on the editors configured in the table with o-validator component.

Using the o-validator component has the advantage that the user can define any validation error message for their editors. For doing that user has to include the o-validator component inside the HTML definition of the o-table-cell-editor.

Below is an example of using the pattern validator.

  <o-table-column attr="PASSWORD" title="PASSWORD" [validators]="validatorsNewPasswordArray">
    <o-table-cell-editor-text>
      <o-validator error-name="hasCapitalCase" error-text="Must have a capital case"></o-validator>
      <o-validator error-name="hasNumber" error-text="Must have a number"></o-validator>
      <o-validator error-name="hasSmallCase" error-text="Must have a small case"></o-validator>
      <o-validator error-name="hasSpecialCharacters" error-text="Must have one special character"></o-validator>
    </o-table-cell-editor-text>
  </o-table-column>

...
  validatorsNewPasswordArray: ValidatorFn[] = [];
  constructor() {
    // check whether the entered password has a number
    this.validatorsNewPasswordArray.push(OValidators.patternValidator(/\d/, 'hasNumber'));
    // check whether the entered password has upper case letter
    this.validatorsNewPasswordArray.push(OValidators.patternValidator(/[A-Z]/, 'hasCapitalCase'));
    // check whether the entered password has small case letter
    this.validatorsNewPasswordArray.push(OValidators.patternValidator(/[a-z]/, 'hasSmallCase'));
    // check whether the entered password has a special character
    this.validatorsNewPasswordArray.push(OValidators.patternValidator(/[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/, 'hasSpecialCharacters'));
  }
...

Input pattern validator

Features

Checkbox selection

The table supports checkbox selection with select-all-checkbox-visible property. If this property is activated will display the row checkboxes, including a master toggle checkbox for the header. It is disabled by default.

OntimizeWeb allows to customize the title, resizing, width, minwidth and maxwidth of the master toggle checkbox for the header by adding the o-table-column-select-all directive to you application. For more information see the API.

<o-table fxFlex attr="customer" title="CUSTOMERS" service="customers" entity="customer" keys="CUSTOMERID" columns="CUSTOMERID;PHOTO;NAME;SURNAME;ADDRESS;STARTDATE;EMAIL;CUSTOMERTYPEID"
      visible-columns="PHOTO;NAME;SURNAME;STARTDATE;EMAIL;ADDRESS;CUSTOMERTYPEID" sort-columns="SURNAME" query-rows="24" quick-filter="yes"
      row-height="medium" select-all-checkbox-visible="true" pageable="no" virtual-scroll="no">
     <o-table-column-select-all title="Omit"></o-table-column-select-all>
</o-table>

Custom select all

You can configure show in the menu on the upper right the option of select row with select-all-checkbox property. It is disabled by default.

Selection multiple table

Additionally, you can specify a function setting the input disable-selection-function to disable the checkboxes depending on a condition. This function receives full data record for allowing you to enable/disable selection checkbox depending on value/s of the record.

The o-table component supports fixed header and footer setting fixed-header="yes" when its content is greater than its own height. For that, you must set the height of the table, using, for example [ngStyle]="height: 400px;". By default, it’s disabled.

Example

<o-table #table attr="table" title="ACCOUNTS" fixed-header="yes" [static-data]="getTableData()" columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;BALANCE;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
    visible-columns="ENTITYID;OFFICEID;CDID;ANID;ACCOUNTTYP;BALANCE" layout-padding sort-columns="ANID" query-on-init="false"
    quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no"
    [ngStyle]="height:400px">
    <o-table-column attr="ENTITYID" title="ENTITYID" width="14%"></o-table-column>
    <o-table-column attr="OFFICEID" title="OFFICEID" width="14%"></o-table-column>
    <o-table-column attr="CDID" title="CDID" width="14%"></o-table-column>
    ...
  </o-table>

Aggregates

Oftentimes, when displaying numbers in the table, users would like to be able to see the results from aggregate calculations at the bottom of the table columns. The o-table component has support for the mostly used aggregate functions (count,sum,avg,min,max).

Example

<o-table service="branches" entity="account" keys="ACCOUNTID"
    columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;BALANCE;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
    visible-columns="ENTITYID;OFFICEID;CDID;ANID;ACCOUNTTYP;BALANCE,INTERESRATE"
    fxFlex layout-padding attr="accounts" title="ACCOUNTS"
    sort-columns="ANID:DESC"  query-on-init="true"
    quick-filter="yes"   filter-case-sensitive="true" >
    <o-table-column attr="BALANCE" title="BALANCE" type="currency" currency-symbol="€" thousand-separator=","></o-table-column>
    <o-table-column attr="INTERESRATE" title="INTERESRATE" type="real" ></o-table-column>
    <o-table-column-aggregate attr="BALANCE" title="sum">
    <o-table-column-aggregate attr="INTERESRATE" [function-aggregate]="custom"></o-table-column-aggregate>
</o-table>

Typescript code

  ...

  custom(data:any[]):number{
    let result = 0;
    for(var i=0;i<data.length;i++){
      if(i%2==0) result+=data[i];
    }
    return result;
  }

You can see this and more examples of this component in the OntimizeWeb playground.

Calculated columns

The o-table supports calculated columns, used when user wants to show an additional column which contains a result of an operation.

Example

In the following example, two calculated columns are defined that perform the same operation but one uses the operation attribute (BALANCExINTERESRATE) and the other the function calculateBenefit.

  <o-table
    service="branches" entity="account" keys="ACCOUNTID"
    columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;BALANCE;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
    visible-columns="ENTITYID;OFFICEID;CDID;ANID;ACCOUNTTYP;BALANCE;INTERESRATE;BENEFIT;BENEFIT2"
    attr="accounts" title="ACCOUNTS"
    layout-padding
    sort-columns="ANID" query-rows="15" pageable="no" >

    <o-table-column attr="ENTITYID" title="ENTITYID"></o-table-column>
    <o-table-column attr="CDID" title="CDID"></o-table-column>
    <o-table-column attr="ANID" title="ANID"></o-table-column>
    <o-table-column attr="BALANCE" title="BALANCE" currency-symbol="€" type="currency" grouping="yes" thousand-separator=","> </o-table-column>
    <o-table-column attr="INTERESRATE" title="INTERESRATE" type="percentage" decimal-separator=","></o-table-column>

  <!--calculated column-->
    <o-table-column-calculated attr="BENEFIT" title="BENEFIT" type="currency" thousand-separator="." decimal-separator="," currency-symbol="€"
      currency-symbol-position="right" operation="(BALANCE*INTERESRATE)" > </o-table-column-calculated>
    <o-table-column-calculated attr="BENEFIT2" title="BENEFIT2"  type="currency" thousand-separator="." decimal-separator="," currency-symbol="€"
      currency-symbol-position="right" [operation-function]="calculateBenefit" > </o-table-column-calculated>


  </o-table>

Typescript code

  ...

  calculateBenefit(rowData: any[]): number {

    return (rowData['BALANCE'] * rowData['INTERESRATE']);
  }

You can see this and more examples of this component in the OntimizeWeb playground.

Table options

The o-table-option component allows to add extra options to the table menu. You only have to add the component to your table and subscribe to the onClick event in your component to perform the desired actions. Check the example below.

<o-table 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">

  <o-table-option #myOption label="My option"></o-table-option>

</o-table>

  import { Component, ViewChild } from '@angular/core';
  import { OTableOptionComponent } from 'ontimize-web-ngx';

  @Component({
    selector: 'my-page',
    templateUrl: 'my-page.component.html'
  })
  export class MyPageComponent {

    @ViewChild('myOption', {static: false})
    protected myOption: OTableOptionComponent;

    ngAfterViewInit() {
      this.myButton.onClick.subscribe(event => {
        alert('my option click');
      });
    }

  }

The o-table allows to add a context menu to table rows, the menu is displayed by right clicking in the table row. For including the context menu in your table you have to include the o-table-context-menu component in your table.

By default, o-table-context-menu include the next options:

Refresh
View detail.
Edit.
Insert.
Delete
Copy options.
Filter options.
Select/Deselect all.
Group by

Below an example.

Table contextual by default

The o-table-context-menu allows to hide these options by setting the attributes insert, edit, view-detail, delete,copy, select-all,refresh,filter to no. You can also include your own context-menu with the reference to a o-context-menucomponent like in the example below.

Example

<o-table 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"
  sort-columns="SURNAME" keys="CUSTOMERID" parent-keys="n:NAME;CUSTOMERTYPEID"
  query-on-init="true" query-rows="6" quick-filter="yes" >

  <o-table-button attr="myButton" label="My button" icon="account_circle"></o-table-button>

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

  ...
   <o-table-context-menu [context-menu]="myContextMenu" insert="no" edit="no" view-details="no"></o-table-context-menu>
</o-table>

<o-context-menu #myContextMenu>
  <o-context-menu-item icon="face" label="Item 1" (execute)="onExecute($event)"></o-context-menu-item>
  <o-context-menu-item icon="star_rate" label="Item 2" enabled="no"></o-context-menu-item>
  <o-context-menu-item label="Item 3" [visible]="getVisible" (execute)="onExecute($event)"></o-context-menu-item>
</o-context-menu>

Table contextual

For more information about the o-context-menu component definition, please read the docs.

You can see this and more examples of this component in the OntimizeWeb playground.

Insertable row

The o-table component allow to insert rows adding the o-table-insertable-row component into the o-table definition. In this component you can define the columns and required columns with columns and required-columns attributes.

Example

In the following example the table has a insertable row where the user may introduce the name, surname or email for inserting a new customer. Name column is required.

<o-table fxFlex attr="customers" title="CUSTOMERS" service="customers" entity="customer" keys="CUSTOMERID" columns="CUSTOMERID;PHOTO;NAME;SURNAME;ADDRESS;STARTDATE;EMAIL"
  visible-columns="NAME;SURNAME;STARTDATE;EMAIL;ADDRESS" sort-columns="SURNAME" query-rows="10" quick-filter="yes"
  pageable="no" row-height="medium" select-all-checkbox="true" pagination-controls="yes">

  <o-table-insertable-row columns="NAME;SURNAME;EMAIL" required-columns="NAME"></o-table-insertable-row>

  <o-table-column attr="NAME" title="NAME" orderable="no"></o-table-column>
  <o-table-column attr="STARTDATE" title="STARTDATE" type="date" format="LL"></o-table-column>
</o-table>

The o-table-insertable-row support 2 differnent positions which can be set via the position input, first and last. By default, it’s last.

To create a custom insertable column, you must define a custom editor for the column following the same steps as in Custom editors and add the column attr column in columns attribute in o-table-insertable-row.

If you add validators to your o-table-cell-editor this validation will work also in the insertable row editors.

You can see more examples of this component in the OntimizeWeb playground.

Table buttons

The o-table component allows to add extra buttons in the toolbar with the o-table-button component.

You can configure:

The icon in `icon` property, this name must to be of google icon (see [Google material design icons](https://design.google.com/icons/){:target='_blank'}))
The label in `label` property

Example

<o-table 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"
  sort-columns="SURNAME" keys="CUSTOMERID" parent-keys="n:NAME;CUSTOMERTYPEID"
  query-on-init="true" query-rows="6" quick-filter="yes" >

  <o-table-button attr="myButton" label="My button" icon="account_circle"></o-table-button>

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

  ...

</o-table>

Typescript code

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

Export table data

The table data can be exported to EXCEL, CSV,.. using the option Export in the table menu.

Export table data

The same data that is in the table gets exported but none the values processed in GUI, ie:

the values obtained by the formatters of the cell renderers
header, cell and row styles
calculated columns
cell aligment
if row grouping, all data will be exported without grouping
if expandable rows exist, all data will be exported without expanding

The operation of the exports depends on whether Ontimize, OntimizeJEE or Ontimize Boot servers are used. You can read more about this topic in the export table data.

NOTE: Ontimize Web data export is compatible with Ontimize, OntimizeEE and Ontimize Boot servers from ontimize-web-ngx: 8.8.0, with previous versions it is compatible with Ontimize and OntimizeEE servers.

Table export button

The o-table component allows to add extra exportation buttons in the exportation dialog with the o-table-export-button component.

You can configure:

The icon using the `icon` property, this name must to be of google icon (see [Google material design icons](https://design.google.com/icons/){:target='_blank'}))
The label with the `label` property
The exportation type by setting the `export-type` property. The value configured here will be used for making the requests to the backend and also al extension for the downloaded file.

Column titles alignment

By default, the o-table columns title texts are aligned depending on the column type.

start: service types and default value when auto-align-titles is active.
center: image, date, action and boolean types.
end: currency, integer, real and percentage types.

Using the o-table-column component title-align input user can modify that default value.

When the auto-align-titles input is set to false in o-table, the title of the table column is aligned centered. The user can also define a title-align in the columns (its value has precedence over the default type alignment).

Global title alignment settings can be specified by providing a value for O_TABLE_GLOBAL_CONFIG in your application root or in a specific module.

@NgModule({
  declarations: [
  ...
  ],
  ...
  providers: [
    ...
    { provide: O_TABLE_GLOBAL_CONFIG, useValue: { autoAlignTitles: false } },
    ...
  ],
  ...
})

Column resizing

The o-table component allows column resizing by default. Using the resizable input you can modify that default value on the table. To disabled resizing for each column, set resizable='no' on the column definition.

Column resizing

Columns multiple sorting

Table allows multiple columns sorting by default. Using the multiple-sort input user can modify that default value.

A column is sorted when user clicks on its header. If the multiple sorting is active the previously sorted columns keeps its state, otherwise the previously sorted column returns to its original state.

The o-table component provides a text that is displayed when the user hovers over an column.

...
  <o-table-column attr="NOTES" title="NOTES" multiline="no" width="300px" tooltip="yes"></o-table-column>
...

Tooltip in table component

You can configure the value that is displayed with the attribute tooltip-value. Additionally, you can specify default function to be applied when the user over column with tooltip-function attribute.

You can customize the tooltip styles by redefining the class o-table-cell-tooltip.

Note: If you have a custom render in the column and it is not overwritten the getCelldata method will show the internal value of the table.

Reinitialize method

When you perform an action like update columns, visible columns, filter by columns, service, entity, keys or primary keys of the table, you will want o-table to update the display to reflect these changes. This function is provided for that purpose.For more information see the API.

...
const columnsOfTable= 'PHOTO;ID;NAME;SURNAME;EMAIL;ADDRESS';
const filterColumnsOfTable= 'NAME;EMAIL';

this.table.reinitialize({ columns: columnsOfTable, visibleColumns: columnsOfTable, filterColumns:filterColumnsOfTable});
...

Expandable row

The o-table-row-expandable component enable you to provide additional details about a particular row of table data through expanding or collapsing its content. It’s necessary to wrap the content of your template with the <ng-template let-row></ng-template> tag and add the template definition inside.

Ontimize Web provides two posibilities for attaching child rows to a parent row in the o-table.

Simple template
A template with context

Simple template

The example below makes use of simple template, the content of the child row in this example is defined by the ng-template with the let-row attribute so that exposes the variable row in the template to show the information.

 <o-table fxFill #table service-type="DummyService" service="customers" entity="customer" keys="CUSTOMERID" columns="CUSTOMERID;SURNAME;NAME"
      title="CUSTOMERS" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="yes" detail-mode="none" export-button="no"
      query-rows="10" fixed-header="yes">
      <o-table-row-expandable>
        <ng-template let-row>
          <o-column title="CONTACT_DATA" icon="info" class="vertical-margin-10" layout-gap="12px">
            <div fxLayout="row wrap" fxLayoutGap="14px">
              <span fxFlex="30%"><strong>{{'ADDRESS' | oTranslate}}</strong>: {{row.ADDRESS}}</span>
              <span fxFlex="20%"><strong>{{'COUNTRY' | oTranslate}}</strong>: {{row.COUNTRY}}</span>
              <span fxFlex="20%"><strong>{{'STATE' | oTranslate}}</strong>: {{row.STATE}}</span>
              <span fxFlex="20%"><strong>{{'ZIPCODE' | oTranslate}}</strong>: {{row.ZIPCODE}}</span>
            </div>
            <div fxLayout="row wrap" fxLayoutGap="14px">
              <span fxFlex="20%"><strong>{{'EMAIL' | oTranslate}}</strong>: {{row.EMAIL}}</span>
              <span fxFlex="20%"><strong>{{'PHONE' | oTranslate}}</strong>: {{row.PHONE}}</span>
            </div>
          </o-column>
        </ng-template>
      </o-table-row-expandable>

    </o-table>

Row expanded

A template with context

It is possible to define a template with context, so that if the defined template contains a component (such as o-table, o-list, o-chart and o-grid), this context provide functionalities like parent-keys and query the component data automatically when the row is expanded, for example.

NOTE: It is necessary define targets input and [data]="row" to query the data automatically, it will be the references of the components whose query will be launched when expanding the row. The context is established with [data]="row"

<o-table fxFill #table service-type="DummyService" service="customers" entity="customer" keys="CUSTOMERID" columns="CUSTOMERID;SURNAME;NAME"
  title="CUSTOMERS" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" detail-mode="none" export-button="no"
  store-state="false" query-rows="10" fixed-header="yes">
  <o-table-row-expandable>
    <ng-template let-row>
      <o-expandable-container [targets]="[accountsTable]" [data]="row">
        <o-table #accountsTable service-type="DummyService" service="customers" entity="customerAccount" parent-keys="CUSTOMERID" keys="ACCOUNTID"
          columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;ACCOUNT;BALANCE;CUSTOMERID;STARTDATE" visible-columns="ACCOUNT;BALANCE;STARTDATE"
          title="ACCOUNTS" sort-columns="STARTDATE" query-on-init="false" query-rows="6" pageable="no" insert-button="no" delete-button="no"
          detail-mode="none">
          <o-table-column attr="ACCOUNT" title="ACCOUNT" class="o-table-column-centered"></o-table-column>
          <o-table-column attr="STARTDATE" title="STARTDATE" type="date" format="LL"></o-table-column>
          <o-table-column attr="BALANCE" title="BALANCE" type="currency" currency-symbol="€" currency-symbol-position="right"
            thousand-separator="." decimal-separator=",">
          </o-table-column>
        </o-table>
      </o-expandable-container>
    </ng-template>
  </o-table-row-expandable>
</o-table>

Row expanded with a template with context

The o-table component has an input to control expandable row and show or not the expansion icon. This input show-expandable-icon-function must set a function that will receive data of expandable row and has to return a boolean observable. You can check a complete example here.

Autoadjust

The o-table component supports automatically adjust to the content of the column. This means that it will always take up the minimum width required to present its content. If you want avoid that behaviour setting auto-adjust = no in the o-table component.

Global default autoadjust can be specified by providing a value for O_TABLE_GLOBAL_CONFIG in your application’s root module.

@NgModule({
  declarations: [
  ...
  ],
  ...
  providers: [
    ...
    { provide: O_TABLE_GLOBAL_CONFIG, useValue: { autoAdjust: false } },
    ...
  ],
  ...
})

Example

 <o-table fxFlex attr="customers" title="CUSTOMERS" service="customers" entity="customer" keys="CUSTOMERID"
    columns="CUSTOMERID;PHOTO;NAME;SURNAME;ADDRESS;STARTDATE;EMAIL;CUSTOMERTYPEID"
    visible-columns="PHOTO;NAME;SURNAME;STARTDATE;EMAIL;ADDRESS;CUSTOMERTYPEID" sort-columns="SURNAME" query-rows="10" quick-filter="yes"
    row-height="medium" select-all-checkbox="true" pageable="yes" fixed-header="yes" query-rows="25" auto-adjust="yes">
    <o-table-columns-filter columns="STARTDATE;SURNAME"></o-table-columns-filter>
    <o-table-column async-load="true" width="48px" attr="PHOTO" orderable="no" searchable="no" type="image"
      image-type="base64" empty-image="assets/images/no-image.png" avatar="yes">
    </o-table-column>
    <o-table-column attr="NAME" title="NAME" orderable="no"></o-table-column>
    <o-table-column attr="STARTDATE" title="STARTDATE" type="date" format="LL"></o-table-column>
    <o-table-column attr="CUSTOMERTYPEID" title="CUSTOMERTYPEID" editable="true">
      <o-table-cell-renderer-service service="customers" entity="customerType"
        value-column="DESCRIPTION" translate="no"
        columns="CUSTOMERTYPEID;DESCRIPTION" visible-columns="DESCRIPTION">
      </o-table-cell-renderer-service>
    </o-table-column>
  </o-table>

Table width autoadjust

There is a possibility that the content is large and the result is not what is expected like the example shown below.

Table width autoadjust

However, if you want to control similar case, you can do so by configuring auto-adjust="yes" with several options such as:

horizontal-scroll=yes
multiline=yes
max-width of the o-table-column.

In the next case we have applied horizontal-scroll=yes and auto-adjust="yes", the result would be the following.

Table width autoadjust

As you can see, in the next case we have applied multiline=yes and auto-adjust="yes", the result would be the following.

Table width autoadjust

In the next case we have applied max-width="300px" in o-table-column and auto-adjust="yes", the result would be the following..

<o-table-column attr="NOTES" title="NOTES" multiline="no" max-width="300px"></o-table-column>

Table width autoadjust

Row grouping

Ontimize Web allows to merge fields belonging to one column so that the consecutive fields have the same value through the row grouping. Each group will be marked with one row with joined cells above containing the group value.

By default, the table is groupable and for grouping/ungrouping by one o more columns, you can:

Configure grouped columns by default with the grouped-columns property. As you can see in the example below, as soon as there is at least one active row.

Table row group

Use the table menu: click the Group / Ungroup by option to configure the columns you need to group / ungroup by.

Use the table context menu: Right-click the column data to invoke context menu and click on Group by -> Group by column . The context menu also allows you to ungroup by a column or by all.

You can collapse/expand all grouped rows if you right-click on the grouped row.

Context menu in grouped row

Use the o-table-columns-grouping and o-table-columns-grouping-column components: this components are used to configure the initial state of the row grouping and override the table grouping configuration.

If there is at least one grouping, the table automatically applies the sum function on those of type currency, integer and real and whose value will be displayed in the grouped row. If you want to exclude this function from being performed, you must add this column in the excluded-aggregate-columns attribute in o-table-columns-grouping component.

You can configure the aggregate functions (count,sum,avg,min,max) in the o-table-columns-grouping component. Additionally, you can specify aggregate function to be applied with function-aggregate attribute.

By default, when you change the aggregate function in a column, it will change in all grouped rows of the same level, if you want to avoid this behavior you must add change-aggregate-same-level="no".

  <o-table fxFill #table service-type="DummyService" service="olympicWinners" entity="olympicWinners"
      columns="athlete;age;country;year;date;sport;gold;silver;bronze" grouped-columns="country;year;date;sport" layout-padding title="ACCOUNTS"
      quick-filter="yes" insert-button="no" delete-button="no" refresh-button="no" pagination-controls="no" export-button="no"
      detail-mode="none">
      <o-table-columns-grouping columns="country;sport" excluded-aggregate-columns=''>
        <o-table-columns-grouping-column attr="age" title="edad" aggregate="max"> </o-table-columns-grouping-column>
        <o-table-columns-grouping-column attr="gold" aggregate="max"> </o-table-columns-grouping-column>
      </o-table-columns-grouping>
      <o-table-context-menu insert="no" edit="no" view-detail="no" refresh="no" delete="no"></o-table-context-menu>
    </o-table>

Table row group

If the table is groupable but you want the column isn’t groupable you must add groupable=false in this column definition.

Table allows expands/collapses all rows on same level by default. Using expand-groups-same-level property you can modify the default value.

You can configure if you want the groups to appear by default expanded or collapsed with collapse-grouped-columns property.

For more information see the API.

NOTE: There is no limit on the number of columns that the table can group by.

Row height

In the o-table you can configure various density levels using row-height property that it is easy to specify the font and the paddings on the table defined in this link.

The default value being medium with small being the most compact option and large being the least.

Input row-height

Report on demand new

The o-table component has a new option in table menu that allows the final users of the applications developed with Ontimize to define, view and store reports from any table available in the application. This menu option is enabled by default. Using show-report-on-demand-option property you can modify the default value. For more information see the API. You can also find more information about reports in their documentation following this link.

Report on-demand example

Reset columns width new

The o-table component has a new option in table menu that allows the width of the table columns to be reset to their initial width. This menu option is enabled by default. Using show-reset-width-option property you can modify the default value. For more information see the API.

Reset columns width

The o-table component allows to add content in the toolbar with the selector o-table-toolbar at start position by default but you can configure the position with position='start' at the start or at the end with the position='end'.

If the selector o-table-toolbar is used together with position='start' the content will always be placed to the right of the New/Refresh/Delete and o-table-buttons buttons and if used together with position='end' the content will always be placed to the left of the quickfilter

 <o-table #table fxFlex attr="table" title="Table" quick-filter="true" insert-button="false"  delete-button="false" refresh-button="false" ..>
    <!-- Custom definition button -->
    <o-table-button attr="action1" (onClick)="onAction1()" label="Action1" icon="alarm"></o-table-button>
    <!-- Custom content toolbar in position start -->
    <o-combo o-grid-toolbar position="start" label="Sort" width="100px"...></o-combo>
    <!-- Custom content toolbar in position end -->
    <o-slide-toggle o-grid-toolbar position="end"....></o-slide-toggle>
    ...
  </o-grid>

Add custom content in toolbar in position start

Support JDBC UUID new

Ontimize web now supports the JDBC UUID sql type. To indicate that a table column is of type UUID, all you have to do is to set sql-type="UUID" in the o-table-column component as indicated in the following example.

    <o-table #table ...>
      <o-table-column attr="ID" sql-type="UUID"> </o-table-column>
      ...
    </o-table>

Theming

The table headers

You can customize the tables changing the color of the headers. For example with the primary palette by following the steps below.

Define the style of mat-header-cell in a “theme file”

First, create a Sass mixin that accepts an Angular Material color theme and outputs the color-specific styles for the component.

custom-row-header-theme.scss

// Import library functions for theme creation.
@import '~@angular/material/theming';

@mixin custom-row-header-theme($theme) {
  // Extract the palettes you need from the theme definition.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  // Define the styles that affect the table header by the theme
  .o-table .o-table-body .mat-table .mat-header-roww{
      .mat-header-cell {
        background-color: mat-color($primary);
        color: mat-color($primary, default-contrast);
      }
  }
}

Note: using the mat-color function to extract colors from a palette.

Include the theme mixin in your application

Use the Sass @include keyword to include a component’s theme mixin wherever you’re already including Angular Material’s built-in theme mixins.

app.scss

/***** Importing ontimize-web-ngx-theming prebuilt theme (choose one) *****/
/* @import 'node_modules/ontimize-web-ngx-theming/src/themes/mat-indigo-pink.scss'; */
/* @import 'node_modules/ontimize-web-ngx-theming/src/themes/mat-deeppurple-amber.scss;'*/
/* @import 'node_modules/ontimize-web-ngx-theming/src/themes/mat-pink-bluegrey.scss';*/
/* @import 'node_modules/ontimize-web-ngx-theming/src/themes/mat-purple-green.scss';*/

@import 'node_modules/ontimize-web-ngx-theming/src/themes/ontimize.scss';
/*
* After define theme, it is necessary to transfer color to Ontimize Web framework
*/
@import 'node_modules/ontimize-web-ngx/ontimize/components/theming/all-theme.scss';
@include o-material-theme($theme);

/*
* Propagate theme to custom component definition.
*/
@import '../../app/shared/custom-row-header-theme.scss';
@include custom-row-header-theme($theme);

Theming your table

Demo

You can see this and more examples of this component in the OntimizeWeb playground.

Name	Since	Description	Default
auto-adjust no \| false \| yes \| true		Indicates whether or not to auto adjust column width to its content.	yes
auto-align-titles no \| false \| yes \| true		Indicates whether or not to auto align the table header cells	yes
collapse-grouped-columns yes\|no\|true\|false		Whether collapse the grouped columns by default	no
columns-visibility-button no \| false \| yes \| true		Indicates whether or not to show a button on the header menu for changing columns visibility	yes
default-visible-columns string		Initial visible columns. Separated by ‘;’
delete-button no \| false \| yes \| true		Indicates whether or not to show a button for deleting data	yes
detail-mode none \| click \| dblclick		Action for access the edition screen. The priority between edition-mode, selection-mode and detail-mode is 1->detail-mode, 2->edition-mode, 3->selection-mode.	click
disable-selection-function (row: any) => boolean	8.8.3	Function that will be used to allow row selection by changing the enable/disable state of the checkboxes of the rows.
edition-mode none \| click \| dblclick		Action for changing a cell to edition mode. The priority between edition-mode, selection-mode and detail-mode is 1->detail-mode, 2->edition-mode, 3->selection-mode.	none
enabled no \| false \| yes \| true		Indicates whether or not the table is enabled	yes
export-button no \| false \| yes \| true		Indicates whether or not to show a button on the header menu for exporting data	yes
export-service-type string		The service used by the table for exporting it’s data, it must implement ‘IExportService’ interface. Default: ‘OntimizeExportService’
filter-column-active-by-default no \| false \| yes \| true		Indicates whether or not to show the filter by column icon in the table header by default	yes
fixed-header no \| false \| yes \| true		Indicates whether or not to have a fixed header when the content is greather than its own height	yes
groupable no \| false \| yes \| true		Indicates whether or not to group by column	no
grouped-columns string		Grouped columns separated by ‘;’. Default: no value
horizontal-scroll no \| false \| yes \| true		Indicates whether or not to allow horizontal scroll	no
keep-selected-items
multiple-sort no \| false \| yes \| true		Indicates whether or not to allow multiple columns sorting	yes
orderable
pagination-controls no \| false \| yes \| true		Indicates whether or not to show the pagination controls	yes
quick-filter-function (filter: string) => IFilterExpression \| Object		Function for passing a custom filter value to paginated service queries
refresh-button no \| false \| yes \| true		Indicates whether or not to show a button for refreshing data	yes
resizable no \| false \| yes \| true		Indicates whether or not the table columns are resizables	yes
row-class (rowData: any, rowIndex: number) => string \| string[]		Adds the CSS class or classes returned by the provided function to the table rows whose data and index are provided
select-all-checkbox no \| false \| yes \| true		Indicates whether or not to show a option in the menu of the table that it have capacity show a column of checkboxes for selecting table rows	no
select-all-checkbox-visible no \| false \| yes \| true		Indicates whether or not to show the column of checkboxes for selecting table rows in the table	no
select-column-visible no \| false \| yes \| true		Indicates whether or not the table columns are resizables	yes
selection-mode none \| single \| multiple		Row selection mode. The priority between edition-mode, selection-mode and detail-mode is 1->detail-mode, 2->edition-mode, 3->selection-mode.	multiple
show-buttons-text no \| false \| yes \| true		Indicates whether or not to show text in header buttons	yes
show-charts-on-demand-option yes\|no\|true\|false		Indicates whether or not to show the chart on demand menu option in the header menu	yes
show-configuration-option no \| false \| yes \| true		Indicates whether or not to show a option on the header menu for configuration	yes
show-expandable-icon-function Function	8.5.4	Indicates a function that will be executed on table creation to show or not icon to expand or collapse expandable rows. The function must return a boolean observable.
show-filter-option no \| false \| yes \| true		Indicates whether or not to show the filter menu option in the header menu	yes
show-paginator-first-last-buttons no \| false \| yes \| true		Indicates whether or not to show the go to the first and last page in the table pagination	yes
show-report-on-demand-option yes\|no\|true\|false		Indicates whether or not to show the report on demand menu option in the header menu	yes
show-reset-width-option yes\|no\|true\|false		Indicates whether or not to show the reset width menu option in the header menu	yes
show-table-buttons-text no \| false \| yes \| true		Indicates whether or not to show table actions text alongside icons	yes
show-title no \| false \| yes \| true		Indicates whether or not to show the table title in the toolbar	no
sort-columns string		Initial ordering, using [ ASC or DESC ] format. Separated by ‘;’
virtual-scroll yes\|no\|true\|false		Whether enabled or not virtual scrolling by default	yes
visible-columns string		Visible columns. Separated by ‘;’
visible-export-dialog-buttons string		Visible buttons in export dialog, separated by ‘;’

Name	Description
onClick	Event triggered when a row is clicked
onDataLoaded	Event triggered when the data is updated
onDoubleClick	Event triggered when a row is double clicked
onPaginatedDataLoaded	Event triggered when the 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

Name	Description	Default
async-load no \| yes \| true \| false	Asynchronous query for this column	no
async-validators AsyncValidatorFn[]	Array of custom async validators to apply to the component value. Each element must be a Angular AsyncValidatorFn	[]
attr string	Column name
content-align start \| center \| end	Column cell context alignment
editable no \| false \| yes \| true	Indicates whether or not the column content can be edited.	no
format string	Indicates the format in which you want to represent the date	LL
groupable no \| yes \| true \| false	Indicates whether or not the column is groupable	yes
max-width string	Indicates the max width of the column in px
min-width string	Indicates the min width of the column in px
multiline no \| yes \| true \| false	Indicates whether or not to display the cell content in multiple lines if it is needed	no
orderable no \| false \| yes \| true	Indicates whether or not the column can be sorted	yes
resizable no \| yes \| true \| false	Indicates whether or not to resizable the column	yes
searchable no \| false \| yes \| true	Indicates whether or not the column content can be searched	yes
show-notification-on-edit no \| false \| yes \| true	Indicates whether or not to show a toast indicating the succesfull update on editable columns	no
sql-type string	Data type according to Java standard. See SQL Types	OTHER
title string	Column title	By default it is the attr translation except in the column of type action and image which by default the title doesn’t show it
title-align start \| center \| end \| auto	Column title cell text alignment	center
tooltip no \| yes \| true \| false	Indicates whether or not the tooltip over column	no
tooltip-function function	Callback function that will be executed when the mouse pointer over the column
tooltip-value string
type string \| boolean \| integer \| real \| currency \| percentage \| date \| image \| action \| service \|translate	Column data type	string
validators ValidatorFn[]	Array of custom validators to apply to the component value. Each element must be a Angular ValidatorFn	[]
validators-errors ErrorData[]	Array of custom validators error information (synchronous or asynchronous). Each element must have a ‘name’ property corresponding to the validator error name and a ‘text’ property that will be displayed when the component value does not satisfy the validator condition	[]
width string	Indicates the width of the column in px or %

Name	Description	Default
columns string	Filterable columns separated by ‘;’. For each column attr it is indicated by which value is filtered, whether by the model (MODEL) or by the rendered (VIEW), using VIEW as default.	o-table visible-columns value
mode default \| selection \| custom	Indicates the component performance mode.	default
preload-values no \| false \| yes \| true	Indicates whether or not to show the list values when the filter dialog is opened.	yes

Name	Description	Default
attr string	Field identifier. Registry property if component is inside a form.
sort asc\|desc\|''	Indicates sorting default of the results.	’’
start-view month\|year\|multi-year	Indicates initial view for datepicker.	month

Name	Since	Description	Default
page-size number		Number of items to display on a page. By default set to 10	10
page-size-options array		The set of provided page size options to display to the user.	10; 25; 50; 100

Name	Description	Default
aggregate sum \| count \| avg \| min \| max	Default functions aggregate	sum
attr string	Column name
functionAggregate (value:any[]) => number	Custom function aggregate
title string	Title for the header total column.

Name	Since	Description
operation string		Define the formula for the calculated column.
operation-function (rowData: any[]) => number		Responsible function for calculating the column values. It shoud return a number. The param ‘rowData’ contains the row values.

Name	Description	Default
context-menu OContextMenuComponent	Context menu component reference.
copy boolean	Indicates whether or not to show the option copy in the contextual menu.	yes
delete boolean	Indicates whether or not to show the option to delete all in the contextual menu.	yes
edit boolean	Indicates whether or not to show the option edit in the contextual menu.	yes
filter boolean	Indicates whether or not to show the filtering options in the contextual menu.	yes
group-by-row boolean	Indicates whether or not to show the option to group by row in the contextual menu.	yes
insert boolean	Indicates whether the option to insert in the contextual menu is shown.	yes
refresh boolean	Indicates whether or not to show the option to refresh all in the contextual menu.	yes
select-all boolean	Indicates whether or not to show the option to select all in the contextual menu.	yes
view-detail boolean	Indicates whether or not to show the option view details in the contextual menu.	no

Name	Description	Default
columns string	Insertable columns. Separated by ‘;’	All visible columns
include-parent-keys no \| false \| yes \| true	Indicates whether or not to include the table parent-keys values in the insertion values	yes
position first \| last	Indicates wheter the insertable row is shown as first or last table record.	last
requiredColumns string	Required columns for doing a insertion. Separated by ‘;’
show-placeholder no \| false \| yes \| true	Indicates whether or not to show placeholder in row controls.	no

Name	Description	Default
export-type string	Indicates the exportation type
icon string	Name of google icon (see Google material design icons)	priority_high
label string	Field label
svg-icon string	Name of svg icon

Name	Description	Default
expandable-column-visible no \| false \| yes \| true	Indicates whether or not to show a expandable column.	yes
icon-collapse string	Icon name to collapse of google icon (see Google material design icons)	remove
icon-expand string	Icon name to expand of google icon (see Google material design icons)	add
multiple no \| false \| yes \| true	Indicates whether or not to show multiple expanded rows at once.	yes

Name	Description
onCollapsed	Event triggered when a row is collapsed
onExpanded	Event triggered when a row is expanded

Name	Since	Description
data object
targets Array		Components whose query will be launched when expanding the row

Name	Since	Description
columns string		Grouped columns separated by ‘;’. Default: no value
excluded-aggregate-columns string[]		Excluded columns from aggregation operations separated by ‘;’. Default: no value

getAllValues
Returns the table data.
Parameters
any[]

getAllRenderedValues
Returns the table renderer data.
Parameters
any[]

reinitialize
Allow reinitialize table options adding options
Parameters
OTableInitializationOptions

toogleRowExpandable
Allow to expand or collapse the expandable row.
Parameters
row:data, rowIndex:number, event:Event

Name	Description	Default
aggregate sum \| count \| avg \| min \| max	Default functions aggregate	sum
aggregate-function (value: any[]) => number	Function that calculates a value on the values of the column ‘attr’
aggregate-name string	Name of the aggregate option
attr string	The column name
change-aggregate-same-level boolean	Whether change the aggregate function on all grouped rows of the same level	true
expand-groups-same-level boolean	Whether click in row expands/collapses all rows on same level. By default: true	true
title string	Title for the header aggregate column

Name	Since	Description	Default
max-width string	8.12.0	Indicates the min width of the column in px
min-width string	8.12.0	Indicates the min width of the column in px
resizable no \| yes \| true \| false	8.12.0	Indicates whether or not to resizable the column	yes
title string	8.12.0	Title for the header aggregate column
width string	8.12.0	Indicates the width of the column in px or %

Name	Description	Default
action detail \| edit	Default action of the cell when its clicked, triggers the navigation to the indicated mode
icon string	Name of google icon (see Google material design icons)
icon-position left \| right	Icon position with respect to the text (if exists)	left
svg-icon string	Name of svg icon
text string	Cell text

Name	Description	Default
boolean-type number \| boolean \| string	Type of the cell value	boolean
false-value string	Value considered as false
render-false-value string	Value displayed as false
render-true-value string	Value displayed as true
render-type string \| number \| icon \| image	Type of the cell displayed value	string
true-value string	Value considered as true

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

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
parent-keys string	Filtering keys. Separated by ‘;’. It is possible to use alias on the following way: entityCol1:tableCol1;entityCol2;tableCol2… where entityCol1 and entityCol2 are columns from the entity requested in the cell renderer and tableCol1 and tableCol2 are table columns.
query-method string	Service method name for queries	query
service string	JEE service path
service-type string	Injection token indicated in the provider of the service
value-column string	Column of the entity from where the component will get its value

Name	Description	Default
auto-commit yes \| no \| true \| false	Indicates whether or not to automatically change the cell value without rendering the editor (a checkbox)	yes
boolean-type number \| boolean \| string	Type of the cell value	boolean
false-value number \| boolean \| string	Value considered as false	false
indeterminate-on-null no \| false \| yes \| true		no
true-value number \| boolean \| string	Value considered as true	true

Name	Description	Default
date-value-type timestamp \| string	Inner value type of the table cell. Used for sending the cell data to the server in order to perform an update	string
filter-date (date: Date) => boolean	Function for filtering datepicker possible values
format string	Date format. See MomentJS
locale string. Values like es, en, ...	Configured language locale	Application configured locale
max string	Maximum selectable date
min string	Minimum selectable date
start-at string	Start date
start-view month \| year		month
touch-ui no \| false \| yes \| true	Indicates wheter to use the datepicker ‘touch-ui’ mode	no

Name	Description	Default
max number	Maximum value
min number	Minimum value
step number	Number interval	1

Introduction

Define columns

Example

CRUD operations

Sorting

Example

Pagination

Example

Data binding

Binding to local data

Example

Binding to remote data

Example

Quick filter

Filtering by columns

Example

Example with o-table-columns-filter-column component

Custom filter

Cell renderers

Predefined renderers

Custom renderers

Cell editing

Default editors

Custom editors

Validators on editors

Features

Checkbox selection

Fixed header and footer

Example

Aggregates

Example

Typescript code

Calculated columns

Example

Typescript code

Table options

Table context menu

Example

Insertable row

Example

Table buttons

Example

Typescript code

Export table data

Table export button

Column titles alignment

Column resizing

Columns multiple sorting

Tooltip in columns

Reinitialize method

Expandable row

Autoadjust

Example

Row grouping

Row height

Report on demand new

Reset columns width new

Custom content in toolbar new

Support JDBC UUID new

Theming

The table headers

Demo

OTableComponent

Inherited inputs

Inputs

Outputs

Methods

OTableColumnComponent

Inputs

OTableColumnsFilterComponent

Inputs

OTableColumnsFilterColumnComponent

Inputs

OTablePaginatorComponent

Inputs

OTableOptionComponent

Inputs

OTableColumnAggregateComponent

Inputs

OTableColumnCalculatedComponent

Name	Description	Default
date-format string	Date format. See MomentJS format	MomentJS localized format L (see Localized formats in MomentJS format)
date-locale string. Values like es, en, ...	Configured language locale	Application configured locale
date-max string	Maximum selectable date
date-min string	Minimum selectable date
date-placeholder string	The placeholder text for the date input
date-start-at string	Start date
date-text-input-enabled no \| false \| yes \| true	Indicates whether or not to allow the user to edit the date input manually	yes
hour-format 12 \| 24	Hour format. 12 hours format with AM PM	24
hour-max string	Maximum selectable date
hour-min string	Minimum selectable date
hour-placeholder string	The placeholder text for the hour input
hour-text-input-enabled no \| false \| yes \| true	Indicates whether or not to allow the user to edit the hour input manually	yes