Edit Grid component
| 🌐 This document is available in both English and Ukrainian. Use the language toggle in the top right corner to switch between versions. |
1. Component description
The Edit Grid component is a powerful tool for working with tables in UI forms that enables you to dynamically add, edit, and delete table rows. This component appears as a table with data that users can edit. You can customize each row’s display, validation, and other options.
An extension to the standard Edit Grid component supports additional options that simplify modeling. Regulations developers and modelers can use this component more flexibly and adapt it to the specific needs of various business scenarios.
| Use Edit Grid from the list of Updated components. |
2. Main functions
The Edit Grid component supports many options for interacting with the process forms, organized by tabs.
-
Display
-
Data
-
Validation
-
API
-
Logic
-
Label: Displays a title next to the component.
-
Label Position: Positions the label relative to the component (top, right, left, or bottom).
-
Description: Adds a component description to help users better understand its purpose.
-
Tooltip: Displays a tooltip when hovering over the component.
-
Quick Search: Provides a simple search filter for quickly searching records in a table.
-
Hidden: Hides fields from a user. Hidden fields are passed along with other form data.
-
Multiple-record selection: Enables a user to select several records in a table.
-
Read Only: Shows data via a context menu (three vertical dots) in read-only mode.
-
Redraw On: Redraws the component when another component changes.
-
Clear value when hidden: Clears the value when the field is hidden.
-
Validate On: Determines when this component should trigger client-side validation (
ChangeorBluroptions). -
Required: Indicates fields that must be completed before a form can be submitted.
-
Minimum length: Defines the minimum number of characters a user must enter.
-
Maximum length: Defines the maximum number of characters a user can enter.
-
Custom error message: Specifies an error message to display when form data does not pass validation.
-
Custom validation: Enables custom validation, which enables you to create validation checks specific to your needs.
-
Property name: Names the field for the API endpoint. Must correspond to the table’s name in the registry database—for example,
licenses.
-
Record Actions: Specifies up to 5 actions available for the table records. For example, changing the license expiration date (
Action: _action_update) or canceling a license (Action: _action_cancel).
3. Data format
The Edit Grid component accepts an array of objects. Each object in the array can contain different fields with values. The following example shows a single object with a "textfield" field and a "test" value.
Array<Object>
// Example: [ { textfield: 'test' } ]