Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Table
User Manual for Dynamic Table
General Properties
displayName - Sets the display name of the component shown in the structure panel. For example, "Orders Table" allows for easy identification of the table's purpose in the component structure.
id - Specifies a unique identifier for the component used for programmatic access. For example, "customerOrdersTable" enables targeted manipulation of this specific table.
keyExpr - Defines the field(s) used to uniquely identify rows in the table. For example, setting keyExpr to ["orderId"] ensures each row can be uniquely identified by its order ID.
Visual Properties
height - Sets the height of the table using pixels or percentages. For example, "400px" creates a fixed height table, while "100%" makes it fill its container.
detailsRowEnabled - Activates expandable detail rows for showing additional information. When enabled, rows can be expanded to show more detailed content.
rowDetailsCustomTemplate - Specifies the template content for expanded row details. For example, an order details boardlet could show line items when a row is expanded.
detailsRowHeightInPx - Sets the height of expanded detail rows in pixels. For example, setting to "200" ensures detail rows have adequate space for their content.
allowSearching - Enables the search functionality for the table. When enabled, a search box appears, allowing users to search across all designated searchable columns.
paddingClass - Configures spacing around the table using CSS classes. For example, "p-4" adds medium padding on all sides of the table.
scrollingMode - Determines how the table handles scrolling with options: "virtual" (only renders visible rows), "infinite" (loads more as user scrolls), or "standard". For large datasets, "virtual" significantly improves performance.
columnRenderingMode - Controls how columns are rendered: "virtual" (only renders visible columns) or "standard". For tables with many columns, "virtual" mode improves performance.
autoExpandAll - Automatically expands all grouped rows when enabled. When set to true, all grouped data will be expanded by default when the table loads.
enterKeyAction - Determines the behavior when the Enter key is pressed: "startEdit" (begins editing the cell) or "moveFocus" (moves to the next cell). For data entry tables, "startEdit" is more efficient.
enterKeyDirection - Sets the direction to move after Enter key press: "none", "column" (move down), or "row" (move right). For form-like data entry, "row" provides a natural flow.
editOnkeyPress - Enables cell editing when typing directly on a cell. When enabled, users can begin typing to replace cell content without clicking first.
selectedRowsAccessKey - Defines the key for accessing selected rows in the context. For example, "selectedOrders" allows accessing selected rows through this context key.
selectionMode - Sets row selection behavior: "single" (one row), "multiple" (many rows), or "none" (no selection). For example, "multiple" allows selecting several orders for batch processing.
Header
showHeader - Controls visibility of the table header section. When enabled, displays title, subtitle, and optional toolbar controls.
titleTranslations - Sets the title text displayed above the table, with support for multiple languages. For example, {"en-US": "Customer Orders", "de-DE": "Kundenbestellungen"}.
subtitleTranslations - Sets a secondary text displayed below the title, with language support. For example, {"en-US": "Last 30 days", "de-DE": "Letzten 30 Tage"}.
enableMaximize - Allows the table to be expanded to full screen mode. When enabled, a maximize button appears in the header for better data viewing.
enableColumnChooser - Displays a tool for users to show/hide columns. When enabled, users can customize which columns are visible through a dropdown menu.
allowGrouping - Enables users to group data by columns. When enabled, users can drag column headers to the grouping area to organize data hierarchically.
allowFiltering - Enables column filtering capabilities. When enabled, users can apply filters like "Status equals 'Completed'" to narrow down visible data.
highlightSearchText - Emphasizes search terms within table content. When enabled, any text matching search queries will be visually highlighted for easier identification.
Column
elements - Defines all columns in the table with their individual configurations. This array contains DynamicTableColumnComponent objects with properties like dataField, caption, and visibility.
columnMinWidth - Sets the minimum width in pixels for all columns. For example, setting it to "100" ensures columns never become too narrow to read properly.
columnAutoWidth - Automatically adjusts column widths to fit their content. When enabled, column widths dynamically adapt to their contents.
columnResizingMode - Determines how column resizing affects other columns: "nextColumn" (only adjusts adjacent column) or "widget" (redistributes all columns). For precise control, "nextColumn" is preferred.
saveColumnSettings - Preserves user customizations to column width, order, and visibility between sessions. When enabled, user preferences persist across page refreshes.
fieldsUsedInSearch - Specifies which data fields are included when searching. For example, ["customerName", "orderReference"] limits searches to just these fields.
Datasource
enablePagination - Activates server-side pagination for large datasets. When enabled, data is loaded in pages rather than all at once, improving performance.
pageSize - Sets the number of rows displayed per page. For example, setting to 25 will display 25 records per page when pagination is enabled.
paginationRequestParamsMap - Maps client-side pagination parameters to server-expected parameters. For example, {"page": "pageNumber", "size": "pageLimit"} adapts to server naming conventions.
paginationResponseFieldsMap - Maps server pagination fields to client expectations. For example, {"content": "data", "totalElements": "count"} handles different response structures.
paginationFilterFieldsMap - Maps filter field names for pagination requests. For example, {"value": "filterValue", "key": "filterField"} adapts to server filter naming conventions.
useFiltersInRequestBody - Places filters in the request body instead of URL parameters. When enabled, filter data is sent in the request body, which is better for complex filters.
getEntityCollectionHttpRequestParametersMap - Configures HTTP parameters for data fetching. This object maps additional parameters needed for the data request.
getElementsDataSourceId - Specifies the data source ID for retrieving table data. For example, "api/orders" connects the table to the orders API endpoint.
visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "adminOnlyPolicy" restricts the table to users with admin privileges.
allowAdding - Enables row creation functionality. When enabled, users can add new records to the table through a UI control.
addingType - Determines how new rows are added: "inline" (directly in the table) or "dialog" (in a popup). For complex forms, "dialog" provides more space for data entry.
addingDialog - Configures the dialog used for adding rows. This specifies the content ID for the dialog component to show when adding new records.
createElementDataSourceId - Specifies the data source ID for creating new records. For example, "api/orders/create" would be the endpoint for adding new orders.
createEntityHttpRequestParametersMap - Configures parameters for create requests. This maps table data to the expected format for the creation endpoint.
allowUpdating - Enables row editing functionality. When enabled, users can modify existing row data through inline editing or dialogs.
updatingType - Sets how rows are updated: "inline" (directly in table) or "dialog" (in a popup). For complex forms, "dialog" provides a better editing experience.
updatingDialog - Configures the dialog used for updating rows. This specifies the content ID for the dialog component to show when editing records.
updateElementDataSourceId - Specifies the data source ID for updating records. For example, "api/orders/{id}/update" would be the endpoint for modifying orders.
updateEntityHttpRequestParametersMap - Configures parameters for update requests. This maps table data to the expected format for the update endpoint.
allowDeleting - Enables row deletion functionality. When enabled, users can remove rows from the table through delete buttons or commands.
deleteConfirmation - Requires confirmation before row deletion. When enabled, prompts users with a dialog to confirm before removing data.
removeElementDataSourceId - Specifies the data source ID for deleting records. For example, "api/orders/{id}" would be the endpoint for removing orders.
removeEntityHttpRequestParametersMap - Configures parameters for delete requests. This maps table data to the expected format for the deletion endpoint.
exportToExcelFileName - Sets the default filename for Excel exports. For example, "CustomerOrders_Export" will be the base name when exporting to Excel.
exportToExcelAllRows - Enables exporting all data rows to Excel, even if paginated. When enabled, all data will be exported regardless of current view.
exportToExcelSelectedRows - Enables exporting only selected rows to Excel. When enabled and rows are selected, only those rows will be exported.
exportToExcelVisibleRows - Enables exporting only currently visible rows to Excel. When enabled, only the current view is exported, ideal for filtered data.
showInSubmenu - Shows export options in a dropdown submenu. When enabled, export options appear in a separate dropdown for cleaner interface.
Custom Actions
columnCustomProps - Defines custom action icons displayed for each row. For example, an "email" icon that triggers a contact action for the customer in that row. (if proper flow will be set)
columnOverflowMenus - Configures dropdown menu options for rows. For example, options like "Archive", "Export", or "Flag" that perform specific actions on the row.
Events
- events - Configures the events that the component can trigger and respond to:
- ON_INIT: Triggered when the component is initialized. Can be used to perform setup operations.
- ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations.
- ON_TABLE_ROW_CLICK: Triggered when a row is clicked. Can be used to navigate to detail pages or show additional information.
- ON_TABLE_ROW_EDIT_START: Triggered when row editing begins. Can be used for validation or prefilling related data.
- ON_TABLE_ROW_EDIT_CANCEL: Triggered when row editing is cancelled. Can undo temporary changes or refresh data from server.
- ON_TABLE_ROW_SAVED: Triggered when row changes are successfully saved. Can be used for notifications or follow-up actions.
...
