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

Testing Hooks

• dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "orders-table" allows test scripts to reliably locate this component.

Technical Documentation for Backend Developers

Getting data

Component support paginable response Endpoint standard for open specification
As mentioned before specific field can be mapped to adjust response (e.g. content → data)

Example:

{ "content": [ { "id": "9f19d7de-d089-46c6-9814-68e8f52b6130", "componentName": null, "contentType": "BOARDLET", "title": "Customer Invoice", "createdBy": "john-doe", "createdOn": "2025-04-10T11:06:56.570787Z" } ], "totalElements": 100, "totalPages": 4, "number": 0, "size": 25, "first": true, "last": false, "empty": false }

Create data

Table is sending to backend object based on configured columns.

Update date (standard way, without dialog)

Table is sending back whole data record which get from backend. Even if for instance id column is not visible table will send whole object with modification.

{ "id": "9f19d7de-d089-46c6-9814-68e8f52b6130", "status": "completed", "completedDate": "2025-04-25T10:00:00Z" }

Delete data

Table is requesting to specific endpoint with data set based on context (in this case table row).