Magento2: Store Configuration Table with multiple fields

Question

How can I get in the Store -> Configuration a multi-field tables whose values are serialized?

Answer 1

The solution can be found in a module in this Github link.

Below you can see how this requirement is created:

You must create the following VendorName/SysConfigTable folders in /app/code/.

You must create the registration.php file in /app/code/VendorName/SysConfigTable

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'VendorName_SysConfigTable',
    __DIR__
);

You must create the module.xml file in /app/code/VendorName/SysConfigTable/etc

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="VendorName_SysConfigTable" setup_version="0.0.1" />
</config>

You must create the composer.json file in /app/code/VendorName/SysConfigTable

{
    "name": "vendorname/sysconfigtable",
    "description": "",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        
        "magento/magento-composer-installer": "*"
    },
    "suggest": {

    },
    "type": "magento2-module",
    "version": "0.0.1",
    "license": [

    ],
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "VendorName\\SysConfigTable\\": ""
        }
    },
    "extra": {
        "map": [
            [
                "*",
                "VendorName/SysConfigTable"
            ]
        ]
    }
}

You must create the system.xml file in /app/code/VendorName/SysConfigTable/etc/adminhtml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="vendorname_general" translate="label" sortOrder="0">
            <label>VendorName</label>
        </tab>
        <section id="vendorname_general_section" translate="label" type="text" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Your Multiple fields</label>
            <tab>vendorname_general</tab>
            <resource>VendorName_Test::vendorname_test_config</resource>
            <group id="general" translate="label"  sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General</label>
                <field id="active" translate="label" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Your Fields</label>
                    <frontend_model>VendorName\SysConfigTable\Block\System\Config\Form\Field\Fields</frontend_model>
                    <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
                </field>
            </group>
        </section>
    </system>
</config>

You must create the Fields.php file in /app/code/VendorName\SysConfigTable\Block\System\Config\Form\Field

<?php   
namespace VendorName\SysConfigTable\Block\System\Config\Form\Field;

use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray;

/**
 * Class Active
 *
 * @package VendorName\SysConfigTable\Block\System\Config\Form\Field
 */
class Fields extends AbstractFieldArray {

    /**
     * @var bool
     */
    protected $_addAfter = TRUE;

    /**
     * @var
     */
    protected $_addButtonLabel;

    /**
     * Construct
     */
    protected function _construct() {
        parent::_construct();
        $this->_addButtonLabel = __('Add');
    }

    /**
     * Prepare to render the columns
     */
    protected function _prepareToRender() {
        $this->addColumn('field_1', ['label' => __('Field 1')]);
        $this->addColumn('field_2', ['label' => __('Field 2')]);
        $this->addColumn('field_3', ['label' => __('Field 3')]);
        $this->addColumn('field_4', ['label' => __('Field 4')]);
        $this->_addAfter       = FALSE;
        $this->_addButtonLabel = __('Add');
    }
}