Table JAVASCRIPT UI Component API

Table Javascript API

Class

Table

Table is an alternative of the HTMLTableElement.

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;

columnGroups{ label?: string, name: string, parentGroup?: string }[]

Sets or gets a list of column groups that constitute the column header hierarchy. Note: when column header hierarchy is created, column resizing and auto-sizing is not supported.

Properties

labelstring

Sets or gets the column group's label that appears in the column header hierarchy.

Default value

Get the label property.

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

 let label = table.columnGroups[0].label;

namestring

Sets or gets the column group's unique name that is referenced in the columnGroup field of columns (TableColumn).

Default value

Get the name property.

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

 let name = table.columnGroups[0].name;

parentGroupstring

Sets or gets the name of the column group's parent group (also defined in columnGroups).

Default value

"null"

Get the parentGroup property.

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

 let parentGroup = table.columnGroups[0].parentGroup;

Try a demo showcasing the columnGroups property.

Example

Set the columnGroups property.

 <smart-table column-groups='[{ label: 'User Info', name: 'userInfo' }, { label: 'Product Info', name: 'productInfo' }]'></smart-table>

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

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

 table.columnGroups = [{ label: 'User Info', name: 'userInfo' }, { label: 'Product Info', name: 'productInfo', parentGroup: 'purchaseInfo' }, { label: 'Purchase Info', name: 'purchaseInfo' }];

Get the columnGroups property.

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

 let columnGroups = table.columnGroups;

columnMinWidthstring | number

Sets or gets the min width of columns when columnSizeMode is 'auto' or when resizing columns. This property has no effect on columns with programmatically set width.

Default value

50px

Try a demo showcasing the columnMinWidth property.

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

Try a demo showcasing the columnReorder property.

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;

columnResizeboolean

Sets or gets whether the resizing of columns is enabled. Note: column sizes continue to adhere to the behavior of the standard HTML table element's table-layout: fixed, upon which smart-table is based.

Default value

false

Try a demo showcasing the columnResize property.

Example

Set the columnResize property.

 <smart-table column-resize></smart-table>

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

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

 table.columnResize = false;

Get the columnResize property.

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

 let columnResize = table.columnResize;

columnResizeNormalizeboolean

This property affects the table sizing, when the columnSizeMode is 'default'. When 'columnResizeNormalize' is false, the Table will add an additional TH element, if all table columns have the 'width' property set. This is done in order to maintain your width settings. Otherwise, when the property is set to true, the Table will auto-fill the remaining space similar to the layout of standard HTML Tables.

Default value

false

Try a demo showcasing the columnResizeNormalize property.

Example

Set the columnResizeNormalize property.

 <smart-table column-resize-normalize></smart-table>

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

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

 table.columnResizeNormalize = false;

Get the columnResizeNormalize property.

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

 let columnResizeNormalize = table.columnResizeNormalize;

columnResizeFeedbackboolean

Sets or gets whether when resizing a column, a feedback showing the new column width in px will be displayed.

Default value

false

Try a demo showcasing the columnResizeFeedback property.

Example

Set the columnResizeFeedback property.

 <smart-table column-resize-feedback></smart-table>

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

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

 table.columnResizeFeedback = false;

Get the columnResizeFeedback property.

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

 let columnResizeFeedback = table.columnResizeFeedback;

columnsstring[] | { allowEdit?: boolean, allowFilter?: boolean, allowGroup?: boolean, allowResize?: boolean, allowSort?: boolean, columnGroup?: string, 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 }, visible?: boolean, 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;

allowResizeboolean

Sets or gets whether the column can be resized.

Default value

true

Get the allowResize property.

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

 let allowResize = table.columns[0].allowResize;

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;

allowMenuboolean

Sets or gets whether the column may have a column menu when the 'columnMenu' property of the Table is enabled.

Default value

true

Get the allowMenu property.

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

 let allowMenu = table.columns[0].allowMenu;

allowHideboolean

Sets or gets whether the column may be hidden with the Table's column menu when the 'columnMenu' property of the Table is enabled.

Default value

true

Get the allowHide property.

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

 let allowHide = table.columns[0].allowHide;

columnGroupstring

Sets or gets the column's column group. Has to correspond to the name field of a column group (TableColumnGroup).

Default value

"null"

Get the columnGroup property.

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

 let columnGroup = table.columns[0].columnGroup;

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" | "any"

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;

mapstring

Sets or gets the data field map, when the Table is bound to an Array and dataSourceSettings property is not set.

Default value

Get the map property.

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

 let map = table.columns[0].map;

responsivePrioritynumber | null

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. The property should be set to a number in the range of 1 to 5. The property by default is not set.

Get the responsivePriority property.

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

 let responsivePriority = table.columns[0].responsivePriority;

sort{ (firstRecord: any, secondRecord: any): number }

Use this for custom sort implementation only. All non-undefined array elements are sorted according to the return value of the compare function (all undefined elements are sorted to the end of the array, with no call to compareFunction).

Get the sort property.

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

 let sort = table.columns[0].sort;

templateElementstring

A string to be parsed into HTML and be used as custom cell content. Applicable only when virtualization is enabled.

Default value

"null"

Get the templateElement property.

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

 let templateElement = table.columns[0].templateElement;

templateElementSettings{ (value: any, row: string | number, templateElement: HTMLElement): void }

A callback function that can be used to apply settings to a template element (specified by the column templateElement property). Applicable only when virtualization is enabled.

Get the templateElementSettings property.

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

 let templateElementSettings = table.columns[0].templateElementSettings;

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 | { message: 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;

visibleboolean

Sets or gets whether the column is hidden or not. Hidden columns allow data to be grouped by their corresponding dataField.

Default value

true

Get the visible property.

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

 let visible = table.columns[0].visible;

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;

minWidthnumber

Sets the minimum width of the column. The width can be entered as a number.

Get the minWidth property.

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

 let minWidth = table.columns[0].minWidth;

Try a demo showcasing the columns property.

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

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. The fontSize as set in CSS is used by default.

Default value

"14px"

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

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;

Try a demo showcasing the conditionalFormatting property.

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;

columnMenuboolean

Sets or gets the column menu. When you set this property to true, each column will have a column menu. From the column menu, you will be able to sort, filter, show or hide columns.

Default value

false

Example

Set the columnMenu property.

 <smart-table column-menu></smart-table>

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

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

 table.columnMenu = true;

Get the columnMenu property.

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

 let columnMenu = table.columnMenu;

columnSizeMode"auto" | "default"

Sets or gets the column sizing behavior. In 'auto' mode Columns are automatically sized based on their content and the value of the columnMinWidth property, unless there is not enough space in the Table, in which case ellipses are shown. User-set static column width is still respected. In 'default' mode Columns are sized according to the rules of the standard HTML table element's table-layout: fixed. Custom width can also be applied to columns in this case by setting the column width property.

Allowed Values

"auto" - Columns are automatically sized based on their content and the value of the columnMinWidth property, unless there is not enough space in the Table, in which case ellipses are shown. User-set static column width is still respected.
"default" - Columns are sized according to the rules of the standard HTML table element's table-layout: fixed. Custom width can also be applied to columns in this case by setting the column width property.

Default value

"default"

Try a demo showcasing the columnSizeMode property.

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

Try a demo showcasing the conditionalFormattingButton property.

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;

deferredScrollDelaynumber

This property determines the time in milliseconds after which the Table data is updated, when you vertically scroll.

Default value

Example

Set the deferredScrollDelay property.

 <smart-table deferred-scroll-delay='1'></smart-table>

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

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

 table.deferredScrollDelay = 0;

Get the deferredScrollDelay property.

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

 let deferredScrollDelay = table.deferredScrollDelay;

dataRowIdstring

When binding the dataSource property directly to an array (as opposed to an instance of Smart.DataAdapter), sets or gets the name of the data field in the source array to bind row ids to.

Default value

"null"

Example

Set the dataRowId property.

 <smart-table data-row-id='ID'></smart-table>

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

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

 table.dataRowId = 'uid';

Get the dataRowId property.

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

 let dataRowId = table.dataRowId;

dataSourceany

Determines the data source of the table component. The data source of the Table can be a regular Array or a DataAdapter instance. You can read more about the dataAdapter here - https://www.htmlelements.com/docs/data-adapter/.

Default value

Try a demo showcasing the dataSource property.

dataSourceSettingsobject

Sets the grid's data source settings when the dataSource property is set to an Array or URL.

Properties

autoGenerateColumnsboolean

Sets or gets whether a column will be auto-generated.

Default value

false

Example

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

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

 table.dataSourceSettings[0].autoGenerateColumns = false;

Get the autoGenerateColumns property.

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

 let autoGenerateColumns = table.dataSourceSettings[0].autoGenerateColumns;

childrenDataFieldstring

Sets or gets a children data field like 'children', 'items' in the data source. When this property is set, the dataAdapter will look for this data field when looping through the items. If it is found a hierarchical data source would be created.

Default value

Example

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

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

 table.dataSourceSettings[0].childrenDataField = 'children';

Get the childrenDataField property.

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

 let childrenDataField = table.dataSourceSettings[0].childrenDataField;

rootstring

Sets or gets the XML binding root.

Default value

Example

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

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

 table.dataSourceSettings[0].root = 'children';

Get the root property.

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

 let root = table.dataSourceSettings[0].root;

sanitizeHTML"all" | "blackList" | "none"

Sets or gets the Table values espace mode. This property specifies how html tags will be espaced by the table. The default 'blackList' value includes the most commonly used tags for espace such as 'script'. The 'all' value espaces all tags, whereas 'none' does not escape any tags.

Default value

"blackList"

Example

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

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

 table.dataSourceSettings[0].sanitizeHTML = 'blackList';

Get the sanitizeHTML property.

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

 let sanitizeHTML = table.dataSourceSettings[0].sanitizeHTML;

sanitizeHTMLRender"text" | "html"

Determines whether cell values will display the espaced values as text or html.

Default value

"text"

Example

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

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

 table.dataSourceSettings[0].sanitizeHTMLRender = 'html';

Get the sanitizeHTMLRender property.

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

 let sanitizeHTMLRender = table.dataSourceSettings[0].sanitizeHTMLRender;

recordstring

Sets or gets the XML binding record.

Default value

Example

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

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

 table.dataSourceSettings[0].record = 'children';

Get the record property.

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

 let record = table.dataSourceSettings[0].record;

groupBystring[]

Sets or gets the data fields to group by.

Default value

[]

Example

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

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

 table.dataSourceSettings[0].groupBy = true;

Get the groupBy property.

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

 let groupBy = table.dataSourceSettings[0].groupBy;

dataFields{name: string, dataType: string}[] | string[]

Sets or gets the data fields which decribe the loaded data and data type. Ex: ['id: number', 'firstName: string', 'lastName: string']

Properties

name

map

dataType

namestring

Sets the dataField name.

Default value

Get the name property.

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

 let name = table.dataSourceSettings[0].dataFields[0].name;

mapstring

Sets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.

Default value

Get the map property.

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

 let map = table.dataSourceSettings[0].dataFields[0].map;

dataType"string" | "date" | "boolean" | "number" | "array" | "any"

Sets the dataField type.

Default value

"string"

Get the dataType property.

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

 let dataType = table.dataSourceSettings[0].dataFields[0].dataType;

Example

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

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

 table.dataSourceSettings[0].dataFields = [id: number];

Get the dataFields property.

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

 let dataFields = table.dataSourceSettings[0].dataFields;

dataSourceType"array" | "json" | "xml" | "csv" | "tsv"

Sets or gets whether the data source type.

Default value

"array"

Example

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

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

 table.dataSourceSettings[0].dataSourceType = 'json';

Get the dataSourceType property.

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

 let dataSourceType = table.dataSourceSettings[0].dataSourceType;

idstring

Sets or gets the dataAdapter's id

Default value

Get the id property.

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

 let id = table.dataSourceSettings[0].id;

keyDataFieldstring

Sets or gets the key data field to be used for building the hierarchy. It is used in combination with the parentDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'

Default value

Example

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

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

 table.dataSourceSettings[0].keyDataField = 'uid';

Get the keyDataField property.

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

 let keyDataField = table.dataSourceSettings[0].keyDataField;

parentDataFieldstring

Sets or gets the parent data field to be used for building the hierarchy. It is used in combination with the keyDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'

Default value

Example

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

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

 table.dataSourceSettings[0].parentDataField = 'uid';

Get the parentDataField property.

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

 let parentDataField = table.dataSourceSettings[0].parentDataField;

mapCharstring

Sets the 'mapChar' data field of the record

Default value

"."

Example

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

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

 table.dataSourceSettings[0].mapChar = 'uid';

Get the mapChar property.

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

 let mapChar = table.dataSourceSettings[0].mapChar;

virtualDataSourceany

Sets the virtual data source function which is called each time the Grid requests data. Demos using 'virtualDataSource' are available on the Grid demos page.

Get the virtualDataSource property.

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

 let virtualDataSource = table.dataSourceSettings[0].virtualDataSource;

virtualDataSourceOnExpandany

Sets the virtual data source on expand function. This function is called when we load data on demand in Tree or TreeGrid and virtualDataSource in these components is set, too

Get the virtualDataSourceOnExpand property.

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

 let virtualDataSourceOnExpand = table.dataSourceSettings[0].virtualDataSourceOnExpand;

Try a demo showcasing the dataSourceSettings property.

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

Try a demo showcasing the editing property.

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.

Allowed Values

"cell" - Only one cell at a time can be edited.
"row" - All cells from a row can be edited at a time.

Default value

"cell"

Try a demo showcasing the editMode property.

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;

expandHierarchyboolean

Sets or gets whether Row hierarchies are expanded by default, when created. Use this property when you want your groups to be expanded by default, when the Table is grouped or when you use the Table in tree mode.

Default value

false

Example

Set the expandHierarchy property.

 <smart-table expand-hierarchy></smart-table>

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

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

 table.expandHierarchy = false;

Get the expandHierarchy property.

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

 let expandHierarchy = table.expandHierarchy;

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

Try a demo showcasing the filtering property.

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

Try a demo showcasing the filterRow property.

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;

filterOperatorboolean

Sets or gets the Table's filter operator. It determines whether 'and' or 'or' is used when applying column filters - cellvalue1 && cellvalue2 vs cellvalue1 || cellvalue2

Default value

and

Try a demo showcasing the filterOperator property.

Example

Set the filterOperator property.

 <smart-table filter-operator></smart-table>

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

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

 table.filterOperator = false;

Get the filterOperator property.

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

 let filterOperator = table.filterOperator;

filterTemplatestring

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

Default value

"null"

Try a demo showcasing the filterTemplate property.

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"

Try a demo showcasing the footerRow property.

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;

formulasboolean

Sets or gets whether Excel-like formulas can be passed as cell values. Formulas are always preceded by the = sign and are re-evaluated when cell values are changed. This feature depends on the third-party free plug-in formula-parser (the file formula-parser.min.js has to be referenced).

Default value

false

Try a demo showcasing the formulas property.

Example

Set the formulas property.

 <smart-table formulas></smart-table>

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

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

 table.formulas = false;

Get the formulas property.

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

 let formulas = table.formulas;

freezeFooterboolean

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

Default value

false

Try a demo showcasing the freezeFooter property.

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

Try a demo showcasing the freezeHeader property.

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

Try a demo showcasing the grouping property.

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;

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

A callback function that can be used to modify the contents of a grouping header row. By changing the 'label' you modify the rendered grouping value. By changing the 'template' you can modify the entire content including the column and count information.

headerRowstring | HTMLElement | Function

Allows to customize the header of the element. The property accepts the id of an HTMLElement, HTMLTemplateElement, function or a string that will be parsed as HTML. When set to a function it contains one argument - the header element of the Table.

Try a demo showcasing the headerRow property.

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 = function (header) { header.classList.add('custom-style-header'); };

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

Try a demo showcasing the keyboardNavigation property.

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;

hideSelectionColumnboolean

Sets or gets whether the checkboxes are displayed in the selection column.

Default value

false

Example

Set the hideSelectionColumn property.

 <smart-table hide-selection-column></smart-table>

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

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

 table.hideSelectionColumn = false;

Get the hideSelectionColumn property.

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

 let hideSelectionColumn = table.hideSelectionColumn;

loadColumnStateBehavior"implementationOnly" | "intersection" | "stateOnly"

Sets or gets the behavior when loading column settings either via autoLoadState or loadState. Applicable only when stateSettings contains 'columns'.

Allowed Values

"implementationOnly" - Only the settings of columns that were present before loading the state are loaded. Current column labels are not modified.
"intersection" - All columns settings from the loaded state are loaded. Extra columns not present in the loaded state are added at the end. Current column labels are not modified.
"stateOnly" - Column settings are applied as loaded from the state. Any old column settings or extra columns are discarded.

Default value

"implementationOnly"

Example

Set the loadColumnStateBehavior property.

 <smart-table load-column-state-behavior='implementationOnly'></smart-table>

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

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

 table.loadColumnStateBehavior = 'stateOnly';

Get the loadColumnStateBehavior property.

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

 let loadColumnStateBehavior = table.loadColumnStateBehavior;

localestring

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

Default value

"en"

Try a demo showcasing the locale property.

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"

}

Try a demo showcasing the messages property.

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;

onLoad{ (): void }

A callback function executed after the Table is being initialized.

onUpdateComplete{ (): void }

A callback function executed when the Table's update is finished in the endUpdate method.

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

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

Default value

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

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

Try a demo showcasing the paging property.

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

Try a demo showcasing the rightToLeft property.

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"

Try a demo showcasing the rowDetailTemplate property.

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;

selected[]

Sets or gets an array of the Table's selected row's ids.

Example

Set the selected property.

 <smart-table selected='[5, 8, 9]'></smart-table>

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

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

 table.selected = [0];

Get the selected property.

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

 let selected = table.selected;

selectionboolean

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

Default value

false

Try a demo showcasing the selection property.

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"one" | "many" | "extended"

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

Allowed Values

"one" - Single row can be selected by clicking a row or a checkbox.
"many" - Multiple rows can be selected by clicking the rows or their respective checkboxes.
"extended" - Single row can be selected by clicking it. Multiple rows can be selected by Ctrl- or Shift-clicking the rows or just clicking their respective checkboxes.

Default value

"many"

Try a demo showcasing the selectionMode property.

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;

selectionByHierarchyboolean

Sets or gets whether row selection (via checkboxes) is hierarchical. When a parent row is selected, all sub rows are selected, too.

Default value

true

Example

Set the selectionByHierarchy property.

 <smart-table selection-by-hierarchy></smart-table>

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

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

 table.selectionByHierarchy = false;

Get the selectionByHierarchy property.

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

 let selectionByHierarchy = table.selectionByHierarchy;

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:

dataSource - the Table's data source
sortColumns - an array of the data fields of columns to be sorted by
directions - an array of sort directions to be sorted by (corresponding to sortColumns)
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

Try a demo showcasing the sort property.

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"

Try a demo showcasing the sortMode property.

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;

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

Default value

false

Try a demo showcasing the tooltip property.

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;

virtualizationboolean

Enables or disables HTML virtualization. This functionality allows for only visible rows to be rendered, resulting in an increased Table performance.

Default value

false

Try a demo showcasing the virtualization property.

Example

Set the virtualization property.

 <smart-table virtualization></smart-table>

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

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

 table.virtualization = false;

Get the virtualization property.

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

 let virtualization = table.virtualization;

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.id - The id of the row.

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

ev.detail.row - The data of the cell's row.

ev.detail.value - The data value of the cell.

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,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        value = detail.value;

	// 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.id - The cell's row id.

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

ev.detail.row - The data of the cell's row.

ev.detail.value - The data value of the cell.

ev.detail.originalEvent - The 'click' event object.

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,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        value = detail.value,
        originalEvent = detail.originalEvent;

	// 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.id - The id of the row.

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

ev.detail.row - The new data of the cell's row.

ev.detail.value - The data value of the cell.

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,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        value = detail.value;

	// event handling code goes here.
})

changeCustomEvent

This event is triggered when the selection is changed. Within the event handler you can get the selection by using the 'getSelection' method.

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

collapseCustomEvent

This event is triggered when a row has been collapsed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCollapse

Arguments

evCustomEvent

ev.detailObject

ev.detail.id - The id of the collapsed row.

ev.detail.record - The data of the collapsed 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 collapse event.

const table = document.querySelector('smart-table');
table.addEventListener('collapse', function (event) {
    const detail = event.detail,
        id = detail.id,
        record = detail.record;

	// event handling code goes here.
})

expandCustomEvent

This event is triggered when a row has been expanded.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onExpand

Arguments

evCustomEvent

ev.detailObject

ev.detail.id - The id of the expanded row.

ev.detail.record - The (aggregated) data of the expanded 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 expand event.

const table = document.querySelector('smart-table');
table.addEventListener('expand', function (event) {
    const detail = event.detail,
        id = detail.id,
        record = detail.record;

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

closeColumnMenuCustomEvent

This event is triggered when a column menu is closed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCloseColumnMenu

Arguments

evCustomEvent

ev.detailObject

ev.detail.dataField - The data field of the 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 closeColumnMenu event.

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

	// event handling code goes here.
})

columnResizeCustomEvent

This event is triggered when a column has been resized via dragging or double-click.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onColumnResize

Arguments

evCustomEvent

ev.detailObject

ev.detail.dataField - The data field of the column.

ev.detail.headerCellElement - The column's header cell HTML element.

ev.detail.width - The new width of the 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 columnResize event.

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

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

ev.detail.path - The group's path (only when collapsing/expanding). The path includes the path to the expanded/collapsed group starting from the root group. The indexes are joined with '.'. This parameter is available when the 'action' is 'expand' or 'collapse'.

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,
        path = detail.path;

	// event handling code goes here.
})

openColumnMenuCustomEvent

This event is triggered when a column menu is opened.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onOpenColumnMenu

Arguments

evCustomEvent

ev.detailObject

ev.detail.dataField - The data field of the 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 openColumnMenu event.

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

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

rowBeginEditCustomEvent

This event is triggered when a row edit operation has been initiated (only when editMode is 'row').

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRowBeginEdit

Arguments

evCustomEvent

ev.detailObject

ev.detail.id - The id of the row.

ev.detail.row - The data of the 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 rowBeginEdit event.

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

	// event handling code goes here.
})

rowEndEditCustomEvent

This event is triggered when a row has been edited (only when editMode is 'row').

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRowEndEdit

Arguments

evCustomEvent

ev.detailObject

ev.detail.id - The id of the row.

ev.detail.row - The new data of the 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 rowEndEdit event.

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

	// event handling code goes here.
})

sortCustomEvent

This event is triggered when a column header cell has been clicked or sorting is applied programmatically using the Table API.

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.

ev.detail.sortDataFields - An array with information about the data fields the Table has been sorted by.

ev.detail.sortOrders - An array with information about the columns sort orders the Table has been sorted by.

ev.detail.sortDataTypes - An array with information about the columns data types the Table has been sorted by.

ev.detail.type - The type of action that initiated the data sort. Possible types: 'programmatic', 'interaction'

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,
        sortDataFields = detail.sortDataFields,
        sortOrders = detail.sortOrders,
        sortDataTypes = detail.sortDataTypes,
        type = detail.type;

	// event handling code goes here.
})

Methods

addRow( data: any): void

Adds a new row. When you invoke the method, pass a JSON object with the row's data.

Arguments

dataany

JSON object with the new row's data. Sample JSON: {firstName: 'Peter', lastName: 'Fuller'}.

Invoke the addRow method.

const table = document.querySelector('smart-table');
table.addRow({"firstName":"Peter","lastName":"Fuller"});

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

Adds a filter to a specific column.

Arguments

dataFieldstring

The column's data field.

filterany

FilterGroup object or a Filter expression. Filter expression like: 'startsWith B'. Example 2: ['contains Andrew or contains Nancy'], Example 3: ['quantity', '<= 3 and >= 8']. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'

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

beginUpdate(): void

Begins an update operation. Suspends all table refreshes and renders.

Invoke the beginUpdate method.

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

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

collapseAllGroups(): void

Collapses all groups (in tree mode).

Invoke the collapseAllGroups method.

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

collapseAllRowDetails(): void

Collapses all row details. Rows that have details defined via the rowDetailTemplate will be collapsed.

Invoke the collapseAllRowDetails method.

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

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

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

Disables a selection of a row. When the 'selection' property is set to 'true', selection is enabled for all rows by default.

Arguments

rowIdstring | number | (string | number)[]

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

Invoke the disableSelect method.

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

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

Enables a selection of a row, if it was previously disabled through a 'disableSelect' method call. When the 'selection' property is set to 'true', selection is enabled for all rows by default.

Arguments

rowIdstring | number | (string | number)[]

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

Invoke the enableSelect method.

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

endEdit(): void

Ends the current edit operation and saves changes.

Invoke the endEdit method.

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

endUpdate( refresh?: boolean): void

Ends an update operation. Resumes all table refreshes and renders. Re-renders the Table.

Arguments

refresh?boolean

Optionally you can pass 'false' in case you need to manually call the 'refresh' method. By default, the table is re-rendered.

Invoke the endUpdate method.

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

expandAllRows(): void

Expands all rows (in tree mode).

Invoke the expandAllRows method.

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

expandAllGroups(): void

Expands all groups (in tree mode).

Invoke the expandAllGroups method.

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

expandAllRowDetails(): void

Expands all row details. Rows that have details defined via rowDetailTemplate will be expanded.

Invoke the expandAllRowDetails method.

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

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

getColumnProperty( columnDataField: string, propertyName: string): any

Gets a column property.

Arguments

columnDataFieldstring

Column field name.

propertyNamestring

Column property name.

Returnsany

Invoke the getColumnProperty method.

const table = document.querySelector('smart-table');
const result = table.getColumnProperty("firstName","width");

isGroupExpanded( index: string): boolean

Checks whether a group is expanded and returns true or false. false is returned when the group index is undefined, too.

Arguments

indexstring

The group's hierarchical index.

Returnsboolean

Invoke the isGroupExpanded method.

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

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

removeRow( row: string | number): void

Removes a row by its id.

Arguments

rowstring | number

The id of the cell's row.

Invoke the removeRow method.

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

resetState(): void

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

Invoke the resetState method.

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

Try a demo showcasing the resetState method.

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

setColumnProperty( columnDataField: string, propertyName: string, propertyValue: any): void

Sets a column property.

Arguments

columnDataFieldstring

Column field name.

propertyNamestring

Column property name.

propertyValueany

Property value.

Invoke the setColumnProperty method.

const table = document.querySelector('smart-table');
table.setColumnProperty("firstName","width","300");

updateRow( rowId: string | number, data: any): void

Updates a table row. The method expects two parameters - row id and JSON object with the new row data.

Arguments

rowIdstring | number

The id of the row.

dataany

JSON object with the new row's data. Example: {firstName: 'Peter', lastName: 'Fuller'}.

Invoke the updateRow method.

const table = document.querySelector('smart-table');
table.updateRow(3,{"firstName":"Peter","lastName":"Fuller"});

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

--smart-table-header-footer-heightvar()

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-row-detail-heightvar()

Default value

"var(--smart-table-row-height)"

smartTable row detail height

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

--smart-table-group-name-displayvar()

Default value

"unset"

smartTable group header name display

--smart-table-group-count-displayvar()

Default value

"unset"

smartTable group header leaf count display

Table Javascript API

autoLoadStateboolean

Default value

Example

autoSaveStateboolean

Default value

Example

columnGroups{ label?: string, name: string, parentGroup?: string }[]

Properties

labelstring

Default value

namestring

Default value

parentGroupstring

Default value

Example

columnMinWidthstring | number

Default value

Example

columnReorderboolean

Default value

Example

columnResizeboolean

Default value

Example

columnResizeNormalizeboolean

Default value

Example

columnResizeFeedbackboolean

Default value

Example

Properties

allowEditboolean

Default value

allowFilterboolean

Default value

allowGroupboolean

Default value

allowResizeboolean

Default value

allowSortboolean

Default value

allowMenuboolean

Default value

allowHideboolean

Default value

columnGroupstring

Default value

dataFieldstring

Default value

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

Default value

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"true" | "near" | "far"

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

labelstring

Default value

mapstring

Default value

responsivePrioritynumber | null

sort{ (firstRecord: any, secondRecord: any): number }

templateElementstring

Default value

templateElementSettings{ (value: any, row: string | number, templateElement: HTMLElement): void }

transform{ (value: any): any }

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

visibleboolean

Default value