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` `component` `template` `enabled`	Configuration of the drag and drop (DND) plugin for dynamicRows: Link to the DND plugin `.js` file. Link to the DND plugin `.html` template file. Enables or disables DND for dynamicRows	Object String String Boolean	`Magento_Ui/js/dynamic-rows/dnd` `ui/dynamic-rows/cells/dnd` `true`
`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`

Edit this page on GitHub

Give us feedback