Table

OTableComponent

Directive: o-table

Inherited inputs

  • from OServiceBaseComponent:
    • attr
    • columns
    • delete-method
    • entity
    • insert-method
    • keys
    • pageable
    • paginated-query-method
    • parent-keys
    • query-fallback-function
    • query-method
    • query-on-bind
    • query-on-init
    • query-rows
    • query-with-null-parent-keys
    • service
    • service-type
    • static-data
    • store-state
    • update-method
  • from OServiceComponent:
    • controls
    • detail-button-in-row
    • detail-button-in-row-icon
    • detail-form-route
    • detail-mode
    • edit-button-in-row
    • edit-button-in-row-icon
    • edit-form-route
    • enabled
    • filter-case-sensitive
    • insert-button
    • insert-form-route
    • quick-filter
    • recursive-detail
    • recursive-edit
    • recursive-insert
    • row-height
    • title
    • visible

Inputs

Name Description Default

auto-align-titles

no | false | yes | true

Indicates whether or not to auto align the table header cells

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

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

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-mode

visible | local | all

Mode export data

visible

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

no

fixed-header

no | false | yes | true

Indicates whether or not to have a fixed header and footer when the content is greather than its own height

no

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 | simple | 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-configuration-option

no | false | yes | true

Indicates whether or not to show a option on the header menu for configuration

yes

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

visible-columns

string

Visible columns. Separated by ‘;’

visible-export-dialog-buttons

string

Visible buttons in export dialog, separated by ‘;’

Outputs

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

Methods

getValue
Returns the current page table data.
Returns
any[]
getRenderedValue
Returns the current page table renderer data.
Parameters
any[]
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
queryData
Allow to manage the call to the service data.
Parameters
filter:any, ovrrArgs?: OQueryDataArgs
add
Triggers navigation to new item insertion
Parameters
remove
Remove selected rows
Parameters
clearSelectedItems: boolean = false
showAndSelectAllCheckbox
Select all rows.
Parameters
reloadData
Reload table data.
Parameters
editDetail
Triggers navigation to item edition, receiving item data
Parameters
item: any
viewDetail
Triggers navigation to item detail, receiving item data
Parameters
item: any
clearFilters
Clear all filters(column filter and quickfilter) and reload data
Parameters
riggerDatasourceUpdate: boolean = true
setDataArray
Set static data.
Parameters
data: Array
getDataArray
Get data table
getSqlTypes
Get sqlTypes from data source
Parameters

OTableColumnComponent

Directive: o-table-column

Inputs

Name Description Default

async-load

no | yes | true | false

Asynchronous query for this column

no

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

max-width

string

Indicates the min 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

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

width

string

Indicates the width of the column in px or %

* required inputs.

OTableColumnsFilterComponent

Directive: o-table-columns-filter

Inputs

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

OTableColumnsFilterColumnComponent

Directive: o-table-columns-filter-column

Inputs

Name Description Default

attr

string

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

sort

asc|desc|''

Indicates sorting default of the results.

’’
* required inputs.

OTablePaginatorComponent

Directive: o-table-paginator

Inputs

Name Description Default

page-size

number

Number of items to display on a page. By default set to 10

10

OTableOptionComponent

Directive: o-table-option

Inputs

Name Description Default

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
* required inputs.

OTableColumnAggregateComponent

Directive: o-table-column-aggregate

Inputs

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.

* required inputs.

OTableColumnCalculatedComponent

Directive: o-table-column-calculated

Inputs

Name 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.

OTableContextMenuComponent

Directive: o-table-context-menu

Inputs

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

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
* required inputs.

OTableInsertableRowComponent

Directive: o-table-insertable-row

Inputs

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

Outputs

Name Description

onPostInsertRecord

Event triggered when a successful insertion is done

OTableButton

Directive: o-table-button

Inputs

Name Description Default

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

* required inputs.

OTableExportButton

Directive: o-table-export-button

Inputs

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

Outputs

Name Description

onClick

Event triggered when the export button is clicked

OTableRowExpandableComponent

Directive: o-table-row-expandable

Inputs

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

Outputs

Name Description

onCollapsed

Event triggered when a row is collapsed

onExpanded

Event triggered when a row is expanded

OExpandableContainerComponent

Directive: o-expandable-container

Inputs

Name Description

data

object

targets

Array

Components whose query will be launched when expanding the row

OTableCellRendererActionComponent extends OBaseTableCellRenderer

Directive: o-table-cell-renderer-action

Inherited properties

Inherited inputs

Inputs

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

Outputs

Name Description

onClick

Event triggered when cell renderer is clicked

OTableCellRendererImageComponent extends OBaseTableCellRenderer

Directive: o-table-cell-renderer-boolean

Inherited properties

Inherited inputs

Inputs

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

OTableCellRendererCurrencyComponent extends OBaseTableCellRenderer

Directive: o-table-cell-renderer-currency

Inherited properties

Inherited inputs

Inputs

Name Description Default

currency-symbol

string

Currency symbol (According to ISO 4217)

dolar ($)

currency-symbol-position

left | right

Position of currency symbol

left

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

OTableCellRendererDateComponent extends OBaseTableCellRenderer

Directive: o-table-cell-renderer-date

Inherited properties

Inherited inputs

Inputs

Name Description

format

string

Date format. See MomentJS

OTableCellRendererIntegerComponent extends OBaseTableCellRenderer

Directive: o-table-cell-renderer-integer

Inherited properties

Inherited inputs

Inputs

Name Description Default

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

OTableCellRendererImageComponent extends OBaseTableCellRenderer

Directive: o-table-cell-renderer-image

Inherited properties

Inherited inputs

Inputs

Name Description Default

avatar

no | false | yes | true

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

no

empty-image

string

Image URL when field has no value

image-type

base64 | url

Image type (external URL or base64)

Model value

OTableCellRendererPercentageComponent extends OTableCellRendererRealComponent

Directive: o-table-cell-renderer-percentage

Inherited properties

Inherited inputs

Inputs

Name Description Default

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

OTableCellEditorRealComponent extends OTableCellRendererIntegerComponent

Directive: o-table-cell-renderer-real

Inherited properties

Inherited inputs

Inputs

Name Description Default

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

OTableCellRendererServiceComponent extends OBaseTableCellRenderer

Directive: o-table-cell-renderer-service

Inherited properties

Inherited inputs

Inputs

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

OTableCellRendererTranslateComponent extends OBaseTableCellRenderer

Directive: o-table-cell-renderer-translate

Inherited properties

Inherited inputs

Inputs

Name Description

translate-params

(rowData: any) => any[]

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

OTableCellRendererTimeComponent extends OBaseTableCellRenderer

Directive: o-table-cell-renderer-time

Inherited properties

Inherited inputs

Inputs

Name Description Default

format

string

Date and time format. See MomentJS

L HH:hh a

OTableCellEditorTextComponent extends OBaseTableCellEditor

Directive: o-table-cell-editor-text

Inherited inputs

  • from OBaseTableCellEditor:
    • enabled
    • label
    • required
    • show-notification-on-edit
    • show-placeholder
    • update-record-on-edit

Inputs

No additional inputs

Inherited outputs

OTableCellEditorBooleanComponent extends OBaseTableCellEditor

Directive: o-table-cell-editor-boolean

Inherited inputs

  • from OBaseTableCellEditor:
    • enabled
    • label
    • required
    • show-notification-on-edit
    • show-placeholder
    • update-record-on-edit

Inputs

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

Inherited outputs

OTableCellEditorDateComponent extends OBaseTableCellEditor

Directive: o-table-cell-editor-date

Inherited inputs

  • from OBaseTableCellEditor:
    • enabled
    • label
    • required
    • show-notification-on-edit
    • show-placeholder
    • update-record-on-edit

Inputs

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

Inherited outputs

OTableCellEditorIntegerComponent extends OBaseTableCellEditor

Directive: o-table-cell-editor-integer

Inherited inputs

  • from OBaseTableCellEditor:
    • enabled
    • label
    • required
    • show-notification-on-edit
    • show-placeholder
    • update-record-on-edit

Inputs

Name Description Default

max

number

Maximum value

min

number

Minimum value

step

number

Number interval

1

Inherited outputs

OTableCellEditorRealComponent extends OBaseTableCellEditor

Directive: o-table-cell-editor-real

Inherited inputs

  • from OBaseTableCellEditor:
    • enabled
    • label
    • required
    • show-notification-on-edit
    • show-placeholder
    • update-record-on-edit

Inputs

Name Description Default

max

number

Maximum value

min

number

Minimum value

step

number

Number interval

0.01

Inherited outputs

OTableCellEditorTimeComponent extends OBaseTableCellEditor

Directive: o-table-cell-editor-time

Inherited inputs

  • from OBaseTableCellEditor:
    • enabled
    • label
    • required
    • show-notification-on-edit
    • show-placeholder
    • update-record-on-edit

Inputs

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

Inherited outputs

OTableCellEditorEmailComponent extends OBaseTableCellEditor

Directive: o-table-cell-editor-email

Inherited inputs

  • from OBaseTableCellEditor:
    • enabled
    • label
    • required
    • show-notification-on-edit
    • show-placeholder
    • update-record-on-edit

Inputs

No additional inputs

Inherited outputs

Updated: