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