Table API

Table Javascript API

Class

Table

Table is an alternative of the HTMLTableElement.

Selector

smart-table

Properties

Events

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;

columnsstring[] | { allowEdit?: boolean, allowFilter?: boolean, allowGroup?: boolean, allowSort?: boolean, dataField?: string, dataType?: string, editor?: { getValue: { (editor: HTMLElement): any }, onInit: { (rowId: string | number, dataField: string, editor: HTMLElement, value: any): void }, onRender: { (rowId: string | number, dataField: string, editor: HTMLElement, value: any): void }, template: string }, freeze?: string | boolean,formatFunction?: { (settings: { value: any, row: string | number, column: string, cell: HTMLTableCellElement, template?: string }): void }, label?: string, responsivePriority?: number, validation: { (value: any): boolean | { mesage: string } },width?: string | number }[]

Describes the columns properties.

Properties

allowEditboolean

Sets or gets whether the column's cells can be edited.

Default value

true

Get the allowEdit property.

 const table = document.querySelector('smart-table');
 let allowEdit = table.columns[0].allowEdit;

allowFilterboolean

Sets or gets whether the column can be filtered.

Default value

true

Get the allowFilter property.

 const table = document.querySelector('smart-table');
 let allowFilter = table.columns[0].allowFilter;

allowGroupboolean

Sets or gets whether the table can be grouped by the column.

Default value

true

Get the allowGroup property.

 const table = document.querySelector('smart-table');
 let allowGroup = table.columns[0].allowGroup;

allowSortboolean

Sets or gets whether the table can be sorted by the column.

Default value

true

Get the allowSort property.

 const table = document.querySelector('smart-table');
 let allowSort = table.columns[0].allowSort;

dataFieldstring

Sets or gets the column's data source bound field.

Default value

""

Get the dataField property.

 const table = document.querySelector('smart-table');
 let dataField = table.columns[0].dataField;

dataType"boolean" | "date" | "number" | "string"

Sets or gets the data type of the column's cells.

Default value

"string"

Get the dataType property.

 const table = document.querySelector('smart-table');
 let dataType = table.columns[0].dataType;

editor{ getValue: { (editor: HTMLElement): any }, onInit: { (rowId: string | number, dataField: string, editor: HTMLElement, value: any): void }, onRender: { (rowId: string | number, dataField: string, editor: HTMLElement, value: any): void }, template: string }

An object setting up a custom editor. Available fields:

  • template - a string to be parsed into HTML and be used as custom cell editor.
  • onInit - a callback function called once when the editor is initialized.
  • onRender - a callback function called each time a cell enters edit mode.
  • getValue - a callback function called when editing is complete; used to return the editor's value to the Table's data source.

Get the editor property.

 const table = document.querySelector('smart-table');
 let editor = table.columns[0].editor;

freeze"true" | "near" | "far"

Sets or gets whether the column is sticky/frozen. true and 'near' designate freezing on the left side, 'far' - on the right side.

Get the freeze property.

 const table = document.querySelector('smart-table');
 let freeze = table.columns[0].freeze;

formatFunction{ (settings: { value: any, row: string | number, column: string, cell: HTMLTableCellElement, template?: string }): void }

A callback function that can be used to modify the contents of a cell and the cell itself.

Get the formatFunction property.

 const table = document.querySelector('smart-table');
 let formatFunction = table.columns[0].formatFunction;

labelstring

Sets or gets the text displayed in the column's header.

Default value

""

Get the label property.

 const table = document.querySelector('smart-table');
 let label = table.columns[0].label;

responsivePriority"1" | "2" | "3" | "4" | "5"

Sets or gets the column's priority when resizing the browser window. The larger the priority value, the column will be hidden at a larger screen resolution. Columns with priority 1 are never hidden.

Default value

Get the responsivePriority property.

 const table = document.querySelector('smart-table');
 let responsivePriority = table.columns[0].responsivePriority;

validation{ (value: any): boolean | { mesage: string } }

A callback function that can be used to validate cell values after editing. If it returns true, the cell is valid. If it returns false or an object with a message field, the cell is not valid and the message (or a default one) is displayed in a tooltip.

Get the validation property.

 const table = document.querySelector('smart-table');
 let validation = table.columns[0].validation;

widthstring | number

Sets the width of the column. The width can be entered as a number, or string with px or %.

Get the width property.

 const table = document.querySelector('smart-table');
 let width = table.columns[0].width;

Example

Set the columns property.

 <smart-table columns='{ label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing' }, { label: 'Done', dataField: 'done' }'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.columns = { label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing', orientation: 'horizontal', columns: [{ label: 'Manual testing', dataField: 'manualTesting', selected: true, columns: [{ label: 'Desktop devices', dataField: 'desktop' }, { label: 'Mobile devices', dataField: 'mobile', selected: true }] }, { label: 'Unit testing', dataField: 'unitTesting' }] };

Get the columns property.

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

columnReorderboolean

Sets or gets whether the reordering of columns is enabled.

Default value

false

Example

Set the columnReorder property.

 <smart-table column-reorder></smart-table>

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

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

Get the columnReorder property.

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

dataSourceany

Determines the data source of the table component.

Default value

""

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;

editingboolean

Sets or gets whether the Table can be edited.

Default value

false

Example

Set the editing property.

 <smart-table editing></smart-table>

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

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

Get the editing property.

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

editMode"cell" | "row"

Sets or gets the edit mode.

Default value

"cell"

Example

Set the editMode property.

 <smart-table edit-mode='row'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.editMode = 'cell';

Get the editMode property.

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

filteringboolean

Sets or gets whether the Table can be filtered. By default, the Table can be filtered by all string and numeric columns through a filter input in the header.

Default value

false

Example

Set the filtering property.

 <smart-table filtering></smart-table>

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

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

Get the filtering property.

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

filterRowboolean

Sets or gets whether the Table can be filtered via a filter row.

Default value

false

Example

Set the filterRow property.

 <smart-table filter-row></smart-table>

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

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

Get the filterRow property.

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

filterTemplatestring

Sets or gets the id of an HTML template element to be applied as a custom filter template.

Default value

"null"

Example

Set the filterTemplate property.

 <smart-table filter-template='customFilterTemplate'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.filterTemplate = 'myFilterTemplate';

Get the filterTemplate property.

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

footerRowstring

Sets or gets the id of an HTML template element to be applied as footer row(s).

Default value

"null"

Example

Set the footerRow property.

 <smart-table footer-row='customFooterRow'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.footerRow = 'myFooterRow';

Get the footerRow property.

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

freezeFooterboolean

Sets or gets whether the Table's footer is sticky/frozen.

Default value

false

Example

Set the freezeFooter property.

 <smart-table freeze-footer></smart-table>

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

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

Get the freezeFooter property.

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

freezeHeaderboolean

Sets or gets whether the Table's column header is sticky/frozen.

Default value

false

Example

Set the freezeHeader property.

 <smart-table freeze-header></smart-table>

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

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

Get the freezeHeader property.

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

groupingboolean

Sets or gets whether grouping the Table is enabled.

Default value

false

Example

Set the grouping property.

 <smart-table grouping></smart-table>

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

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

Get the grouping property.

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

headerRowstring

Sets or gets the id of an HTML template element to be applied as additional column header(s).

Default value

"null"

Example

Set the headerRow property.

 <smart-table header-row='customHeaderRowTemplate'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.headerRow = 'myHeaderRow';

Get the headerRow property.

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

keyboardNavigationboolean

Sets or gets whether navigation with the keyboard is enabled in the Table.

Default value

false

Example

Set the keyboardNavigation property.

 <smart-table keyboard-navigation></smart-table>

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

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

Get the keyboardNavigation property.

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

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;

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": {

"clearFilter": "Clear filter",

"CONTAINS": "contains",

"CONTAINS_CASE_SENSITIVE": "contains (case sensitive)",

"DOES_NOT_CONTAIN": "does not contain",

"DOES_NOT_CONTAIN_CASE_SENSITIVE": "does not contain (case sensitive)",

"EMPTY": "empty",

"ENDS_WITH": "ends with",

"ENDS_WITH_CASE_SENSITIVE": "ends with (case sensitive)",

"EQUAL": "equal",

"EQUAL_CASE_SENSITIVE": "equal (case sensitive)",

"filterPlaceholder": "Filter",

"filterCondition": "Filter condition",

"firstButton": "First",

"GREATER_THAN": "greater than",

"GREATER_THAN_OR_EQUAL": "greater than or equal",

"invalidValue": "Invalid value",

"itemsPerPage": "Items per page:",

"lastButton": "Last",

"LESS_THAN": "less than",

"LESS_THAN_OR_EQUAL": "less than or equal",

"nextButton": "Next",

"NOT_EMPTY": "not empty",

"NOT_EQUAL": "not equal",

"NOT_NULL": "not null",

"NULL": "null",

"previousButton": "Previous",

"STARTS_WITH": "starts with",

"STARTS_WITH_CASE_SENSITIVE": "starts with (case sensitive)",

"summaryPrefix": "of"

}

Example

Set the messages property.

 <smart-table messages='{"he":{"clearFilter":"נקה את המסנן","CONTAINS":"מכיל","CONTAINS_CASE_SENSITIVE":"מכיל (רגיש רישיות)","DOES_NOT_CONTAIN":"לא מכיל","DOES_NOT_CONTAIN_CASE_SENSITIVE":"אינו מכיל (רגיש רישיות)","EMPTY":"ריק","ENDS_WITH":"נגמר עם","ENDS_WITH_CASE_SENSITIVE":"מסתיים ב (רגיש רישיות)","EQUAL":"שווה","EQUAL_CASE_SENSITIVE":"שווה (רגיש אותיות רישיות)","filterPlaceholder":"סנן","filterCondition":"מצב סינון","firstButton":"ראשון","GREATER_THAN":"גדול מ","GREATER_THAN_OR_EQUAL":"גדול או שווה","invalidValue":"ערך לא תקין","itemsPerPage":"פריטים לעמוד:","lastButton":"אחרון","LESS_THAN":"פחות מ","LESS_THAN_OR_EQUAL":"פחות מ או שווה","nextButton":"הבא","NOT_EMPTY":"לא ריק","NOT_EQUAL":"לא שווה","NOT_NULL":"לא ריק","NULL":"null","previousButton":"קודם","STARTS_WITH":"מתחיל עם","STARTS_WITH_CASE_SENSITIVE":"מתחיל עם (רגיש רישיות)","summaryPrefix":"של"}}'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.messages = {"en":{"clearFilter":"Clear filter","CONTAINS":"contains","CONTAINS_CASE_SENSITIVE":"contains (case sensitive)","DOES_NOT_CONTAIN":"does not contain","DOES_NOT_CONTAIN_CASE_SENSITIVE":"does not contain (case sensitive)","EMPTY":"empty","ENDS_WITH":"ends with","ENDS_WITH_CASE_SENSITIVE":"ends with (case sensitive)","EQUAL":"equal","EQUAL_CASE_SENSITIVE":"equal (case sensitive)","filterPlaceholder":"Filter","filterCondition":"Filter condition","firstButton":"First","GREATER_THAN":"greater than","GREATER_THAN_OR_EQUAL":"greater than or equal","invalidValue":"Invalid value","itemsPerPage":"Items per page:","lastButton":"Last","LESS_THAN":"less than","LESS_THAN_OR_EQUAL":"less than or equal","nextButton":"Next","NOT_EMPTY":"not empty","NOT_EQUAL":"not equal","NOT_NULL":"not null","NULL":"null","previousButton":"Previous","STARTS_WITH":"starts with","STARTS_WITH_CASE_SENSITIVE":"starts with (case sensitive)","summaryPrefix":"of"}};

Get the messages property.

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

onCellRender{ (data: any, dataField: string, value: any, cell: HTMLTableCellElement): void }

A callback function executed each time a Table cell is rendered.

Example

Set the onCellRender property.

 <smart-table on-cell-render='onCellRender'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.onCellRender = onCellRenderCallback;

Get the onCellRender property.

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

onColumnRender{ (dataField: string, headerCell: HTMLTableCellElement): void }

A callback function executed each time a Table column header cell is rendered.

Example

Set the onColumnRender property.

 <smart-table on-column-render='onColumnRender'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.onColumnRender = onColumnRenderCallback;

Get the onColumnRender property.

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

onInit{ (): void }

A callback function executed when the Table is being initialized.

Example

Set the onInit property.

 <smart-table on-init='onInit'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.onInit = onInitCallback;

Get the onInit property.

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

pageSize"10" | "25" | "50"

Sets or gets the page size (when paging is enabled).

Default value

10

Example

Set the pageSize property.

 <smart-table page-size='25'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.pageSize = 50;

Get the pageSize property.

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

pageIndexnumber

Sets or gets the current (zero-based) page index (when paging is enabled).

Default value

0

Example

Set the pageIndex property.

 <smart-table page-index='1'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.pageIndex = 7;

Get the pageIndex property.

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

pagingboolean

Sets or gets whether paging is enabled.

Default value

false

Example

Set the paging property.

 <smart-table paging></smart-table>

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

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

Get the paging property.

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

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;

rowDetailTemplatestring

Sets or gets a string template to be applied as row detail template. Each cell value in the master row can be placed in the detail row by specifying the cell's data field in double curly brackets (e.g. {{price}}. The details can then be displayed by expanding the row by clicking it.

Default value

"null"

Example

Set the rowDetailTemplate property.

 <smart-table row-detail-template='
{{number}}
'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.rowDetailTemplate = '
{{name}}
';

Get the rowDetailTemplate property.

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

selectionboolean

Sets or gets whether row selection (via checkboxes) is enabled.

Default value

false

Example

Set the selection property.

 <smart-table selection></smart-table>

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

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

Get the selection property.

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

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='dark'></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;

Events

cellBeginEditCustomEvent

This event is triggered when a cell edit operation has been initiated.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onCellBeginEdit

Arguments

evCustomEvent
ev.detailObject
ev.detail.dataField - The data field of the cell's column.
ev.detail.row - The data of the cell's row.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of cellBeginEdit event.

const table = document.querySelector('smart-table');
table.addEventListener('cellBeginEdit', function (event) {
    const detail = event.detail,
        dataField = detail.dataField,
        row = detail.row;

	// event handling code goes here.
}

cellClickCustomEvent

This event is triggered when a cell has been clicked.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onCellClick

Arguments

evCustomEvent
ev.detailObject
ev.detail.dataField - The data field of the cell's column.
ev.detail.row - The data of the cell's row.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of cellClick event.

const table = document.querySelector('smart-table');
table.addEventListener('cellClick', function (event) {
    const detail = event.detail,
        dataField = detail.dataField,
        row = detail.row;

	// event handling code goes here.
}

cellEndEditCustomEvent

This event is triggered when a cell has been edited.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onCellEndEdit

Arguments

evCustomEvent
ev.detailObject
ev.detail.dataField - The data field of the cell's column.
ev.detail.row - The new data of the cell's row.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of cellEndEdit event.

const table = document.querySelector('smart-table');
table.addEventListener('cellEndEdit', function (event) {
    const detail = event.detail,
        dataField = detail.dataField,
        row = detail.row;

	// event handling code goes here.
}

columnClickCustomEvent

This event is triggered when a column header cell has been clicked.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onColumnClick

Arguments

evCustomEvent
ev.detailObject
ev.detail.dataField - The data field of the cell's column.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of columnClick event.

const table = document.querySelector('smart-table');
table.addEventListener('columnClick', function (event) {
    const detail = event.detail,
        dataField = detail.dataField;

	// event handling code goes here.
}

filterCustomEvent

This event is triggered when a filtering-related action is made.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onFilter

Arguments

evCustomEvent
ev.detailObject
ev.detail.action - The filtering action. Possible actions: 'add', 'remove'.
ev.detail.filters - The added filters. Only when action is 'add'.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of filter event.

const table = document.querySelector('smart-table');
table.addEventListener('filter', function (event) {
    const detail = event.detail,
        action = detail.action,
        filters = detail.filters;

	// event handling code goes here.
}

groupCustomEvent

This event is triggered when a grouping-related action is made.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onGroup

Arguments

evCustomEvent
ev.detailObject
ev.detail.action - The grouping action. Possible actions: 'add', 'collapse', 'expand', 'remove'.
ev.detail.dataField - The data field of the column whose grouping is modified.
ev.detail.label - The label of the group (only when collapsing/expanding).

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of group event.

const table = document.querySelector('smart-table');
table.addEventListener('group', function (event) {
    const detail = event.detail,
        action = detail.action,
        dataField = detail.dataField,
        label = detail.label;

	// event handling code goes here.
}

pageCustomEvent

This event is triggered when a paging-related action is made.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onPage

Arguments

evCustomEvent
ev.detailObject
ev.detail.action - The paging action. Possible actions: 'pageIndexChange', 'pageSizeChange'.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of page event.

const table = document.querySelector('smart-table');
table.addEventListener('page', function (event) {
    const detail = event.detail,
        action = detail.action;

	// event handling code goes here.
}

sortCustomEvent

This event is triggered when a column header cell has been clicked.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSort

Arguments

evCustomEvent
ev.detailObject
ev.detail.columns - An array with information about the columns the Table has been sorted by.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of sort event.

const table = document.querySelector('smart-table');
table.addEventListener('sort', function (event) {
    const detail = event.detail,
        columns = detail.columns;

	// event handling code goes here.
}

Methods

addFilter( dataField: string, filter: any): void

Adds a filter to a specific column.

Arguments

dataFieldstring

The column's data field.

filterany

FilterGroup object.


Invoke the addFilter method.

const table = document.querySelector('smart-table');
table.addFilter("'firstName', filterGroup");

addGroup( dataField: string): void

Groups by a column.

Arguments

dataFieldstring

The column's data field.


Invoke the addGroup method.

const table = document.querySelector('smart-table');
table.addGroup("firstName");

beginEdit( row: string | number, dataField?: string): void

Begins an edit operation.

Arguments

rowstring | number

The id of the row to edit.

dataField?string

The dataField of the cell's column. May be omitted when editMode is 'row'.


Invoke the beginEdit method.

const table = document.querySelector('smart-table');
table.beginEdit("3, 'lastName'");

cancelEdit(): void

Ends the current edit operation and discards changes.


Invoke the cancelEdit method.

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

clearFilters(): void

Clears applied filters.


Invoke the clearFilters method.

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

clearGrouping(): void

Clears grouping.


Invoke the clearGrouping method.

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

clearSelection(): void

Clears selection.


Invoke the clearSelection method.

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

clearSort(): void

Clears the Table sorting.


Invoke the clearSort method.

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

collapseAllRows(): void

Collapses all rows (in tree mode).


Invoke the collapseAllRows method.

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

collapseGroup( index: string): void

Collapses a group.

Arguments

indexstring

The group's hierarchical index.


Invoke the collapseGroup method.

const table = document.querySelector('smart-table');
table.collapseGroup("1.2");

collapseRow( rowId: string | number): void

Collapses a group.

Arguments

rowIdstring | number

The id of the row to collapse.


Invoke the collapseRow method.

const table = document.querySelector('smart-table');
table.collapseRow(11);

endEdit(): void

Ends the current edit operation and saves changes.


Invoke the endEdit method.

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

expandAllRows(): void

Expands all rows (in tree mode).


Invoke the expandAllRows method.

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

expandGroup( index: string): void

Expands a group.

Arguments

indexstring

The group's hierarchical index.


Invoke the expandGroup method.

const table = document.querySelector('smart-table');
table.expandGroup("1.2");

expandRow( rowId: string | number): void

Expands a row (in tree mode).

Arguments

rowIdstring | number

The id of the row to expand.


Invoke the expandRow method.

const table = document.querySelector('smart-table');
table.expandRow(8);

exportData( dataFormat: string, fileName?: string, exportFiltered?: boolean, callback?: Function): any

Exports the Table's data.

Arguments

dataFormatstring

The file format to export to. Supported formats: 'csv', 'html', 'json', 'pdf', 'tsv', 'xlsx', 'xml'.

fileName?string

The name of the file to export to

exportFiltered?boolean

If set to true, exports only filtered records

callback?Function

A callback function to pass the exported data to (if fileName is not provided)

Returnsany

Invoke the exportData method.

const table = document.querySelector('smart-table');
const result = table.exportData("html","my-table");

getSelection(): (string | number)[]

Returns an array of selected row ids.

Returns(string | number)[]

Invoke the getSelection method.

const table = document.querySelector('smart-table');
const result = table.getSelection();

getValue( row: string | number, dataField: string): any

Returns the value of a cell.

Arguments

rowstring | number

The id of the cell's row.

dataFieldstring

The dataField of the cell's column.

Returnsany

Invoke the getValue method.

const table = document.querySelector('smart-table');
const result = table.getValue("3, 'lastName'");

navigateTo( pageIndex: number): void

Navigates to a page.

Arguments

pageIndexnumber

The zero-based page index to navigate to.


Invoke the navigateTo method.

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

refresh(): void

Refreshes the table.


Invoke the refresh method.

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

removeFilter( dataField: string): void

Removes filters applied to a specific column.

Arguments

dataFieldstring

The column's data field.


Invoke the removeFilter method.

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

removeGroup( dataField: string): void

Removes grouping by a column.

Arguments

dataFieldstring

The column's data field.


Invoke the removeGroup method.

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

select( rowId: string | number): void

Selects a row.

Arguments

rowIdstring | number

The id of the row to select.


Invoke the select method.

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

setValue( row: string | number, dataField: string, value: any): void

Sets the value of a cell.

Arguments

rowstring | number

The id of the cell's row.

dataFieldstring

The dataField of the cell's column.

valueany

The new value of the cell.


Invoke the setValue method.

const table = document.querySelector('smart-table');
table.setValue("3, 'lastName', 'Green'");

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

Sorts the Table by a column.

Arguments

columnDataFieldstring

Column field name.

sortOrder?string

Sort order. Possible values: 'asc' (ascending) and 'desc' (descending).


Invoke the sortBy method.

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

unselect( rowId: string | number): void

Unselects a row.

Arguments

rowIdstring | number

The id of the row to unselect.


Invoke the unselect method.

const table = document.querySelector('smart-table');
table.unselect(5);

CSS Variables

--smart-table-default-widthvar()

Default value

"100%"

smartTable default width

--smart-table-default-heightvar()

Default value

"auto"

smartTable default height

Default value

"56px"

smartTable height of header and footer

--smart-table-column-header-heightvar()

Default value

"var(--smart-table-header-footer-height)"

smartTable height of column header

--smart-table-row-heightvar()

Default value

"48px"

smartTable height of rows

--smart-table-cell-paddingvar()

Default value

"12px"

smartTable cell padding

--smart-table-indentvar()

Default value

"30px"

smartTable hierarchical cell indent

--smart-table-arrow-sizevar()

Default value

"16px"

smartTable arrow size

--smart-table-arrow-marginvar()

Default value

"30px"

smartTable arrow margin