(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Files Table

Overview

• The Files Table Component allows users to upload, display, and manage files in forms.
• It provides a table interface for file listings with upload, deletion, and custom actions.
• Pagination is supported for handling large file collections.
• It is useful for document management, attachment handling, or media galleries.

Specs

Tokens

Structure

(Configured in General Properties)

• keyExpr – Defines the field used to uniquely identify rows in the table.

(Configured in Datasource Properties)

• getElementsDataSourceId – Specifies the data source ID for retrieving file listings.
• getEntityCollectionHttpRequestParametersMap – Configures HTTP parameters for fetching file collection data.
• uploadFilesDataSourceId – Specifies the data source ID for uploading files.
• uploadFileHttpRequestParametersMap – Configures HTTP parameters for file upload requests.
• removeFileDataSourceId – Specifies the data source ID for deleting files.
• removeEntityCollectionHttpRequestParametersMap – Configures HTTP parameters for file deletion requests.
• fileNameColumnKeyExpr – Specifies which field contains the file name to display.
• fileNameColumnCaptionTranslations – Sets the column header text for the filename column with language support.

(Configured in Non-Visual Properties)

• dataField – Defines the field name used when submitting form data.
• controlsRequestType – Specifies how the field data is sent in HTTP requests (BODY, HEADER, PATH).

(Configured in Visibility Properties)

• displayConditions – Defines conditions for displaying the component.

Pagination

(Configured in Datasource Properties)

• enablePagination – Activates server-side pagination for large file collections.
• pageSize – Sets the number of files displayed per page.
• paginationRequestParamsMap – Maps client-side pagination parameters to server parameters.
• paginationResponseFieldsMap – Maps server pagination fields to client expectations.

Styling

(Configured in Visual Properties)

• Title – Sets the title text displayed above the files table.
• titleTranslations – Supports multiple languages for the title.
• hidden – Controls whether the component is visible in the form.
• saveInLocalStorage – Determines whether the uploaded files data is preserved in local storage.
• defaultValue – Sets the initial file data when the form is reset.
• paddingClass – Configures spacing around the files table using CSS classes.

Actions & Variants

(Configured in Event Actions Properties)

• events – Configures the events that the component can trigger and respond to:
• ON_VALUE_CHANGE (Events) – Triggered when the list of files changes.
• ON_FILETABLE_UPLOAD_START (Events) – Triggered when a file upload begins.
• ON_FILETABLE_UPLOAD_END (Events) – Triggered when file uploads complete.
• ON_INIT_BASED_ON_USER_VIEW (Events) – Triggered when the component initializes in user view mode.
• ON_INIT (Events) – Triggered when the component is initialized.
• ON_DESTROY (Events) – Triggered when the component is removed from the DOM.

(Configured in Custom Actions Properties)

• columnCustomProps – Defines custom action icons displayed for each row, such as preview or share icons.

(Configured in Visual Properties)

• readonly – Displays files but prevents modifications, making the table view-only.

Authorization

(Configured in Authorization Properties)

• authorizationDisable – Specifies a policy set that determines when the component should be disabled based on user permissions.
• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets.

Testing

(Configured in Testing Hooks Properties)

• id – Specifies a unique identifier for the component used for programmatic access.
• dataTestId – Sets the testing hook ID for automated testing.
• enableAsHotspot – Enables the component as a guided tour hotspot.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations.

Guidelines

(From General UX Concepts – Table Guidelines)

• Table headers should use clear and descriptive labels, aligned with content, and remain visible when scrolling.
• Column sorting should be available where useful, with clear visual cues.
• Filters should be supported for large datasets, placed close to the table, and easy to use.
• Zebra tables should be used to improve readability for dense data.
• Pagination should be preferred over infinite scroll for long lists, with consistent page sizes.
• Responsiveness must be ensured on smaller screens, using horizontal scroll or column reduction if needed.
• Actions such as edit or delete should be placed consistently at the end of rows, with recognizable icons and tooltips.

Accessibility

[NO DATA AVAILABLE]