What Are Dynamic Rows in Magento 2?

Dynamic rows are UI components that store data as collections. They give users the ability to add, edit, and delete multiple records directly in the admin panel. You'll find them useful for settings that need multiple values—shipping methods, price tiers, custom categories, or any repeatable configuration data.

The component supports various field types including text inputs, dropdowns, date pickers, and multiselect options. Data saves to the core_config_data table as serialized arrays.

Core Components Required

Build the System Configuration File

Create system.xml in your module's etc/adminhtml directory. This file structures your configuration settings and tells Magento how to display them.

The frontend_model attribute points to your custom block that renders the interface. The backend_model handles data serialization automatically.

Create the Frontend Model Block

Build a block class that extends AbstractFieldArray. This class defines which columns appear in your dynamic row and manages the interface.

Create Priority.php in Block/Adminhtml/Form/Field/:

Create the Frontend Model Block

Build a block class that extends AbstractFieldArray. This class defines which columns appear in your dynamic row and manages the interface.

Create Priority.php in Block/Adminhtml/Form/Field/:

Build Custom Column Renderers

For dropdown fields, create a custom renderer class. This example creates a category selector:

Create Category.php in Block/Adminhtml/Form/Field/:

<?php

namespace Vendor\Module\Block\Adminhtml\Form\Field;

use Magento\Framework\View\Element\Html\Select;

use Magento\Catalog\Model\ResourceModel\Category\CollectionFactory;

use Magento\Framework\View\Element\Context;

class Category extends Select

{

protected $categoryCollection;

public function __construct(

CollectionFactory $collectionFactory,

Context $context,

array $data = []

) {

$this->categoryCollection = $collectionFactory;

parent::__construct($context, $data);

}

public function setInputName($value)

{

return $this->setName($value);

}

public function setInputId($value)

{

return $this->setId($value);

}

public function _toHtml()

{

if (!$this->getOptions()) {

$this->setOptions($this->getSourceOptions());

}

return parent::_toHtml();

}

private function getSourceOptions()

{

$options = [['label' => __('Select Category'), 'value' => 0]];

$categories = $this->categoryCollection

->create()

->addAttributeToSelect('name')

->addAttributeToSelect('entity_id');

foreach ($categories as $category) {

$options[] = [

'label' => $category->getName(),

'value' => $category->getId()

];

}

return $options;

}

}

Field Types You Can Add

Dynamic rows support multiple field types. Here are common implementations:

Text Input:

Number Input with Validation:

Dropdown/Select:

Date Picker:

Access Configuration Values

Retrieve saved dynamic row data in your code using Magento's scope config:

Common Validation Classes

Add these classes to your column definitions for data validation:

Testing Your Implementation

After creating your files, run these commands:

Navigate to Stores > Configuration > Custom Settings > Dynamic Row Settings in your admin panel. You should see your dynamic row interface with an "Add" button.

Advanced Features

Multiple Column Types in One Row:

You can mix different field types in a single dynamic row. Combine text inputs, dropdowns, and date pickers as needed.

Custom Button Labels:

Disable Row Sorting:

If you don't need drag-and-drop reordering:

Troubleshooting Common Issues

Data Not Saving: Verify your backend_model uses Magento\Config\Model\Config\Backend\Serialized\ArraySerialized.

Dropdown Not Showing Values: Check that your renderer class properly implements getSourceOptions() and returns an array of label-value pairs.

RJavaScript Errors: Clear your browser cache and Magento cache. Ensure is_render_to_js_template is set to true in your renderer.

Empty Values After Save: Add proper validation classes to required fields.

Performance Considerations

For large datasets in dropdowns, consider implementing lazy loading or filtering options. Cache category collections or other resource-intensive queries using Magento's cache system.

Dynamic rows work best for moderate amounts of data (under 100 rows). For larger datasets, consider using a custom grid with AJAX operations.

Conclusion

Dynamic rows give you flexibility in Magento 2 configuration. You create them by defining a system.xml file, building a frontend model block, and optionally adding custom column renderers for dropdowns or special fields. The backend model handles serialization automatically, and you access saved data through Magento's scope configuration system.

FAQs