DynamicRows component
The DynamicRows component is a dynamic collection of records. The user can edit the records, change their position, and navigate through the collection.
Configuration options
| Option | Description | Type | Default |
|---|---|---|---|
addButton
|
Renders button for adding a new row. | Boolean | |
addButtonLabel
|
Label for the adding a new row button. | String |
'Add'
|
additionalClasses
|
Sets custom classes to the component's DOM block. | Object |
{}
|
defaultRecord
|
Renders the default (first) row when the component is initialized without data. | Boolean |
false
|
deleteProperty
|
The property added to a record data object when the record is
deleted. Applied if the deleteValue option is
enabled.
|
String |
'delete'
|
dndConfig
|
Configuration of the drag and drop (DND) plugin for
dynamicRows:
|
Object
|
|
collapsibleHeader
|
Enables or disables the collapsible functionality for the header (if columns header is enabled). | Boolean |
false
|
columnsHeader
|
Hides or shows columns header. | Boolean |
true
|
columnsHeaderClasses
|
Adds custom class to columns header (if the column header is enabled). | String | '' |
component
|
The path to the component’s JS constructor in terms of RequireJS. | String |
Magento_Ui/js/dynamic-rows/dynamic-rows
|
currentPage
|
Current page. | Number |
1
|
deleteValue
|
Adds the deleteProperty property in the data
object for the deleted record.
|
Boolean |
false
|
disabled
|
Initial component's state. When set to true, users can't
take action on the element.
|
Boolean |
false
|
fallbackResetTpl
|
The path to the fallback reset (restore to default button)
.html template.
|
String |
ui/form/element/helper/fallback-reset-link
|
identificationProperty
|
The identification property added to the record data object. | String |
record_id
|
pageSize
|
The number of records on one page. | Number |
20
|
recordTemplate
|
The path to the .html template of a records(row). The list of templates is declared in the templates
property.
|
String |
record
|
template
|
The path to the component’s .html template.
|
String |
ui/dynamic-rows/templates/default
|
visible
|
Initial component's visibility. When set to false, the
display: none CSS style is added to the
component's DOM block.
|
Boolean |
true
|
