Creating a dynamic table row admin config (system.xml)
This tutorial shows you how to add a new dynamic rows system configuration in the Magento admin, by extending the Magento/Config/Block/System/Config/Form/Field/FieldArray/AbstractFieldArray class.
Step 1: Adding a new system field. At <vendor>/<module>/etc/adminhtml/system.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<section id="general" type="text">
<group id="test_ranges" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Test Ranges</label>
<field id="ranges" translate="label" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Ranges</label>
<frontend_model>Vendor\Module\Block\Adminhtml\System\Config\Form\Field\Range</frontend_model>
<backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
</field>
</group>
</section>
</system>
</config>
As you can see above code adds a new system configuration in STORES > Settings > Configuration > GENERAL > General > Test Ranges.Step 2: Creating the block class to define the custom field columns. At <vendor>/<module>/Block/Adminhtml/System/Config/Form/Field/Range.php
<?php
namespace Vendor\Module\Block\Adminhtml\System\Config\Form\Field;
use Magento\Backend\Block\Template\Context;
use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray;
use Magento\Framework\Data\Form\Element\Factory;
class Range extends AbstractFieldArray
{
/**
* @var Factory
*/
protected $_elementFactory;
/**
* @param Context $context
* @param Factory $elementFactory
* @param array $data
*/
public function __construct(
Context $context,
Factory $elementFactory,
array $data = []
)
{
$this->_elementFactory = $elementFactory;
parent::__construct($context,$data);
}
protected function _construct()
{
$this->addColumn('column1', ['label' => __('Column 1'), 'class' => 'required-entry']);
$this->addColumn('column2', ['label' => __('Column 2'), 'class' => 'required-entry']);
$this->addColumn('column3', ['label' => __('Column 3'), 'class' => 'required-entry']);
$this->_addAfter = false;
$this->_addButtonLabel = __('Add More');
parent::_construct();
}
}
The Above code Block prepares the desired columns for inclusion in the new configuration.
Step 3: Clean Cache
Clean Magento cache by entering to admin area, or with the CLI from the magento root directory using commend below
php bin/magento cache:clean
OR
php bin/magento cache:clean config
Results
The final output of the above code will be as below in the Admin panel.
reference: https://devdocs.magento.com/guides/v2.4/ext-best-practices/tutorials/dynamic-row-system-config.html