Table Javascript API

Class

Table

Table is an alternative of the HTMLTableElement.

Selector

smart-table

Properties

Events

Methods

Properties

autoLoadStateboolean

Controls whether the application automatically restores its previous state from the browser's localStorage. When enabled, it retrieves saved settings such as column configurations, expanded or selected rows, active filters, groupings, and the sort order of columns. The specific state information that is loaded depends on the options defined in the stateSettings property.

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

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

 table.autoLoadState = false;

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

 let autoLoadState = table.autoLoadState;

autoSaveStateboolean

Controls whether the component automatically saves its current state to the browser’s localStorage. When enabled, data such as column configurations, expanded row states, selected rows, applied filters, grouping options, and sorted columns are persistently stored. The specific state information saved depends on the options set in the stateSettings property. This allows users’ table settings to be retained and restored across browser sessions.

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

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

 table.autoSaveState = false;

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

 let autoSaveState = table.autoSaveState;

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

Defines or retrieves an array of column groups that establish the hierarchical structure of the column headers. Note: When a column header hierarchy is configured using these column groups, features such as column resizing and auto-sizing are disabled and will not be available for those columns.

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

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

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

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

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

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

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

 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' }];

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

 let columnGroups = table.columnGroups;

columnMinWidthstring | number

Specifies or retrieves the minimum width for columns when columnSizeMode is set to 'auto' or when columns are being resized by the user. This property determines the smallest allowable width for columns during these operations. Note: This setting is ignored for columns that have their width explicitly defined through code.

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

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

 table.columnMinWidth = 20px;

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

 let columnMinWidth = table.columnMinWidth;

columnReorderboolean

Determines whether users are allowed to reorder columns by dragging them. When enabled, columns can be rearranged by the user; when disabled, the column order is fixed. This property can be set to enable or disable column reordering, or queried to check the current state.

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

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

 table.columnReorder = false;

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

 let columnReorder = table.columnReorder;

columnResizeboolean

Enables or disables the ability for users to resize table columns. When this option is enabled, users can manually adjust the width of each column. Note: The actual column sizing is still governed by the standard HTML table behavior for table-layout: fixed, as smart-table is built upon this layout model. This means columns have a fixed width and resizing may affect the overall table width proportionally, consistent with native HTML tables using table-layout: fixed.

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

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

 table.columnResize = false;

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

 let columnResize = table.columnResize;

columnResizeNormalizeboolean

This property controls how the table adjusts its column widths when columnSizeMode is set to 'default'.

- When columnResizeNormalize is 'false', and every table column has a defined width, the Table will insert an extra '' element. This additional header cell ensures that the customized column widths are preserved, preventing the browser from automatically resizing your columns and thereby maintaining the exact width configuration you specified.
- When columnResizeNormalize is 'true', the Table will not add an extra ''. Instead, it distributes the available space among the columns, causing them to expand or contract as needed—similar to the default behavior of standard HTML tables. This results in a more fluid, responsive layout, where any unallocated space is automatically filled.

This property is useful for toggling between a strictly controlled column layout and one that behaves like a regular HTML table when sizing columns.

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

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

 table.columnResizeNormalize = false;

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

 let columnResizeNormalize = table.columnResizeNormalize;

columnResizeFeedbackboolean

Determines whether a visual feedback indicator is shown during column resizing, displaying the new column width in pixels as the user adjusts the column. This property can be set to enable or disable the display of the width feedback overlay, or queried to check its current state.

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

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

 table.columnResizeFeedback = false;

 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 }[]

Provides detailed definitions and configuration options for the properties of each column, including attributes such as data type, header label, visibility, sorting, filtering, and formatting. This section outlines how individual columns should be displayed and behave within the table or data grid.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 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' }] }];

 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; }[]

Defines or retrieves the rules and settings for conditional formatting applied to the table's cells, allowing specific formatting (such as colors, styles, or icons) to be applied dynamically based on the cell values or conditions.

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

 let column = table.conditionalFormatting.column;

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

 let condition = table.conditionalFormatting.condition;

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

 let firstValue = table.conditionalFormatting.firstValue;

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

 let fontFamily = table.conditionalFormatting.fontFamily;

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

 let fontSize = table.conditionalFormatting.fontSize;

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

 let highlight = table.conditionalFormatting.highlight;

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

 let secondValue = table.conditionalFormatting.secondValue;

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

 let text = table.conditionalFormatting.text;

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

 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' }];

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

 let conditionalFormatting = table.conditionalFormatting;

columnMenuboolean

Defines the column menu functionality for the grid. When this property is set to true, a menu icon appears in the header of each column. Clicking this icon opens a column menu, providing users with options to sort the data, apply filters, and toggle the visibility of columns. You can set this property to enable or disable the column menu, or retrieve its current state.

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

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

 table.columnMenu = true;

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

 let columnMenu = table.columnMenu;

columnSizeMode"auto" | "default"

---

Determines how the table columns are sized, supporting two distinct modes:

- ''auto' Mode:'
Columns are automatically sized based on their content and the specified columnMinWidth value. If the table does not have enough horizontal space to display all content, excess text is truncated with ellipses. Manually specified static column widths (set by the user) will still be honored in this mode.

- ''default' Mode:'
Columns follow the standard HTML table's table-layout: fixed behavior. In this mode, column widths do not adapt to content; instead, each column's width is determined either by a fixed value (set via the column’s width property) or distributed evenly if no width is specified.

Use this property to control whether column widths are calculated automatically based on content or determined by fixed sizing rules.

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.

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

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

 table.columnSizeMode = 'default';

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

 let columnSizeMode = table.columnSizeMode;

conditionalFormattingButtonboolean

Controls the visibility of the "Conditional Formatting" button in the Table component’s header toolbar. When enabled, this button appears in the toolbar and allows users to open a dialog where they can configure and apply conditional formatting rules to the table's data. This property can be used to programmatically show or hide the button, or to check if it is currently displayed.

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

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

 table.conditionalFormattingButton = false;

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

 let conditionalFormattingButton = table.conditionalFormattingButton;

deferredScrollDelaynumber

This property specifies the interval, in milliseconds, that must elapse during vertical scrolling before the table data is refreshed or updated. Adjusting this setting can help control the responsiveness and performance of data loading while scrolling through the table.

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

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

 table.deferredScrollDelay = 0;

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

 let deferredScrollDelay = table.deferredScrollDelay;

dataRowIdstring

When the dataSource property is bound directly to a plain array—rather than to an instance of Smart.DataAdapter—this property specifies the name of the field within each array element that should be used as the unique row identifier. You can use it to set or retrieve the key that maps each item's row id, allowing the component to correctly reference, update, and manage rows by their unique ids.

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

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

 table.dataRowId = 'uid';

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

 let dataRowId = table.dataRowId;

dataSourceany

Specifies the data source for the Table component. This property accepts either a standard JavaScript Array or a DataAdapter instance. Using an Array allows you to provide the table data directly, while a DataAdapter offers advanced data management features such as data binding, sorting, filtering, and integration with remote data sources. For detailed information about the DataAdapter and its capabilities, visit: https://www.htmlelements.com/docs/data-adapter/

dataSourceSettingsobject

Configures the grid's data source settings when the dataSource property is assigned either a local data array or a remote URL. This allows the grid to properly retrieve, bind, and display data from the specified source, whether it is provided directly as an array or fetched asynchronously from a web endpoint.

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

 table.dataSourceSettings[0].autoGenerateColumns = false;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 table.dataSourceSettings[0].groupBy = true;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

dataTransform{ (record: any): void }

A callback function that allows you to modify or transform each record in the initial dataSource. If provided, this function is invoked once for every record in the dataSource, receiving the individual record as its argument. The function should return the transformed record, which will be included in the final processed data set.

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

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

 table.dataTransform = dataTransform;

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

 let dataTransform = table.dataTransform;

disabledboolean

Prevents users from interacting with the element, such as clicking, selecting, typing, or triggering any events. The element will appear disabled and will not respond to any user input.

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

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

 table.disabled = false;

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

 let disabled = table.disabled;

editingboolean

Determines whether the Table is editable. When set to true, users can modify the contents of the Table; when false, the Table is read-only and cannot be edited. This property can be used to both retrieve the current editable state and update it as needed.

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

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

 table.editing = false;

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

 let editing = table.editing;

editMode"cell" | "row"

Enables or retrieves the current state of edit mode, determining whether the component is in an editable state. When set to true, users can modify the content; when set to false, the component is read-only.

Allowed Values

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

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

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

 table.editMode = 'cell';

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

 let editMode = table.editMode;

expandHierarchyboolean

Determines whether row hierarchies are automatically expanded when they are initially created. When this property is enabled, grouped rows or tree-structured rows in the Table will be expanded by default, allowing users to see all subgrouped data without requiring manual expansion. Use this property if you want hierarchical groups in the Table to appear open automatically when the Table is grouped or when using tree mode.

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

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

 table.expandHierarchy = false;

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

 let expandHierarchy = table.expandHierarchy;

filteringboolean

Controls whether filtering is enabled for the Table. When filtering is enabled (the default), each string and numeric column displays a filter input in the header, allowing users to filter table rows based on column values. Setting this property to false disables all filter inputs and prevents users from filtering the table data.

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

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

 table.filtering = false;

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

 let filtering = table.filtering;

filterRowboolean

Determines whether the Table supports data filtering through a dedicated filter row. When enabled, users can input criteria directly into this row to dynamically filter and display matching rows in the Table. This property can be set to enable or disable the filter row feature, and can also be queried to check its current state.

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

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

 table.filterRow = false;

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

 let filterRow = table.filterRow;

filterOperatorboolean

Gets or sets the filter operator for the table, determining how multiple column filters are combined. If set to 'and', all filter conditions must be met for a row to be displayed (e.g., cellValue1 && cellValue2). If set to 'or', a row is shown if it meets any one of the filter conditions (e.g., cellValue1 || cellValue2). This property controls whether filters are applied using logical 'AND' or 'OR' operations.

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

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

 table.filterOperator = false;

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

 let filterOperator = table.filterOperator;

filterTemplatestring

Gets or sets the ID of an HTML <template> element to be used as a custom filter template. This allows you to define and apply your own filter UI by referencing the specified template’s ID.

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

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

 table.filterTemplate = 'myFilterTemplate';

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

 let filterTemplate = table.filterTemplate;

footerRowstring

Specifies or retrieves the ID of an HTML '<template>' element whose content will be used to render the footer row(s) of the component. This allows you to define custom footer layouts using template markup and apply them dynamically by referencing the template's ID.

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

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

 table.footerRow = 'myFooterRow';

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

 let footerRow = table.footerRow;

formulasboolean

Enables or disables support for Excel-style formulas as cell values. When enabled, users can enter formulas starting with the '=' sign (e.g., "=SUM(A1:A3)") directly into cells. These formulas are automatically recalculated whenever referenced cell values change. Note: This functionality requires the third-party, free 'formula-parser' plugin; be sure to include the 'formula-parser.min.js' file as a dependency in your project.

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

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

 table.formulas = false;

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

 let formulas = table.formulas;

freezeFooterboolean

Defines or retrieves whether the Table's footer remains fixed (sticky/frozen) at the bottom of the Table when scrolling vertically, ensuring it stays visible regardless of the Table's scroll position.

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

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

 table.freezeFooter = false;

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

 let freezeFooter = table.freezeFooter;

freezeHeaderboolean

Sets or retrieves whether the table’s column header remains fixed (sticky) at the top of the viewport while scrolling through the table content. When enabled, the column header stays visible, improving readability for tables with many rows.

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

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

 table.freezeHeader = false;

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

 let freezeHeader = table.freezeHeader;

groupingboolean

Configures or retrieves the current state of table grouping functionality. When enabled, rows in the table can be organized into groups based on specified criteria, allowing for better data categorization and easier analysis.

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

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

 table.grouping = false;

 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 allows you to customize the contents of a grouping header row. You can update the 'label' property to change the displayed grouping value. Additionally, by modifying the 'template' property, you have full control over the rendered output, enabling you to redefine the entire content of the header row—including the group label, associated column information, and the item count. Use this function to tailor the appearance and structure of grouping headers to your application's specific needs.

headerRowstring | HTMLElement | Function

Enhances customization of the element's header. This property accepts several types of values:

- The 'id' of an 'HTMLElement' or 'HTMLTemplateElement', which will be used to render the header.
- A function, which receives the header element of the table as its sole argument. Use this function to dynamically generate or modify the header content.
- A string containing HTML markup, which will be parsed and inserted as the header.

This flexibility allows you to define static, template-based, or fully dynamic headers for the element according to your application's needs.

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

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

 table.headerRow = function (header) { header.classList.add('custom-style-header'); };

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

 let headerRow = table.headerRow;

keyboardNavigationboolean

Controls whether users can navigate through the table using keyboard inputs. When enabled, users can move between table cells, rows, or columns using keys such as Tab, Arrow keys, or other navigation shortcuts. This setting can be accessed to check the current state (enabled or disabled) or modified to turn keyboard navigation on or off for the table.

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

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

 table.keyboardNavigation = false;

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

 let keyboardNavigation = table.keyboardNavigation;

hideSelectionColumnboolean

Controls whether checkboxes are visible in the selection column. When set to true, checkboxes will be displayed, allowing users to select multiple items. When set to false, the selection column will not display checkboxes. This property can be used to programmatically toggle the visibility of checkboxes and can also be read to determine the current display state.

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

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

 table.hideSelectionColumn = false;

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

 let hideSelectionColumn = table.hideSelectionColumn;

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

Defines how the column settings are handled during loading, whether automatically with autoLoadState or manually with loadState. This option is relevant only if the stateSettings array includes 'columns', ensuring that column-specific state (such as order, visibility, or width) is properly managed during the state load process.

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.

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

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

 table.loadColumnStateBehavior = 'stateOnly';

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

 let loadColumnStateBehavior = table.loadColumnStateBehavior;

unlockKeystring

Defines or retrieves the unlockKey property, a unique value required to activate or authorize access to the product's features. This key is used to verify that the user is permitted to unlock and use the product.

 <smart-table unlock-key=''></smart-table>

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

 table.unlockKey = '1111-2222-3333-4444-5555';

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

 let unlockKey = table.unlockKey;

localestring

Specifies or retrieves the currently selected language code (e.g., "en", "fr", "es") for localization purposes. This property works together with the messages property to determine which set of localized messages should be displayed or used by the application. Adjusting this property changes which language mappings from messages are active.

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

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

 table.locale = 'fr';

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

 let locale = table.locale;

messagesobject

Defines or retrieves an object containing key-value pairs of strings used within the element, allowing for customization and localization of displayed text. This property works together with the locale property to present the appropriate language and regional terms based on the user's locale preferences.

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

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

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

 let messages = table.messages;

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

A callback function that is invoked every time a table cell is rendered. This function receives relevant cell data and context as arguments, allowing you to customize the cell’s content, appearance, or behavior dynamically during the rendering process.

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

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

 table.onCellRender = onCellRenderCallback;

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

 let onCellRender = table.onCellRender;

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

A callback function that is invoked every time a Table column header cell is rendered. This function allows you to customize the rendering or behavior of each column header cell, and is called with information about the specific column being rendered.

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

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

 table.onColumnRender = onColumnRenderCallback;

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

 let onColumnRender = table.onColumnRender;

onInit{ (): void }

A callback function that is executed during the initialization process of the Table component. This function is triggered once the Table setup begins, allowing you to run custom code or perform additional configurations before the Table is fully rendered.

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

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

 table.onInit = onInitCallback;

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

 let onInit = table.onInit;

onLoad{ (): void }

A callback function that is executed immediately after the Table component has finished initializing. This function allows you to perform custom actions or setup tasks once the Table is fully ready.

onUpdateComplete{ (): void }

A callback function that is invoked after the Table has completed all updates triggered by the endUpdate method. This function allows you to perform actions or handle additional logic once the update process is fully finished.

pageSizenumber

Specifies or retrieves the number of records displayed per page when paging is enabled. This property determines the size of each data page, allowing you to control how many items are shown to the user at a time.

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

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

 table.pageSize = 50;

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

 let pageSize = table.pageSize;

pageIndexnumber

Gets or sets the current page index (zero-based) when paging is enabled. This property allows you to specify or retrieve which page of data is currently being displayed, with the first page having an index of 0.

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

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

 table.pageIndex = 7;

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

 let pageIndex = table.pageIndex;

pagingboolean

Determines whether paging functionality is enabled. When set to true, data is divided into discrete pages for easier navigation and viewing; when false, all data is displayed in a single, continuous view. You can use this property to enable or disable paging, or retrieve its current state.

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

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

 table.paging = false;

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

 let paging = table.paging;

rightToLeftboolean

Specifies or retrieves a value that determines whether the element's alignment is configured for right-to-left (RTL) text direction, typically used for languages such as Arabic or Hebrew that require right-to-left font support.

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

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

 table.rightToLeft = true;

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

 let rightToLeft = table.rightToLeft;

rowDetailTemplatestring

Defines or retrieves a string template used for rendering the detail section of a row. This template enables you to display additional information beneath a master row when it is expanded. To populate the detail row with values from the master row, insert the relevant data field names within double curly brackets (e.g., {{price}}). When a user clicks on a row to expand it, the template is applied, and the placeholders are replaced with the corresponding data from that row.

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

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

 table.rowDetailTemplate = '
{{name}}
';

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

 let rowDetailTemplate = table.rowDetailTemplate;

onFilterRowInputany

Defines or retrieves a callback function that takes three arguments: column, filterConditions, and filterInputTemplateString. This function is responsible for generating and returning a new filter input element or template based on the specific column and the current filter conditions. Use this callback to customize how the filter input is rendered for each column in the table.

selected[]

Gets or sets an array containing the IDs of the currently selected rows in the Table. This property allows you to retrieve which rows are selected by their unique identifiers, or programmatically update the selection by supplying an array of row IDs.

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

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

 table.selected = [0];

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

 let selected = table.selected;

selectionboolean

Controls whether users can select table rows using checkboxes. When enabled, checkboxes appear next to each row, allowing users to select or deselect rows. The value can be set to enable or disable this feature, or retrieved to check the current selection mode.

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

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

 table.selection = false;

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

 let selection = table.selection;

selectionMode"one" | "many" | "extended"

Defines or retrieves the current selection mode for the component. This property is only applicable when selection functionality is enabled. Use it to specify how users can select items (e.g., single, multiple, or none).

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.

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

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

 table.selectionMode = 'many';

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

 let selectionMode = table.selectionMode;

selectionByHierarchyboolean

Controls the hierarchical row selection behavior using checkboxes. When enabled, selecting a parent row automatically selects all of its child (sub) rows. Likewise, deselecting a parent row will deselect all of its sub rows. You can use this property to get the current hierarchical selection state or to enable/disable this feature.

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

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

 table.selectionByHierarchy = false;

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

 let selectionByHierarchy = table.selectionByHierarchy;

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

Callback function triggered whenever a column is sorted, allowing you to customize or override the default sorting behavior of the table. The function receives the following four parameters:

1. dataSource: The table's current data source (array of data objects) that will be sorted.


2. sortColumns: An array of column field names representing the columns to sort by, in order of sorting priority.


3. directions: An array of sort directions ('asc' or 'desc'), where each direction corresponds to the order of sortColumns.


4. defaultCompareFunctions: An array of default comparator functions for each column in sortColumns. You can use these to leverage default sorting logic for specific columns while overriding others as needed.

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

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

 table.sort = sortCallback;

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

 let sort = table.sort;

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

Specifies the sorting behavior applied to the table, such as ascending, descending, or custom order. This setting controls how table data is organized and displayed to the user.

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

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

 table.sortMode = 'many';

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

 let sortMode = table.sortMode;

stateSettingsstring[]

Specifies which aspects of the Table's current state can be saved (using autoSaveState or saveState) and restored (using autoLoadState or loadState). This determines which settings—such as column visibility, sorting, filters, and pagination—are included when persisting or retrieving the Table’s configuration.

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

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

 table.stateSettings = ['columns', 'filtered'];

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

 let stateSettings = table.stateSettings;

themestring

Specifies the theme used to style the element. The theme controls the overall appearance, including colors, fonts, and visual effects, ensuring a consistent look and feel across the user interface.

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

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

 table.theme = 'red';

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

 let theme = table.theme;

tooltipboolean

Determines whether a tooltip displaying the full, untruncated content appears when a user hovers over a table cell that contains truncated text. When enabled, hovering the mouse pointer over a cell with clipped or overflowed text will show a tooltip with the complete content; when disabled, no tooltip is displayed on hover. This setting can be used to specify or retrieve the current tooltip behavior for truncated cell content.

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

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

 table.tooltip = false;

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

 let tooltip = table.tooltip;

virtualizationboolean

Controls whether HTML virtualization is enabled. When activated, only the rows currently visible within the viewport are rendered in the DOM, rather than all rows at once. This optimization significantly improves table performance, especially when displaying large datasets, by reducing memory usage and speeding up rendering times.

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

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

 table.virtualization = false;

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

 let virtualization = table.virtualization;

Events

cellBeginEditCustomEvent

This event is triggered when a user begins editing the contents of a cell, signaling the initiation of a cell edit operation. It provides an opportunity to perform preparatory actions, such as validating the cell, applying custom styles, or capturing the cell’s initial value before any changes are made.

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

Arguments

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 whenever a user clicks on a cell within the component or data grid. It provides contextual information about the clicked cell, such as its row and column index, allowing you to perform custom actions in response to user interaction.

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

Arguments

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 immediately after a cell's value has been modified by the user, allowing you to respond to changes as soon as a cell is edited. It provides relevant information about the edited cell, such as its new value, previous value, row, and column, enabling precise handling of cell updates within the table or data grid.

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

Arguments

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 whenever the user changes the current selection, such as highlighting text or selecting an item. Inside the event handler, you can access the updated selection by calling the 'getSelection' method. This allows you to retrieve information about the newly selected content or item and perform any necessary actions in response to the change.

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

Arguments

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 in the data grid or table is collapsed, meaning its contents or nested rows are hidden from view. Use this event to execute custom logic after a user collapses a specific row.

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

Arguments

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 whenever a row in the table is expanded by the user, typically to reveal additional details or nested content associated with that row.

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

Arguments

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 whenever a user clicks on a column header cell, typically indicating that the header was selected—such as to initiate actions like sorting or displaying column options. It provides contextual information about the clicked header cell, enabling you to implement custom behaviors in response to header interactions.

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

Arguments

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 immediately after the column menu has been closed by the user, either by clicking outside the menu or performing an action that causes it to close. It allows you to execute custom logic in response to the closure of a column-specific menu in the interface.

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

Arguments

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 whenever a column's width is changed by the user, either by dragging the column's edge or by double-clicking to auto-fit the column. It allows you to respond to column resize actions, enabling custom logic such as persisting new column widths or updating related UI elements.

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

Arguments

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 whenever a user initiates or modifies a filtering action, such as applying, updating, or removing filters. It allows the application to respond to changes in filtering criteria, ensuring that the displayed data accurately reflects the selected filters.

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

Arguments

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 whenever a user performs an action related to grouping, such as creating, modifying, or deleting a group, or changing the grouping configuration. It allows your application to respond dynamically to changes in how items are grouped.

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

Arguments

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 fired whenever a user opens the menu associated with a column, such as by clicking a column header or menu icon. It provides an opportunity to perform custom actions or update the interface in response to the column menu becoming visible.

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

Arguments

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 whenever a user performs an action that changes the current page in a paginated component, such as navigating to the next or previous page, selecting a specific page number, or adjusting the page size.

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

Arguments

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 user begins editing a table row, but only if the editMode property is set to 'row'. This allows you to handle actions or logic specifically at the start of a row-level edit operation within your data grid or table component.

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

Arguments

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 whenever a table row is edited, but only if the editMode property is set to 'row'. It signifies that the user has completed changes to the entire row, as opposed to editing individual cells, and is useful for handling row-level updates or validation logic.

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

Arguments

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 whenever a column header cell in the table is clicked by the user, initiating a sort operation, or when sorting is applied programmatically through the Table API. It fires both on direct user interaction and when sorting state changes are made via code.

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

Arguments

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

Inserts a new row into the data set. To use this method, provide a JSON object containing key-value pairs that represent the data for each column in the new row. Each key should correspond to a column name, and its value should specify the cell's content for that column.

Arguments

dataany

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

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

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

Adds a custom filter to a specified column in the dataset, allowing you to display only the rows that meet defined criteria for that column. This function enables more precise data querying and improved data visualization by narrowing down results based on column-specific conditions.

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'

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

addGroup( dataField: string): void

Groups the dataset based on the unique values in a specified column, organizing the data into subsets where each group contains records sharing the same value for that column.

Arguments

dataFieldstring

The column's data field.

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

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

Initiates an edit operation, marking the start of a sequence where changes can be made to the data or document. This typically enables features such as undo or redo by tracking all modifications performed during the editing session.

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

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

beginUpdate(): void

Initiates an update operation by temporarily suspending all table data refreshes and rendering processes. This ensures that no visual or data changes occur until the update is completed, preventing partial renders and improving performance during batch modifications.

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

cancelEdit(): void

Terminates the current editing session and reverts any unsaved changes, restoring the content to its previous state before the edit began. No modifications made during this edit operation will be saved.

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

clearFilters(): void

Removes all currently applied filters from the data set or view, restoring the original unfiltered state.

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

clearGrouping(): void

Removes any currently applied grouping from the data set, restoring the original ungrouped view.

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

clearSelection(): void

Removes any currently selected items, resetting the selection state to none.

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

clearSort(): void

Removes any active sorting applied to the table, restoring the original order of the data. This action resets all column sort indicators and displays the table rows as they were initially loaded.

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

collapseAllRows(): void

Collapses all expanded rows in the tree view, minimizing each parent node so that only the top-level rows remain visible. This action helps organize and simplify the display by hiding any nested child rows.

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

collapseAllGroups(): void

Collapses all expanded groups in the tree view, minimizing each group so that only their parent nodes are visible. This action hides all nested child elements within the groups, providing a cleaner and more condensed overview of the tree structure.

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

collapseAllRowDetails(): void

Collapses all expanded row details in the data table. Any rows that currently display additional content through a defined rowDetailTemplate will be collapsed, hiding their extra details from view. Only the main row data will remain visible after this action.

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

collapseGroup( index: string): void

Collapses a specified group of elements, hiding its contents from view while retaining the group's header or main container visible. This action makes the group's items inaccessible until it is expanded again, improving interface organization and reducing visual clutter.

Arguments

indexstring

The group's hierarchical index.

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

collapseRow( rowId: string | number): void

Collapses the specified row in tree mode, hiding its child rows and displaying only the parent row.

Arguments

rowIdstring | number

The id of the row to collapse.

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

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

Prevents the selection of a specific row in the table. By default, when the 'selection' property is set to 'true', all rows are selectable. Use this option to disable row selection for individual rows as needed, overriding the global selection setting.

Arguments

rowIdstring | number | (string | number)[]

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

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

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

Restores row selection capability for a previously disabled row, typically after using the 'disableSelect' method. If the 'selection' property is set to 'true', selection is enabled for all rows by default, allowing users to select any row unless explicitly disabled.

Arguments

rowIdstring | number | (string | number)[]

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

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

endEdit(): void

Finalizes the current edit operation by applying and saving all changes made to the content, ensuring that modifications are committed and any unsaved edits are preserved.

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

endUpdate( refresh?: boolean): void

Ends the current update operation, allowing the table to resume normal refresh and render processes. This function restores automatic table updates that may have been paused during the update, and explicitly triggers a full re-render of the table to ensure all changes are reflected in the UI.

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.

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

expandAllRows(): void

Expands all rows in the tree view, revealing every nested child element and displaying the entire hierarchical structure.

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

expandAllGroups(): void

Expands and displays all group nodes in the tree view, revealing their child items and nested structures.

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

expandAllRowDetails(): void

Displays the detailed content for all table rows that have a rowDetailTemplate defined by expanding them simultaneously. Only rows associated with a rowDetailTemplate will show their additional details when this action is triggered; rows without a detail template remain unchanged.

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

expandGroup( index: string): void

Expands a collapsible group to reveal its hidden content or child elements. This action typically changes the group's state from collapsed to expanded, making its associated items visible within the user interface.

Arguments

indexstring

The group's hierarchical index.

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

expandRow( rowId: string | number): void

Expands a row to reveal its child elements or sub-rows when operating in tree view mode, allowing users to browse hierarchical data structures within the table.

Arguments

rowIdstring | number

The id of the row to expand.

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

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

Exports the data contained within the Table component to a downloadable file format (such as CSV, Excel, or JSON), enabling users to save or process the table data outside of the application.

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

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

getSelection(): (string | number)[]

Returns an array containing the unique identifiers (IDs) of all currently selected rows. Each element in the array represents the ID of a row that has been selected by the user or programmatically. If no rows are selected, the array will be empty.

Returns(string | number)[]

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

getState(): object

Returns the current state of the Table component as an object, including comprehensive details about the following: visible and hidden columns, expanded row keys, selected row keys, applied filters, active groupings, and the order and direction of sorted columns. This state object can be serialized, stored (e.g., in local storage or a database), and later restored by passing it to the loadState method, enabling consistent table configurations across sessions or users.

Returnsobject

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

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

Retrieves the current value stored in a specific cell, identified by its row and column coordinates. This function returns the cell's content, which may be a number, text, or other data type, depending on the cell's contents.

Arguments

rowstring | number

The id of the cell's row.

dataFieldstring

The dataField of the cell's column.

Returnsany

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

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

Retrieves the value of a specific property from a column object. This function allows you to access detailed information or settings associated with a particular column, such as its name, data type, default value, or any custom attributes.

Arguments

columnDataFieldstring

Column field name.

propertyNamestring

Column property name.

Returnsany

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

isGroupExpanded( index: string): boolean

Determines if a specified group is currently expanded and returns true if it is, or false otherwise. If the provided group index is undefined or does not correspond to a valid group, the function will also return false.

Arguments

indexstring

The group's hierarchical index.

Returnsboolean

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

loadState( state?: any): void

Loads the current state of the Table component, restoring settings such as visible columns, expanded rows, selected rows, applied filters, grouping configurations, and column sorting order. The specific aspects of the state that are loaded depend on the options specified in the stateSettings property. This allows for a customized and persistent table experience based on user preferences or previously saved configurations.

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.

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

navigateTo( pageIndex: number): void

Navigates the user to a specified web page or route within the application. This action typically updates the browser’s address bar and loads the corresponding content, enabling seamless transitions between different views or sections of the site. Optional parameters may include the target URL, query parameters, or navigation options such as replacing the current history entry.

Arguments

pageIndexnumber

The zero-based page index to navigate to.

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

refresh(): void

Updates the table by reloading its data and refreshing the displayed content to reflect the latest changes.

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

removeFilter( dataField: string): void

Clears all filters currently applied to the specified column, restoring its original, unfiltered data view.

Arguments

dataFieldstring

The column's data field.

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

removeGroup( dataField: string): void

Removes the existing grouping applied to the dataset based on the specified column, resulting in an ungrouped or flat structure with respect to that column. This operation effectively eliminates any aggregation or segmentation previously created through grouping by that column.

Arguments

dataFieldstring

The column's data field.

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

removeRow( row: string | number): void

Deletes a row from the data set based on the specified unique identifier (id). This operation locates the row with the matching id and removes it from the collection, ensuring the data remains consistent.

Arguments

rowstring | number

The id of the cell's row.

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

resetState(): void

Resets the Table's state according to the configuration specified by the stateSettings property. This action clears stored information such as column configurations, expanded or collapsed rows, selected rows, applied filters, groupings, and sorting order. Only the aspects of state indicated by stateSettings will be reset, ensuring fine-grained control over which parts of the Table's state are cleared.

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

saveState(): object

Persists the current state of the Table. This includes details such as column configurations, which rows are expanded or selected, any active filters, applied grouping, and the current column sort order. The specific aspects of the Table’s state that are saved depend on the options specified in the stateSettings property.

Returnsobject

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

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

Allows the selection of one or more rows from a dataset or table, enabling users to perform actions on multiple rows simultaneously.

Arguments

rowIdstring | number | (string | number)[]

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

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

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

Assigns a specified value to a particular cell within a data structure, such as a table or spreadsheet. This operation updates the cell’s current content with the new value provided.

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.

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.

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

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

Sets a property for a database or data grid column, allowing customization of its behavior or appearance—such as its data type, visibility, default value, sorting behavior, or formatting options.

Arguments

columnDataFieldstring

Column field name.

propertyNamestring

Column property name.

propertyValueany

Property value.

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

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

Updates an existing table row with new data. This method requires two parameters: the unique identifier (row id) of the row to be updated, and a JSON object containing the updated key-value pairs for the row's data. Only the specified fields in the JSON object will be modified; all other fields will remain unchanged.

Arguments

rowIdstring | number

The id of the row.

dataany

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

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

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

Deselects one or more previously selected rows in the dataset or table, removing their active or highlighted state.

Arguments

rowIdstring | number | (string | number)[]

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

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

CSS Variables

--smart-table-default-widthvar()

smartTable default width

--smart-table-default-heightvar()

smartTable default height

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

smartTable height of header and footer

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

smartTable height of column header

--smart-table-row-heightvar()

smartTable height of rows

--smart-table-cell-paddingvar()

smartTable cell padding

--smart-table-row-detail-heightvar()

smartTable row detail height

--smart-table-indentvar()

smartTable hierarchical cell indent

--smart-table-arrow-sizevar()

smartTable arrow size

--smart-table-arrow-marginvar()

smartTable arrow margin

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

smartTable group header name display

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

smartTable group header leaf count display