Table

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 ‘;’

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

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 %

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

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

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

attr

string

Field identifier. Registry property if component is inside a form.

enabled

no | false | yes | true

Indicates whether or not the field is enabled

yes

icon

string

Name of google icon (see Google material design icons)

priority_high

label

string

Field label

show-active-icon

no | false | yes | true

Indicates whether or not to show a icon when option is active

no

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.

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.

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

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

onPostInsertRecord

Event triggered when a successful insertion is done

attr

string

Field identifier. Registry property if component is inside a form.

enabled

no | false | yes | true

Indicates whether or not the field is enabled

yes

icon

string

Name of google icon (see Google material design icons)

priority_high

icon-position

left | right

Icon position with respect to the text (if exists)

left

label

string

Field label

svg-icon

string

Name of svg icon

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

onClick

Event triggered when the export button is clicked

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

onCollapsed

Event triggered when a row is collapsed

onExpanded

Event triggered when a row is expanded

data

object

targets

Array

Components whose query will be launched when expanding the row

quick-filter-placeholder

string

Quick filter input placeholder text

onChange

Event triggered when the quick filter value changes

columns

string

Grouped columns separated by ‘;’. Default: no value

excluded-aggregate-columns

string[]

Excluded columns from aggregation operations separated by ‘;’. Default: no value

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

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 %

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

onClick

Event triggered when cell renderer is clicked

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

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 (,)

format

string

Date format. See MomentJS

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 (,)

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

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

0

min-decimal-digits

number

The minimum number of decimal digits

2

thousand-separator

string

Thousand digits chacarter separator (in case of grouping)

Comma (,)

value-base

1 | 100

Indicates whether de numeral system of the value received by the cell renderer is 1 or 100

1

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 (,)

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

translate-params

(rowData: any) => any[]

Function that receives the row data and return the parameters for the translate pipe

format

string

Date and time format. See MomentJS

L HH:hh a

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

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

max

number

Maximum value

min

number

Minimum value

step

number

Number interval

1

max

number

Maximum value

min

number

Minimum value

step

number

Number interval

0.01

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