Table JAVASCRIPT UI Component 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;

autoLoadStateboolean

Enables or disables auto load state from the browser's localStorage. Information about columns, expanded rows, selected rows, applied fitering, grouping, and sorted columns is loaded, based on the value of the stateSettings property.

Default value

false

Example

Set the autoLoadState property.

 <smart-table auto-load-state></smart-table>

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

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

Get the autoLoadState property.

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

autoSaveStateboolean

Enables or disables auto save state to the browser's localStorage. Information about columns, expanded rows, selected rows, applied fitering, grouping, and sorted columns is saved, based on the value of the stateSettings property.

Default value

false

Example

Set the autoSaveState property.

 <smart-table auto-save-state></smart-table>

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

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

Get the autoSaveState property.

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

columnMinWidthstring | number

Sets or gets the min width of columns when columnSizeMode is 'auto'.

Default value

50px

Example

Set the columnMinWidth property.

 <smart-table column-min-width='100'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.columnMinWidth = 20px;

Get the columnMinWidth property.

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

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;

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?: any }): void }, label?: string, responsivePriority?: number, transform?: { (value: any): any }, 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?: any }): 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;

transform{ (value: any): any }

A callback function that can be used to transform all the data of the column's original data field into a new data field to be used in column cells and all column operations. Can be useful for localizing data.

Get the transform property.

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

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.

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;

conditionalFormatting{ column?: string; condition?: string; firstValue?: number; fontFamily?: string; fontSize?: string; highlight?: string; secondValue?: number; text?: string; }[]

Sets or gets details about conditional formatting to be applied to the Table's cells.

Properties

columnstring

The data field of a numeric column to format. Set 'all' to format all numeric columns.

Default value

"all"

Get the column property.

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

condition"between" | "equal" | "greaterThan" | "lessThan" | "notEqual"

The formatting condition.

Default value

"lessThan"

Get the condition property.

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

firstValuenumber

The value to compare by. When condition is 'between', this is the start (from) value.

Default value

0

Get the firstValue property.

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

fontFamily"The default fontFamily as set in CSS" | "Arial" | "Courier New" | "Georgia" | "Times New Roman" | "Verdana"

The fontFamily to apply to formatted cells.

Default value

"The default fontFamily as set in CSS"

Get the fontFamily property.

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

fontSize"8px" | "9px" | "10px" | "11px" | "12px" | "13px" | "14px" | "15px" | "16px"

The fontSize to apply to formatted cells.

Default value

"The default fontSize as set in CSS"

Get the fontSize property.

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

highlightstring

The background color to apply to formatted cells.

Default value

"The default backgroundColor as set in CSS"

Get the highlight property.

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

secondValuenumber

When condition is 'between', this is the end (to) value. Otherwise, this value is not used.

Default value

1

Get the secondValue property.

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

textstring

The text color to apply to formatted cells.

Default value

"The default color as set in CSS"

Get the text property.

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

Example

Set the conditionalFormatting property.

 <smart-table conditional-formatting='{ column: 'quantity', condition: 'greaterThan', firstValue: 8, text: '#6AA84F' }, { column: 'quantity', condition: 'lessThan', firstValue: 3, text: '#CC0000' }'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.conditionalFormatting = { column: 'price', condition: 'between', firstValue: 3, secondValue: 5, fontFamily: 'Courier New', text: '#0000FF' }, { column: 'total', condition: 'greaterThan', firstValue: 25, fontSize: '14px', text: '#FFFFFF', highlight: '#6AA84F' };

Get the conditionalFormatting property.

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

columnSizeMode"auto" | "default"

Sets or gets the column sizing behavior.

Default value

"default"

Example

Set the columnSizeMode property.

 <smart-table column-size-mode='auto'></smart-table>

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

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

Get the columnSizeMode property.

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

conditionalFormattingButtonboolean

Sets or gets whether the "Conditional Formatting" button appears in the Table's header (toolbar). Clicking this button opens a dialog with formatting options.

Default value

false

Example

Set the conditionalFormattingButton property.

 <smart-table conditional-formatting-button></smart-table>

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

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

Get the conditionalFormattingButton property.

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

dataSourceany

Determines the data source of the table component.

Default value

""

dataTransform{ (record: any): void }

A callback function that can be used to transform the initial dataSource records. If implemented, it is called once for each record (which is passed as an argument).

Example

Set the dataTransform property.

 <smart-table data-transform='dataTransformCallback'></smart-table>

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

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

Get the dataTransform property.

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

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

"add": "Add condition",

"all": "All columns",

"apply": "Apply",

"between": "Between",

"cancel": "Cancel",

"clearFilter": "Clear filter",

"close": "Close",

"column": "Column:",

"condition": "Condition:",

"conditionalFormatting": "Conditional Formatting",

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

"filterCondition": "Filter condition",

"filterPlaceholder": "Filter",

"firstButton": "First",

"fontFamily": "Font family:",

"fontSize": "Font size:",

"format": "Format:",

"formatColumn": "Format Column",

"GREATER_THAN": "greater than",

"GREATER_THAN_OR_EQUAL": "greater than or equal",

"greaterThan": "Greater Than",

"highlight": "Highlight",

"invalidValue": "Invalid value",

"itemsPerPage": "Items per page:",

"lastButton": "Last",

"LESS_THAN": "less than",

"LESS_THAN_OR_EQUAL": "less than or equal",

"lessThan": "Less Than",

"nextButton": "Next",

"NOT_EMPTY": "not empty",

"NOT_EQUAL": "not equal",

"NOT_NULL": "not null",

"notEqual": "Not Equal To",

"NULL": "null",

"ok": "OK",

"previousButton": "Previous",

"remove": "Remove condition",

"secondValue": "Second value:",

"STARTS_WITH": "starts with",

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

"summaryPrefix": "of",

"text": "Text",

"value": "Value:",

"with": "with"

}

Example

Set the messages property.

 <smart-table messages='{"he":{"add":"הוסף תנאי","all":"כל העמודות","apply":"להגיש מועמדות","between":"בֵּין","cancel":"לְבַטֵל","clearFilter":"נקה את המסנן","close":"סגור","column":"טור:","condition":"מַצָב:","conditionalFormatting":"עיצוב מותנה","CONTAINS":"מכיל","CONTAINS_CASE_SENSITIVE":"מכיל (רגיש רישיות)","DOES_NOT_CONTAIN":"לא מכיל","DOES_NOT_CONTAIN_CASE_SENSITIVE":"לא מכיל (רגיש רישיות)","EMPTY":"ריק","ENDS_WITH":"נגמר עם","ENDS_WITH_CASE_SENSITIVE":"מסתיים ב (רגיש רישיות)","EQUAL":"שווה","EQUAL_CASE_SENSITIVE":"שווה (רגיש לרישיות","filterCondition":"מצב סינון","filterPlaceholder":"לְסַנֵן","firstButton":"ראשון","fontFamily":"משפחת גופן:","fontSize":"גודל גופן:","format":"פוּרמָט:","formatColumn":"עמוד עמוד","GREATER_THAN":"גדול מ","GREATER_THAN_OR_EQUAL":"גדול או שווה","greaterThan":"גדול מ","highlight":"שִׂיא","invalidValue":"ערך לא תקין","itemsPerPage":"פריטים לעמוד:","lastButton":"אחרון","LESS_THAN":"פחות מ","LESS_THAN_OR_EQUAL":"פחות מ או שווה","lessThan":"פחות מ","nextButton":"הַבָּא","NOT_EMPTY":"לא ריק","NOT_EQUAL":"לא שווה","NOT_NULL":"לא ריק","notEqual":"לא שווה ל","NULL":"null","ok":"בסדר","previousButton":"קודם","remove":"הסר את המצב","secondValue":"ערך שני:","STARTS_WITH":"מתחיל עם","STARTS_WITH_CASE_SENSITIVE":"מתחיל עם (רגיש רישיות)","summaryPrefix":"שֶׁל","text":"טֶקסט","value":"ערך:","with":"עם"}}'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.messages = {"en":{"add":"Add condition","all":"All columns","apply":"Apply","between":"Between","cancel":"Cancel","clearFilter":"Clear filter","close":"Close","column":"Column:","condition":"Condition:","conditionalFormatting":"Conditional Formatting","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)","filterCondition":"Filter condition","filterPlaceholder":"Filter","firstButton":"First","fontFamily":"Font family:","fontSize":"Font size:","format":"Format:","formatColumn":"Format Column","GREATER_THAN":"greater than","GREATER_THAN_OR_EQUAL":"greater than or equal","greaterThan":"Greater Than","highlight":"Highlight","invalidValue":"Invalid value","itemsPerPage":"Items per page:","lastButton":"Last","LESS_THAN":"less than","LESS_THAN_OR_EQUAL":"less than or equal","lessThan":"Less Than","nextButton":"Next","NOT_EMPTY":"not empty","NOT_EQUAL":"not equal","NOT_NULL":"not null","notEqual":"Not Equal To","NULL":"null","ok":"OK","previousButton":"Previous","remove":"Remove condition","secondValue":"Second value:","STARTS_WITH":"starts with","STARTS_WITH_CASE_SENSITIVE":"starts with (case sensitive)","summaryPrefix":"of","text":"Text","value":"Value:","with":"with"}};

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;

selectionMode"many" | "extended"

Sets or gets the selection mode. Only applicable when selection is enabled.

Default value

"many"

Example

Set the selectionMode property.

 <smart-table selection-mode='extended'></smart-table>

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

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

Get the selectionMode property.

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

sort{ (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number }[]): void }

A callback function executed when a column is sorted that can be used to override the default sorting behavior. The function is passed four parameters:

  1. dataSource - the Table's data source
  2. sortColumns - an array of the data fields of columns to be sorted by
  3. directions - an array of sort directions to be sorted by (corresponding to sortColumns)
  4. defaultCompareFunctions - an array of default compare functions to be sorted by (corresponding to sortColumns), useful if the sorting of some columns does not have to be overridden

Example

Set the sort property.

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

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

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

Get the sort property.

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

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;

stateSettingsstring[]

Sets or gets what settings of the Table's state can be saved (by autoSaveState or saveState) or loaded (by autoLoadState or loadState).

Example

Set the stateSettings property.

 <smart-table state-settings='['columns', 'expanded', 'selected']'></smart-table>

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

 const table = document.querySelector('smart-table');
 table.stateSettings = ['columns', 'filtered'];

Get the stateSettings property.

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

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;

tooltipboolean

Sets or gets whether when hovering a cell with truncated content, a tooltip with the full content will be shown.

Default value

false

Example

Set the tooltip property.

 <smart-table tooltip></smart-table>

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

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

Get the tooltip property.

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

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.
})

changeCustomEvent

This event is triggered when the selection is changed.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.type - The type of action that initiated the selection change. Possible types: 'programmatic', 'interaction', 'remove'.

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 change event.

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

	// 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 row (in tree mode).

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

getState(): object

Returns the Table's state, containing information about columns, expanded rows, selected rows, applied fitering, grouping, and sorted columns. It can then be stored or passed to the method loadState.

Returnsobject

Invoke the getState method.

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

Try a demo showcasing the getState method.

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'");

loadState( state?: any): void

Loads the Table's state. Information about columns, expanded rows, selected rows, applied fitering, grouping, and sorted columns is loaded, based on the value of the stateSettings property.

Arguments

state?any

An object returned by one of the methods getState or saveState. If a state is not passed, the method tries to load the state from the browser's localStorage.


Invoke the loadState method.

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

Try a demo showcasing the loadState method.

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

saveState(): object

Saves the Table's state. Information about columns, expanded rows, selected rows, applied fitering, grouping, and sorted columns is saved, based on the value of the stateSettings property.

Returnsobject

Invoke the saveState method.

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

Try a demo showcasing the saveState method.

select( rowId: string | number | (string | number)[]): void

Selects one or more rows.

Arguments

rowIdstring | number | (string | number)[]

The id of the row (or an array of row ids) to select.


Invoke the select method.

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

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), 'desc' (descending), and null (removes sorting by column). If not provided, toggles the sorting.


Invoke the sortBy method.

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

unselect( rowId: string | number | (string | number)[]): void

Unselects one or more rows.

Arguments

rowIdstring | number | (string | number)[]

The id of the row (or an array of row ids) 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

"5px"

smartTable arrow margin