Table — Smart UI JavaScript API

Table — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Table - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-table id="demo-table"></smart-table>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.table.js';

    const el = document.getElementById('demo-table');
    if (el) {

      el.dataSource = [{ country: 'Brazil', area: 8515767, gdp: 2353025 }, { country: 'France', area: 675417, gdp: 2846889 }, { country: 'Japan', area: 377835, gdp: 4616335 }];
      el.columns = [{ dataField: 'country', label: 'Country' }, { dataField: 'area', label: 'Area' }, { dataField: 'gdp', label: 'GDP' }];
      el.sortMode = 'many';
      el.filtering = true;

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Table   Framework: JavaScript   Selector: smart-table

API counts: 60 properties, 44 methods, 16 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: addRow(), addFilter(), addGroup(), beginEdit(), beginUpdate(), cancelEdit()

Common events: cellBeginEdit, cellClick, cellEndEdit, change, collapse, expand

Module hint: smart-webcomponents/source/modules/smart.table.js

Table is an alternative of the HTMLTableElement.

Class

Table

Table

Table is an alternative of the HTMLTableElement.

Selector

smart-table

Quick picks

changecolumnsdataSourcedisabledrefresh

Properties

AautoLoadStateControls 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.
AautoSaveStateControls 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.
CcolumnGroupsDefines 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. Click for more details. Property object's options:
  • label:string - Sets or gets the column group's label that appears in the column header hierarchy.
  • name:string - Sets or gets the column group's unique name that is referenced in the columnGroup field of columns (TableColumn).
  • parentGroup:string - Sets or gets the name of the column group's parent group (also defined in columnGroups).
CcolumnMenuDefines 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.
CcolumnMinWidthSpecifies 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.
CcolumnReorderDetermines 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.
CcolumnResizeEnables 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.
CcolumnResizeFeedbackDetermines 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.
CcolumnResizeNormalizeThis 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.
CcolumnsProvides 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. Click for more details. Property object's options:
  • allowEdit:boolean - Sets or gets whether the column's cells can be edited.
  • allowFilter:boolean - Sets or gets whether the column can be filtered.
  • allowGroup:boolean - Sets or gets whether the table can be grouped by the column.
  • allowResize:boolean - Sets or gets whether the column can be resized.
  • allowSort:boolean - Sets or gets whether the table can be sorted by the column.
  • allowMenu:boolean - Sets or gets whether the column may have a column menu when the 'columnMenu' property of the Table is enabled.
  • allowHide:boolean - Sets or gets whether the column may be hidden with the Table's column menu when the 'columnMenu' property of the Table is enabled.
  • columnGroup:string - Sets or gets the column's column group. Has to correspond to the name field of a column group (TableColumnGroup).
  • dataField:string - Sets or gets the column's data source-bound field.
  • dataType:string - Sets or gets the data type of the column's cells.
  • 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.
  • freeze:string | boolean - Sets or gets whether the column is sticky/frozen. true and 'near' designate freezing on the left side, 'far' - on the right side.
  • 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.
  • label:string - Sets or gets the text displayed in the column's header.
  • map:string - Sets or gets the data field map, when the Table is bound to an Array and dataSourceSettings property is not set.
  • responsivePriority:number | 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.
  • 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).
  • templateElement:string - A string to be parsed into HTML and be used as custom cell content. Applicable only when virtualization is enabled.
  • 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.
  • 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.
  • 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.
  • visible:boolean - Sets or gets whether the column is hidden or not. Hidden columns allow data to be grouped by their corresponding dataField.
  • width:string | number - Sets the width of the column. The width can be entered as a number or string with px.
  • minWidth:number - Sets the minimum width of the column. The width can be entered as a number.
CcolumnSizeMode---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.
CconditionalFormattingDefines 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. Click for more details. Property object's options:
  • column:string - The data field of a numeric column to format. Set 'all' to format all numeric columns.
  • condition:string - The formatting condition.
  • firstValue:number - The value to compare by. When condition is 'between', this is the start (from) value.
  • fontFamily:string - The fontFamily to apply to formatted cells.
  • fontSize:string - The fontSize to apply to formatted cells. The fontSize as set in CSS is used by default.
  • highlight:string - The background color to apply to formatted cells.
  • secondValue:number - When condition is 'between', this is the end (to) value. Otherwise, this value is not used.
  • text:string - The text color to apply to formatted cells.
CconditionalFormattingButtonControls 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.
DdataRowIdWhen 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.
DdataSourceSpecifies 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/
DdataSourceSettingsConfigures 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. Click for more details. Property object's options:
  • autoGenerateColumns:boolean - Sets or gets whether a column will be auto-generated.
  • childrenDataField:string - 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.
  • root:string - Sets or gets the XML binding root.
  • sanitizeHTML:string - 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.
  • sanitizeHTMLRender:string - Determines whether cell values will display the espaced values as text or html.
  • record:string - Sets or gets the XML binding record.
  • groupBy:string[] - Sets or gets the data fields to group by.
  • 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']
    • Property object's options:
    • name:string - Sets the dataField name.
    • map:string - Sets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.
    • dataType:string - Sets the dataField type.
  • dataSourceType:string - Sets or gets whether the data source type.
  • id:string - Sets or gets the dataAdapter's id
  • keyDataField:string - 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'
  • parentDataField:string - 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'
  • mapChar:string - Sets the 'mapChar' data field of the record
  • virtualDataSource:any - 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.
  • virtualDataSourceOnExpand:any - 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
DdataTransformA 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.
DdeferredScrollDelayThis 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.
DdisabledPrevents 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.
EeditingDetermines 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.
EeditModeEnables 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.
EexpandHierarchyDetermines 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.
FfilteringControls 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.
FfilterOperatorGets 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.
FfilterRowDetermines 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.
FfilterTemplateGets 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.
FfooterRowSpecifies 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.
FformulasEnables 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.
FfreezeFooterDefines 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.
FfreezeHeaderSets 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.
GgroupFormatFunctionA 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.
GgroupingConfigures 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.
HheaderRowEnhances 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.
HhideSelectionColumnControls 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.
KkeyboardNavigationControls 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.
LloadColumnStateBehaviorDefines 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.
LlocaleSpecifies 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 map from messages are active.
MmessagesDefines 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.
OonCellRenderA 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.
OonColumnRenderA 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.
OonFilterRowInputDefines 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.
OonInitA 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.
OonLoadA 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.
OonUpdateCompleteA 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.
PpageIndexGets 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.
PpageSizeSpecifies 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.
PpagingDetermines 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.
RrightToLeftSpecifies 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.
RrowDetailTemplateDefines 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.
SselectedGets 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.
SselectionControls 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.
SselectionByHierarchyControls 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.
SselectionModeDefines 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).
SsortCallback 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:
    dataSource: The table's current data source (array of data objects) that will be sorted. sortColumns: An array of column field names representing the columns to sort by, in order of sorting priority. directions: An array of sort directions ('asc' or 'desc'), where each direction corresponds to the order of sortColumns. 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.
Use this callback to implement custom multi-column sorting logic, integrate external sorting systems, or modify data presentation dynamically based on user actions.
SsortModeSpecifies 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.
SstateSettingsSpecifies 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. Click for more details. Property object's options:
    TthemeSpecifies 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.
    TtooltipDetermines 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.
    UunlockKeyDefines 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.
    VvirtualizationControls 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.
    columnGroups.label
    columnGroups.name
    columnGroups.parentGroup
    columns.allowEdit
    columns.allowFilter
    columns.allowGroup
    columns.allowHide
    columns.allowMenu
    columns.allowResize
    columns.allowSort
    columns.columnGroup
    columns.dataField
    columns.dataType
    columns.editor
    columns.formatFunction
    columns.freeze
    columns.label
    columns.map
    columns.minWidth
    columns.responsivePriority
    columns.sort
    columns.templateElement
    columns.templateElementSettings
    columns.transform
    columns.validation
    columns.visible
    columns.width
    conditionalFormatting.column
    conditionalFormatting.condition
    conditionalFormatting.firstValue
    conditionalFormatting.fontFamily
    conditionalFormatting.fontSize
    conditionalFormatting.highlight
    conditionalFormatting.secondValue
    conditionalFormatting.text
    dataSourceSettings.autoGenerateColumns
    dataSourceSettings.childrenDataField
    dataSourceSettings.dataFields
    dataSourceSettings.dataSourceType
    dataSourceSettings.groupBy
    dataSourceSettings.id
    dataSourceSettings.keyDataField
    dataSourceSettings.mapChar
    dataSourceSettings.parentDataField
    dataSourceSettings.record
    dataSourceSettings.root
    dataSourceSettings.sanitizeHTML
    dataSourceSettings.sanitizeHTMLRender
    dataSourceSettings.virtualDataSource
    dataSourceSettings.virtualDataSourceOnExpand
    dataSourceSettings.dataFields.dataType
    dataSourceSettings.dataFields.map
    dataSourceSettings.dataFields.name

    Events

    CcellBeginEditThis 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.
    CcellClickThis 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.
    CcellEndEditThis 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.
    CchangeThis 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.
    CcloseColumnMenuThis 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.
    CcollapseThis 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.
    CcolumnClickThis 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.
    CcolumnResizeThis 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.
    EexpandThis 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.
    FfilterThis 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.
    GgroupThis 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.
    OopenColumnMenuThis 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.
    PpageThis 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.
    RrowBeginEditThis 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.
    RrowEndEditThis 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.
    SsortThis 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.

    Methods

    AaddFilterAdds 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.
    AaddGroupGroups 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.
    AaddRowInserts 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.
    BbeginEditInitiates 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.
    BbeginUpdateInitiates 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.
    CcancelEditTerminates 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.
    CclearFiltersRemoves all currently applied filters from the data set or view, restoring the original unfiltered state.
    CclearGroupingRemoves any currently applied grouping from the data set, restoring the original ungrouped view.
    CclearSelectionRemoves any currently selected items, resetting the selection state to none.
    CclearSortRemoves 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.
    CcollapseAllGroupsCollapses 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.
    CcollapseAllRowDetailsCollapses 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.
    CcollapseAllRowsCollapses 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.
    CcollapseGroupCollapses 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.
    CcollapseRowCollapses the specified row in tree mode, hiding its child rows and displaying only the parent row.
    DdisableSelectPrevents 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.
    EenableSelectRestores 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.
    EendEditFinalizes 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.
    EendUpdateEnds 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.
    EexpandAllGroupsExpands and displays all group nodes in the tree view, revealing their child items and nested structures.
    EexpandAllRowDetailsDisplays 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.
    EexpandAllRowsExpands all rows in the tree view, revealing every nested child element and displaying the entire hierarchical structure.
    EexpandGroupExpands 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.
    EexpandRowExpands 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.
    EexportDataExports 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.
    GgetColumnPropertyRetrieves 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.
    GgetSelectionReturns 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.
    GgetStateReturns 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.
    GgetValueRetrieves 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.
    IisGroupExpandedDetermines 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.
    LloadStateLoads 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.
    NnavigateToNavigates 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.
    RrefreshUpdates the table by reloading its data and refreshing the displayed content to reflect the latest changes.
    RremoveFilterClears all filters currently applied to the specified column, restoring its original, unfiltered data view.
    RremoveGroupRemoves 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.
    RremoveRowDeletes 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.
    RresetStateResets 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.
    SsaveStatePersists 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.
    SselectAllows the selection of one or more rows from a dataset or table, enabling users to perform actions on multiple rows simultaneously.
    SsetColumnPropertySets 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.
    SsetValueAssigns 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.
    SsortBySorts the Table by a column.
    UunselectDeselects one or more previously selected rows in the dataset or table, removing their active or highlighted state.
    UupdateRowUpdates 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.

    Properties

    autoLoadStateControls 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.boolean

    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.

    Default value

    false
    Try a demo showcasing the autoLoadState property.

    Examples

    Markup and runtime examples for autoLoadState:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    autoSaveStateControls 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.boolean

    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.

    Default value

    false
    Try a demo showcasing the autoSaveState property.

    Examples

    Markup and runtime examples for autoSaveState:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    columnGroupsDefines 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. Click for more details. Property object's options:
      { 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.

      Properties

      labelSets or gets the column group's label that appears in the column header hierarchy.
      nameSets or gets the column group's unique name that is referenced in the columnGroup field of columns (TableColumn).
      parentGroupSets or gets the name of the column group's parent group (also defined in columnGroups).
      Try a demo showcasing the columnGroups property.

      Examples

      Markup and runtime examples for columnGroups:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-table');
el.columnGroups = [{ label: 'User Info', name: 'userInfo' }, { label: 'Product Info', name: 'productInfo', parentGroup: 'purchaseInfo' }, { label: 'Purchase Info', name: 'purchaseInfo' }];

      Read the current value:

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

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

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

      Default value

      ""

      Back to root property: columnGroups

      Try a demo showcasing the label property.

      Read the nested value:

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

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

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

      Default value

      ""

      Back to root property: columnGroups

      Try a demo showcasing the name property.

      Read the nested value:

      const el = document.querySelector('smart-table');
const name = el.columnGroups[0].name;

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

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

      Default value

      "null"

      Back to root property: columnGroups

      Try a demo showcasing the parentGroup property.

      Read the nested value:

      const el = document.querySelector('smart-table');
const parentGroup = el.columnGroups[0].parentGroup;

      columnMenuDefines 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.boolean

      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.

      Default value

      false
      Try a demo showcasing the columnMenu property.

      Examples

      Markup and runtime examples for columnMenu:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      columnMinWidthSpecifies 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.string | 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.

      Default value

      50px
      Try a demo showcasing the columnMinWidth property.

      Examples

      Markup and runtime examples for columnMinWidth:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      columnReorderDetermines 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.boolean

      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.

      Default value

      false
      Try a demo showcasing the columnReorder property.

      Examples

      Markup and runtime examples for columnReorder:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      columnResizeEnables 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.boolean

      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.

      Default value

      false
      Try a demo showcasing the columnResize property.

      Examples

      Markup and runtime examples for columnResize:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      columnResizeFeedbackDetermines 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.boolean

      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.

      Default value

      false
      Try a demo showcasing the columnResizeFeedback property.

      Examples

      Markup and runtime examples for columnResizeFeedback:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      columnResizeNormalizeThis 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.boolean

      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.

      Default value

      false
      Try a demo showcasing the columnResizeNormalize property.

      Examples

      Markup and runtime examples for columnResizeNormalize:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      columnsProvides 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. Click for more details. Property object's options:
        string[] | { 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.

        Properties

        allowEditSets or gets whether the column's cells can be edited.
        allowFilterSets or gets whether the column can be filtered.
        allowGroupSets or gets whether the table can be grouped by the column.
        allowResizeSets or gets whether the column can be resized.
        allowSortSets or gets whether the table can be sorted by the column.
        allowMenuSets or gets whether the column may have a column menu when the 'columnMenu' property of the Table is enabled.
        allowHideSets or gets whether the column may be hidden with the Table's column menu when the 'columnMenu' property of the Table is enabled.
        columnGroupSets or gets the column's column group. Has to correspond to the name field of a column group (TableColumnGroup).
        dataFieldSets or gets the column's data source-bound field.
        dataTypeSets or gets the data type of the column's cells.
        editorAn 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.
        freezeSets or gets whether the column is sticky/frozen. true and 'near' designate freezing on the left side, 'far' - on the right side.
        formatFunctionA callback function that can be used to modify the contents of a cell and the cell itself.
        labelSets or gets the text displayed in the column's header.
        mapSets or gets the data field map, when the Table is bound to an Array and dataSourceSettings property is not set.
        responsivePrioritySets 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.
        sortUse 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).
        templateElementA string to be parsed into HTML and be used as custom cell content. Applicable only when virtualization is enabled.
        templateElementSettingsA 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.
        transformA 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.
        validationA 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.
        visibleSets or gets whether the column is hidden or not. Hidden columns allow data to be grouped by their corresponding dataField.
        widthSets the width of the column. The width can be entered as a number or string with px.
        minWidthSets the minimum width of the column. The width can be entered as a number.
        Try a demo showcasing the columns property.

        Examples

        Markup and runtime examples for columns:

        HTML:

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

        Vanilla JS — prefer #id if multiple widgets exist on the page:

        const el = document.querySelector('smart-table');
el.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' }] }];

        Read the current value:

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

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

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

        Default value

        true

        Back to root property: columns

        Try a demo showcasing the allowEdit property.

        Read the nested value:

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

        allowFilterSets or gets whether the column can be filtered.boolean

        Sets or gets whether the column can be filtered.

        Default value

        true

        Back to root property: columns

        Try a demo showcasing the allowFilter property.

        Read the nested value:

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

        allowGroupSets or gets whether the table can be grouped by the column.boolean

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

        Default value

        true

        Back to root property: columns

        Try a demo showcasing the allowGroup property.

        Read the nested value:

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

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

        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

        Back to root property: columns

        Try a demo showcasing the allowHide property.

        Read the nested value:

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

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

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

        Default value

        true

        Back to root property: columns

        Try a demo showcasing the allowMenu property.

        Read the nested value:

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

        allowResizeSets or gets whether the column can be resized.boolean

        Sets or gets whether the column can be resized.

        Default value

        true

        Back to root property: columns

        Try a demo showcasing the allowResize property.

        Read the nested value:

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

        allowSortSets or gets whether the table can be sorted by the column.boolean

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

        Default value

        true

        Back to root property: columns

        Try a demo showcasing the allowSort property.

        Read the nested value:

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

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

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

        Default value

        "null"

        Back to root property: columns

        Try a demo showcasing the columnGroup property.

        Read the nested value:

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

        dataFieldSets or gets the column's data source-bound field.string

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

        Default value

        ""

        Back to root property: columns

        Try a demo showcasing the dataField property.

        Read the nested value:

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

        dataTypeSets or gets the data type of the column's cells."boolean" | "date" | "number" | "string" | "any"

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

        Default value

        "string"

        Back to root property: columns

        Try a demo showcasing the dataType property.

        Read the nested value:

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

        editorAn 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.{ 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.

        Back to root property: columns

        Try a demo showcasing the editor property.

        Read the nested value:

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

        formatFunctionA callback function that can be used to modify the contents of a cell and the cell itself.{ (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.

        Back to root property: columns

        Try a demo showcasing the formatFunction property.

        Read the nested value:

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

        freezeSets or gets whether the column is sticky/frozen. true and 'near' designate freezing on the left side, 'far' - on the right side."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.

        Back to root property: columns

        Try a demo showcasing the freeze property.

        Read the nested value:

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

        labelSets or gets the text displayed in the column's header.string

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

        Default value

        ""

        Back to root property: columns

        Try a demo showcasing the label property.

        Read the nested value:

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

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

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

        Default value

        ""

        Back to root property: columns

        Try a demo showcasing the map property.

        Read the nested value:

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

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

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

        Back to root property: columns

        Try a demo showcasing the minWidth property.

        Read the nested value:

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

        responsivePrioritySets 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.number | 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.

        Back to root property: columns

        Try a demo showcasing the responsivePriority property.

        Read the nested value:

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

        sortUse 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).{ (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).

        Back to root property: columns

        Try a demo showcasing the sort property.

        Read the nested value:

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

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

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

        Default value

        "null"

        Back to root property: columns

        Try a demo showcasing the templateElement property.

        Read the nested value:

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

        templateElementSettingsA 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.{ (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.

        Back to root property: columns

        Try a demo showcasing the templateElementSettings property.

        Read the nested value:

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

        transformA 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.{ (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.

        Back to root property: columns

        Try a demo showcasing the transform property.

        Read the nested value:

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

        validationA 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.{ (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.

        Back to root property: columns

        Try a demo showcasing the validation property.

        Read the nested value:

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

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

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

        Default value

        true

        Back to root property: columns

        Try a demo showcasing the visible property.

        Read the nested value:

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

        widthSets the width of the column. The width can be entered as a number or string with px.string | number

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

        Back to root property: columns

        Try a demo showcasing the width property.

        Read the nested value:

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

        columnSizeMode---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."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.

        Default value

        "default"
        Try a demo showcasing the columnSizeMode property.

        Examples

        Markup and runtime examples for columnSizeMode:

        HTML:

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

        Vanilla JS — prefer #id if multiple widgets exist on the page:

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

        Read the current value:

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

        conditionalFormattingDefines 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. Click for more details. Property object's options:
          { 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.

          Properties

          columnThe data field of a numeric column to format. Set 'all' to format all numeric columns.
          conditionThe formatting condition.
          firstValueThe value to compare by. When condition is 'between', this is the start (from) value.
          fontFamilyThe fontFamily to apply to formatted cells.
          fontSizeThe fontSize to apply to formatted cells. The fontSize as set in CSS is used by default.
          highlightThe background color to apply to formatted cells.
          secondValueWhen condition is 'between', this is the end (to) value. Otherwise, this value is not used.
          textThe text color to apply to formatted cells.
          Try a demo showcasing the conditionalFormatting property.

          Examples

          Markup and runtime examples for conditionalFormatting:

          HTML:

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

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-table');
el.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' }];

          Read the current value:

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

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

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

          Default value

          "all"

          Back to root property: conditionalFormatting

          Try a demo showcasing the column property.

          Read the nested value:

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

          conditionThe formatting condition."between" | "equal" | "greaterThan" | "lessThan" | "notEqual"

          The formatting condition.

          Default value

          "lessThan"

          Back to root property: conditionalFormatting

          Try a demo showcasing the condition property.

          Read the nested value:

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

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

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

          Default value

          0

          Back to root property: conditionalFormatting

          Try a demo showcasing the firstValue property.

          Read the nested value:

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

          fontFamilyThe fontFamily to apply to formatted cells."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"

          Back to root property: conditionalFormatting

          Try a demo showcasing the fontFamily property.

          Read the nested value:

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

          fontSizeThe fontSize to apply to formatted cells. The fontSize as set in CSS is used by default."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"

          Back to root property: conditionalFormatting

          Try a demo showcasing the fontSize property.

          Read the nested value:

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

          highlightThe background color to apply to formatted cells.string

          The background color to apply to formatted cells.

          Default value

          "The default backgroundColor as set in CSS"

          Back to root property: conditionalFormatting

          Try a demo showcasing the highlight property.

          Read the nested value:

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

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

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

          Default value

          1

          Back to root property: conditionalFormatting

          Try a demo showcasing the secondValue property.

          Read the nested value:

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

          textThe text color to apply to formatted cells.string

          The text color to apply to formatted cells.

          Default value

          "The default color as set in CSS"

          Back to root property: conditionalFormatting

          Try a demo showcasing the text property.

          Read the nested value:

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

          conditionalFormattingButtonControls 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.boolean

          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.

          Default value

          false
          Try a demo showcasing the conditionalFormattingButton property.

          Examples

          Markup and runtime examples for conditionalFormattingButton:

          HTML attribute:

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

          Vanilla JS — prefer #id if multiple widgets exist on the page:

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

          Read the current value:

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

          dataRowIdWhen 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.string

          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.

          Default value

          "null"
          Try a demo showcasing the dataRowId property.

          Examples

          Markup and runtime examples for dataRowId:

          HTML:

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

          Vanilla JS — prefer #id if multiple widgets exist on the page:

          const el = document.querySelector('smart-table');
el.dataRowId = "uid";

          Read the current value:

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

          dataSourceSpecifies 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/any

          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/

          Default value

          ""
          Try a demo showcasing the dataSource property.

          dataSourceSettingsConfigures 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. Click for more details. Property object's options:
             object

            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.

            Properties

            autoGenerateColumnsSets or gets whether a column will be auto-generated.
            childrenDataFieldSets 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.
            rootSets or gets the XML binding root.
            sanitizeHTMLSets 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.
            sanitizeHTMLRenderDetermines whether cell values will display the espaced values as text or html.
            recordSets or gets the XML binding record.
            groupBySets or gets the data fields to group by.
            dataFieldsSets or gets the data fields which decribe the loaded data and data type. Ex: ['id: number', 'firstName: string', 'lastName: string'] Click for more details. Property object's options:
            • name:string - Sets the dataField name.
            • map:string - Sets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.
            • dataType:string - Sets the dataField type.
            dataSourceTypeSets or gets whether the data source type.
            idSets or gets the dataAdapter's id
            keyDataFieldSets 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'
            parentDataFieldSets 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'
            mapCharSets the 'mapChar' data field of the record
            virtualDataSourceSets the virtual data source function which is called each time the Grid requests data. Demos using 'virtualDataSource' are available on the Grid demos page.
            virtualDataSourceOnExpandSets 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
            Try a demo showcasing the dataSourceSettings property.

            autoGenerateColumnsSets or gets whether a column will be auto-generated.boolean

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

            Default value

            false

            Back to root property: dataSourceSettings

            Try a demo showcasing the autoGenerateColumns property.

            Examples

            Set a nested field on the element:

            const el = document.querySelector('smart-table');
el.dataSourceSettings[0].autoGenerateColumns = false;

            Read the nested value:

            const el = document.querySelector('smart-table');
const autoGenerateColumns = el.dataSourceSettings[0].autoGenerateColumns;

            childrenDataFieldSets 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.string

            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

            ""

            Back to root property: dataSourceSettings

            Examples

            Set a nested field on the element:

            const el = document.querySelector('smart-table');
el.dataSourceSettings[0].childrenDataField = "children";

            Read the nested value:

            const el = document.querySelector('smart-table');
const childrenDataField = el.dataSourceSettings[0].childrenDataField;

            dataFieldsSets or gets the data fields which decribe the loaded data and data type. Ex: ['id: number', 'firstName: string', 'lastName: string'] Click for more details. Property object's options:
              {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

              dataTypeSets the dataField type.
              mapSets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.
              nameSets the dataField name.

              Back to root property: dataSourceSettings

              Try a demo showcasing the dataFields property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-table');
el.dataSourceSettings[0].dataFields = [id: number];

              Read the nested value:

              const el = document.querySelector('smart-table');
const dataFields = el.dataSourceSettings[0].dataFields;

              dataTypeSets the dataField type."string" | "date" | "boolean" | "number" | "array" | "any"

              Sets the dataField type.

              Default value

              "string"

              Back to root property: dataSourceSettings

              Try a demo showcasing the dataType property.

              Read the nested value:

              const el = document.querySelector('smart-table');
const dataType = el.dataSourceSettings[0].dataFields[0].dataType;

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

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

              Default value

              ""

              Back to root property: dataSourceSettings

              Try a demo showcasing the map property.

              Read the nested value:

              const el = document.querySelector('smart-table');
const map = el.dataSourceSettings[0].dataFields[0].map;

              nameSets the dataField name.string

              Sets the dataField name.

              Default value

              ""

              Back to root property: dataSourceSettings

              Try a demo showcasing the name property.

              Read the nested value:

              const el = document.querySelector('smart-table');
const name = el.dataSourceSettings[0].dataFields[0].name;

              dataSourceTypeSets or gets whether the data source type."array" | "json" | "xml" | "csv" | "tsv"

              Sets or gets whether the data source type.

              Default value

              "array"

              Back to root property: dataSourceSettings

              Try a demo showcasing the dataSourceType property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-table');
el.dataSourceSettings[0].dataSourceType = "json";

              Read the nested value:

              const el = document.querySelector('smart-table');
const dataSourceType = el.dataSourceSettings[0].dataSourceType;

              groupBySets or gets the data fields to group by.string[]

              Sets or gets the data fields to group by.

              Default value

              []

              Back to root property: dataSourceSettings

              Try a demo showcasing the groupBy property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-table');
el.dataSourceSettings[0].groupBy = true;

              Read the nested value:

              const el = document.querySelector('smart-table');
const groupBy = el.dataSourceSettings[0].groupBy;

              idSets or gets the dataAdapter's idstring

              Sets or gets the dataAdapter's id

              Default value

              ""

              Back to root property: dataSourceSettings

              Try a demo showcasing the id property.

              Read the nested value:

              const el = document.querySelector('smart-table');
const id = el.dataSourceSettings[0].id;

              keyDataFieldSets 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'string

              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

              ""

              Back to root property: dataSourceSettings

              Try a demo showcasing the keyDataField property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-table');
el.dataSourceSettings[0].keyDataField = "uid";

              Read the nested value:

              const el = document.querySelector('smart-table');
const keyDataField = el.dataSourceSettings[0].keyDataField;

              mapCharSets the 'mapChar' data field of the recordstring

              Sets the 'mapChar' data field of the record

              Default value

              "."

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-table');
el.dataSourceSettings[0].mapChar = "uid";

              Read the nested value:

              const el = document.querySelector('smart-table');
const mapChar = el.dataSourceSettings[0].mapChar;

              parentDataFieldSets 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'string

              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

              ""

              Back to root property: dataSourceSettings

              Try a demo showcasing the parentDataField property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-table');
el.dataSourceSettings[0].parentDataField = "uid";

              Read the nested value:

              const el = document.querySelector('smart-table');
const parentDataField = el.dataSourceSettings[0].parentDataField;

              recordSets or gets the XML binding record.string

              Sets or gets the XML binding record.

              Default value

              ""

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-table');
el.dataSourceSettings[0].record = "children";

              Read the nested value:

              const el = document.querySelector('smart-table');
const record = el.dataSourceSettings[0].record;

              rootSets or gets the XML binding root.string

              Sets or gets the XML binding root.

              Default value

              ""

              Back to root property: dataSourceSettings

              Try a demo showcasing the root property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-table');
el.dataSourceSettings[0].root = "children";

              Read the nested value:

              const el = document.querySelector('smart-table');
const root = el.dataSourceSettings[0].root;

              sanitizeHTMLSets 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."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"

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-table');
el.dataSourceSettings[0].sanitizeHTML = "blackList";

              Read the nested value:

              const el = document.querySelector('smart-table');
const sanitizeHTML = el.dataSourceSettings[0].sanitizeHTML;

              sanitizeHTMLRenderDetermines whether cell values will display the espaced values as text or html."text" | "html"

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

              Default value

              "text"

              Back to root property: dataSourceSettings

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-table');
el.dataSourceSettings[0].sanitizeHTMLRender = "html";

              Read the nested value:

              const el = document.querySelector('smart-table');
const sanitizeHTMLRender = el.dataSourceSettings[0].sanitizeHTMLRender;

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

              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.

              Back to root property: dataSourceSettings

              Try a demo showcasing the virtualDataSource property.

              Read the nested value:

              const el = document.querySelector('smart-table');
const virtualDataSource = el.dataSourceSettings[0].virtualDataSource;

              virtualDataSourceOnExpandSets 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, tooany

              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

              Back to root property: dataSourceSettings

              Try a demo showcasing the virtualDataSourceOnExpand property.

              Read the nested value:

              const el = document.querySelector('smart-table');
const virtualDataSourceOnExpand = el.dataSourceSettings[0].virtualDataSourceOnExpand;

              dataTransformA 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.{ (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.

              Examples

              Markup and runtime examples for dataTransform:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              deferredScrollDelayThis 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.number

              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.

              Default value

              1

              Examples

              Markup and runtime examples for deferredScrollDelay:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              disabledPrevents 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the disabled property.

              Examples

              Markup and runtime examples for disabled:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              editingDetermines 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the editing property.

              Examples

              Markup and runtime examples for editing:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              editModeEnables 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."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.

              Default value

              "cell"
              Try a demo showcasing the editMode property.

              Examples

              Markup and runtime examples for editMode:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              expandHierarchyDetermines 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the expandHierarchy property.

              Examples

              Markup and runtime examples for expandHierarchy:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              filteringControls 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the filtering property.

              Examples

              Markup and runtime examples for filtering:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              filterOperatorGets 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.boolean

              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.

              Default value

              and
              Try a demo showcasing the filterOperator property.

              Examples

              Markup and runtime examples for filterOperator:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              filterRowDetermines 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the filterRow property.

              Examples

              Markup and runtime examples for filterRow:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              filterTemplateGets 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.string

              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.

              Default value

              "null"
              Try a demo showcasing the filterTemplate property.

              Examples

              Markup and runtime examples for filterTemplate:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              footerRowSpecifies 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.string

              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.

              Default value

              "null"
              Try a demo showcasing the footerRow property.

              Examples

              Markup and runtime examples for footerRow:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              formulasEnables 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the formulas property.

              Examples

              Markup and runtime examples for formulas:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              freezeFooterDefines 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the freezeFooter property.

              Examples

              Markup and runtime examples for freezeFooter:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              freezeHeaderSets 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the freezeHeader property.

              Examples

              Markup and runtime examples for freezeHeader:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              groupFormatFunctionA 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.{ (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.

              Try a demo showcasing the groupFormatFunction property.

              groupingConfigures 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the grouping property.

              Examples

              Markup and runtime examples for grouping:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              headerRowEnhances 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.string | 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.

              Try a demo showcasing the headerRow property.

              Examples

              Markup and runtime examples for headerRow:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-table');
el.headerRow = "function (header) { header.classList.add('custom-style-header'); }";

              Read the current value:

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

              hideSelectionColumnControls 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the hideSelectionColumn property.

              Examples

              Markup and runtime examples for hideSelectionColumn:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              keyboardNavigationControls 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the keyboardNavigation property.

              Examples

              Markup and runtime examples for keyboardNavigation:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              loadColumnStateBehaviorDefines 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."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.

              Default value

              "implementationOnly"
              Try a demo showcasing the loadColumnStateBehavior property.

              Examples

              Markup and runtime examples for loadColumnStateBehavior:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-table');
el.loadColumnStateBehavior = "stateOnly";

              Read the current value:

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

              localeSpecifies 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 map from messages are active.string

              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 map from messages are active.

              Default value

              "en"
              Try a demo showcasing the locale property.

              Examples

              Markup and runtime examples for locale:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              messagesDefines 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.object

              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.

              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.

              Examples

              Markup and runtime examples for messages:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-table');
el.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"}};

              Read the current value:

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

              onCellRenderA 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.{ (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.

              Examples

              Markup and runtime examples for onCellRender:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              onColumnRenderA 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.{ (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.

              Try a demo showcasing the onColumnRender property.

              Examples

              Markup and runtime examples for onColumnRender:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              onFilterRowInputDefines 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.any

              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.

              Try a demo showcasing the onFilterRowInput property.

              onInitA 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.{ (): 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.

              Examples

              Markup and runtime examples for onInit:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              onLoadA 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.{ (): 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.

              Try a demo showcasing the onLoad property.

              onUpdateCompleteA 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.{ (): 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.

              pageIndexGets 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.number

              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.

              Default value

              0
              Try a demo showcasing the pageIndex property.

              Examples

              Markup and runtime examples for pageIndex:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              pageSizeSpecifies 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.number

              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.

              Default value

              10
              Try a demo showcasing the pageSize property.

              Examples

              Markup and runtime examples for pageSize:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              pagingDetermines 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the paging property.

              Examples

              Markup and runtime examples for paging:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              rightToLeftSpecifies 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the rightToLeft property.

              Examples

              Markup and runtime examples for rightToLeft:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              rowDetailTemplateDefines 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.string

              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.

              Default value

              "null"
              Try a demo showcasing the rowDetailTemplate property.

              Examples

              Markup and runtime examples for rowDetailTemplate:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              selectedGets 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. []

              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.

              Try a demo showcasing the selected property.

              Examples

              Markup and runtime examples for selected:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

              const el = document.querySelector('smart-table');
el.selected = [0];

              Read the current value:

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

              selectionControls 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.boolean

              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.

              Default value

              false
              Try a demo showcasing the selection property.

              Examples

              Markup and runtime examples for selection:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              selectionByHierarchyControls 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.boolean

              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.

              Default value

              true
              Try a demo showcasing the selectionByHierarchy property.

              Examples

              Markup and runtime examples for selectionByHierarchy:

              HTML attribute:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              selectionModeDefines 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)."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.

              Default value

              "many"
              Try a demo showcasing the selectionMode property.

              Examples

              Markup and runtime examples for selectionMode:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              sortCallback 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:
                dataSource: The table's current data source (array of data objects) that will be sorted. sortColumns: An array of column field names representing the columns to sort by, in order of sorting priority. directions: An array of sort directions ('asc' or 'desc'), where each direction corresponds to the order of sortColumns. 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.
              Use this callback to implement custom multi-column sorting logic, integrate external sorting systems, or modify data presentation dynamically based on user actions.              { (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:



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


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


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


                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.



              Use this callback to implement custom multi-column sorting logic, integrate external sorting systems, or modify data presentation dynamically based on user actions.

              Try a demo showcasing the sort property.

              Examples

              Markup and runtime examples for sort:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              sortModeSpecifies 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."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.

              Default value

              "none"
              Try a demo showcasing the sortMode property.

              Examples

              Markup and runtime examples for sortMode:

              HTML:

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

              Vanilla JS — prefer #id if multiple widgets exist on the page:

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

              Read the current value:

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

              stateSettingsSpecifies 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. Click for more details. Property object's options:
                string[]

                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.

                Try a demo showcasing the stateSettings property.

                Examples

                Markup and runtime examples for stateSettings:

                HTML:

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

                Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                Read the current value:

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

                themeSpecifies 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.string

                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.

                Default value

                ""

                Examples

                Markup and runtime examples for theme:

                HTML:

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

                Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                Read the current value:

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

                tooltipDetermines 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.boolean

                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.

                Default value

                false
                Try a demo showcasing the tooltip property.

                Examples

                Markup and runtime examples for tooltip:

                HTML attribute:

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

                Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                Read the current value:

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

                unlockKeyDefines 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.string

                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.

                Default value

                ""

                Examples

                Markup and runtime examples for unlockKey:

                HTML:

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

                Vanilla JS — prefer #id if multiple widgets exist on the page:

                const el = document.querySelector('smart-table');
el.unlockKey = "1111-2222-3333-4444-5555";

                Read the current value:

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

                virtualizationControls 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.boolean

                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.

                Default value

                false
                Try a demo showcasing the virtualization property.

                Examples

                Markup and runtime examples for virtualization:

                HTML attribute:

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

                Vanilla JS — prefer #id if multiple widgets exist on the page:

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

                Read the current value:

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

                Events

                cellBeginEditThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the cellBeginEdit event.

                Examples

                Listen for cellBeginEdit using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                cellClickThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the cellClick event.

                Examples

                Listen for cellClick using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

                document.querySelector('smart-table')?.addEventListener('cellClick', (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.
})

                cellEndEditThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the cellEndEdit event.

                Examples

                Listen for cellEndEdit using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                changeThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the change event.

                Examples

                Listen for change using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                closeColumnMenuThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the closeColumnMenu event.

                Examples

                Listen for closeColumnMenu using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                collapseThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the collapse event.

                Examples

                Listen for collapse using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                columnClickThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the columnClick event.

                Examples

                Listen for columnClick using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                columnResizeThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the columnResize event.

                Examples

                Listen for columnResize using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                expandThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the expand event.

                Examples

                Listen for expand using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                filterThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the filter event.

                Examples

                Listen for filter using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                groupThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the group event.

                Examples

                Listen for group using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                openColumnMenuThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the openColumnMenu event.

                Examples

                Listen for openColumnMenu using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                pageThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the page event.

                Examples

                Listen for page using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                rowBeginEditThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the rowBeginEdit event.

                Examples

                Listen for rowBeginEdit using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                rowEndEditThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the rowEndEdit event.

                Examples

                Listen for rowEndEdit using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

                sortThis 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.CustomEvent

                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

                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.

                Try a demo showcasing the sort event.

                Examples

                Listen for sort using the pattern that matches your stack.

                DOM — listen on the custom element (use a specific selector if the page has more than one):

                document.querySelector('smart-table')?.addEventListener('sort', (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

                addFilter( dataField: string, filter: any): voidAdds 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.

                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'

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the addFilter method.

                addGroup( dataField: string): voidGroups 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the addGroup method.

                addRow( data: any): voidInserts 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.

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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the addRow method.

                beginEdit( row: string | number, dataField?: string): voidInitiates 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.

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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the beginEdit method.

                beginUpdate(): voidInitiates 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.beginUpdate();

                cancelEdit(): voidTerminates 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.cancelEdit();

                Try a demo showcasing the cancelEdit method.

                clearFilters(): voidRemoves all currently applied filters from the data set or view, restoring the original unfiltered state.

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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.clearFilters();

                Try a demo showcasing the clearFilters method.

                clearGrouping(): voidRemoves any currently applied grouping from the data set, restoring the original ungrouped view.

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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.clearGrouping();

                Try a demo showcasing the clearGrouping method.

                clearSelection(): voidRemoves any currently selected items, resetting the selection state to none.

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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.clearSelection();

                Try a demo showcasing the clearSelection method.

                clearSort(): voidRemoves 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.clearSort();

                Try a demo showcasing the clearSort method.

                collapseAllGroups(): voidCollapses 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.collapseAllGroups();

                Try a demo showcasing the collapseAllGroups method.

                collapseAllRowDetails(): voidCollapses 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.collapseAllRowDetails();

                Try a demo showcasing the collapseAllRowDetails method.

                collapseAllRows(): voidCollapses 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.collapseAllRows();

                Try a demo showcasing the collapseAllRows method.

                collapseGroup( index: string): voidCollapses 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the collapseGroup method.

                collapseRow( rowId: string | number): voidCollapses the specified row in tree mode, hiding its child rows and displaying only the parent row.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the collapseRow method.

                disableSelect( rowId: string | number | (string | number)[]): voidPrevents 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the disableSelect method.

                enableSelect( rowId: string | number | (string | number)[]): voidRestores 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the enableSelect method.

                endEdit(): voidFinalizes 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.endEdit();

                Try a demo showcasing the endEdit method.

                endUpdate( refresh?: boolean): voidEnds 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.endUpdate();

                expandAllGroups(): voidExpands and displays all group nodes in the tree view, revealing their child items and nested structures.

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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.expandAllGroups();

                Try a demo showcasing the expandAllGroups method.

                expandAllRowDetails(): voidDisplays 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.expandAllRowDetails();

                Try a demo showcasing the expandAllRowDetails method.

                expandAllRows(): voidExpands all rows in the tree view, revealing every nested child element and displaying the entire hierarchical structure.

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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.expandAllRows();

                Try a demo showcasing the expandAllRows method.

                expandGroup( index: string): voidExpands 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the expandGroup method.

                expandRow( rowId: string | number): voidExpands 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the expandRow method.

                exportData( dataFormat: string, fileName?: string, exportFiltered?: boolean, callback?: Function): anyExports 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.

                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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the exportData method.

                getColumnProperty( columnDataField: string, propertyName: string): anyRetrieves 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.

                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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the getColumnProperty method.

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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the getSelection method.

                getState(): objectReturns 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.

                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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the getState method.

                getValue( row: string | number, dataField: string): anyRetrieves 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.

                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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the getValue method.

                isGroupExpanded( index: string): booleanDetermines 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.

                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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the isGroupExpanded method.

                loadState( state?: any): voidLoads 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.loadState();

                Try a demo showcasing the loadState method.

                navigateTo( pageIndex: number): voidNavigates 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.navigateTo();

                Try a demo showcasing the navigateTo method.

                refresh(): voidUpdates the table by reloading its data and refreshing the displayed content to reflect the latest changes.

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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.refresh();

                Try a demo showcasing the refresh method.

                removeFilter( dataField: string): voidClears all filters currently applied to the specified column, restoring its original, unfiltered data view.

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

                Arguments

                dataFieldstring

                The column's data field.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.removeFilter();

                Try a demo showcasing the removeFilter method.

                removeGroup( dataField: string): voidRemoves 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

                document.querySelector('smart-table')?.removeGroup();

                Try a demo showcasing the removeGroup method.

                removeRow( row: string | number): voidDeletes 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the removeRow method.

                resetState(): voidResets 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the resetState method.

                saveState(): objectPersists 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.

                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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the saveState method.

                select( rowId: string | number | (string | number)[]): voidAllows the selection of one or more rows from a dataset or table, enabling users to perform actions on multiple rows simultaneously.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the select method.

                setColumnProperty( columnDataField: string, propertyName: string, propertyValue: any): voidSets 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the setColumnProperty method.

                setValue( row: string | number, dataField: string, value: any): voidAssigns 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.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the setValue method.

                sortBy( columnDataField: string, sortOrder?: string): voidSorts the Table by a column.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the sortBy method.

                unselect( rowId: string | number | (string | number)[]): voidDeselects one or more previously selected rows in the dataset or table, removing their active or highlighted state.

                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.

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the unselect method.

                updateRow( rowId: string | number, data: any): voidUpdates 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.

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

                On the custom element in the DOM (narrow the selector, e.g. to #my-table, if you host multiple widgets):

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

                Try a demo showcasing the updateRow method.

                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