Table API

Table Javascript API

Class

Table

Table is an alternative of the HTMLTableElement.

Selector

smart-table

Properties

Methods

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Default value

"advanced"

Example

Set the animation property.

 <smart-table animation='none'></smart-table>

Set the animation property by using the HTML Element's instance.

 const table = document.querySelector('smart-table');
 table.animation = 'simple';

Get the animation property.

 const table = document.querySelector('smart-table');
 let animation = table.animation;

disabledboolean

Disables the interaction with the element.

Default value

false

Example

Set the disabled property.

 <smart-table disabled></smart-table>

Set the disabled property by using the HTML Element's instance.

 const table = document.querySelector('smart-table');
 table.disabled = false;

Get the disabled property.

 const table = document.querySelector('smart-table');
 let disabled = table.disabled;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-table locale='de'></smart-table>

Set the locale property by using the HTML Element's instance.

 const table = document.querySelector('smart-table');
 table.locale = 'fr';

Get the locale property.

 const table = document.querySelector('smart-table');
 let locale = table.locale;

columnsany[]

Table columns

dataSourceany

Determines the data source of the table component.

Default value

""

messagesobject

Sets or gets an object specifying strings used in the element that can be localized. Used in conjunction with the property locale.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property.

 <smart-table messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-table>

Set the messages property by using the HTML Element's instance.

 const table = document.querySelector('smart-table');
 table.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property.

 const table = document.querySelector('smart-table');
 let messages = table.messages;

namestring

The name of the element. Used when submiting data inside a Form.

Default value

""

Example

Set the name property.

 <smart-table name='rating1'></smart-table>

Set the name property by using the HTML Element's instance.

 const table = document.querySelector('smart-table');
 table.name = 'rating2';

Get the name property.

 const table = document.querySelector('smart-table');
 let name = table.name;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Example

Set the rightToLeft property.

 <smart-table right-to-left></smart-table>

Set the rightToLeft property by using the HTML Element's instance.

 const table = document.querySelector('smart-table');
 table.rightToLeft = true;

Get the rightToLeft property.

 const table = document.querySelector('smart-table');
 let rightToLeft = table.rightToLeft;

sortMode"none" | "one" | "many"

Determines the sorting mode of the Table.

Default value

"none"

Example

Set the sortMode property.

 <smart-table sort-mode='one'></smart-table>

Set the sortMode property by using the HTML Element's instance.

 const table = document.querySelector('smart-table');
 table.sortMode = 'many';

Get the sortMode property.

 const table = document.querySelector('smart-table');
 let sortMode = table.sortMode;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property.

 <smart-table theme='blue'></smart-table>

Set the theme property by using the HTML Element's instance.

 const table = document.querySelector('smart-table');
 table.theme = 'red';

Get the theme property.

 const table = document.querySelector('smart-table');
 let theme = table.theme;

Methods

clearSort(): void

Clears the Table sorting.


Invoke the clearSort method.

const table = document.querySelector('smart-table');
table.clearSort(false);

dataBind(): void

Binds the table to the data source or rebinds it.


Invoke the dataBind method.

const table = document.querySelector('smart-table');
table.dataBind(false);

focus(): void

Focuses the table.


Invoke the focus method.

const table = document.querySelector('smart-table');
table.focus(false);

refresh(): void

Refreshes the table.


Invoke the refresh method.

const table = document.querySelector('smart-table');
table.refresh(false);

sortBy( columnDataField: string, sortOrder?: string): void

Sorts the Table by a column.

Arguments

columnDataFieldstring

Column field name.

sortOrder?string

Sort order.


Invoke the sortBy method.

const table = document.querySelector('smart-table');
table.sortBy(false);