How-To: Extend an existing Gui table

Edit on GitHub

This article describes how to extend an existing Gui table in the Merchant Portal. With this step by step instructions you will learn how to extend a Gui table with a new text column and a new select filter.

Prerequisites

Follow the Marketplace Merchant Portal Core feature integration guide to install the Marketplace Merchant Portal Core feature providing the GuiTable module.

1) Add a new column

Add a new column to the configuration provider:

/**
 * @return \Generated\Shared\Transfer\GuiTableConfigurationTransfer
 */
public function getConfiguration(): GuiTableConfigurationTransfer
{
    //initial configuration

    $guiTableConfigurationBuilder->addColumnText('example_column_key', 'Example Column');

    return $guiTableConfigurationBuilder->createConfiguration();
}

Add a new column to the data provider fetchData() method using a newly introduced column key:

    /**
     * @param \Generated\Shared\Transfer\MerchantProductTableCriteriaTransfer $criteriaTransfer
     *
     * @return \Generated\Shared\Transfer\GuiTableDataResponseTransfer
     */
    protected function fetchData(AbstractTransfer $criteriaTransfer): GuiTableDataResponseTransfer
    {
        //getting data and GuiTableDataResponseTransfer setup

        foreach ($productAbstractCollectionTransfer->getProductAbstracts() as $productAbstractTransfer) {
            $responseData = [
                //initial columns data
                'example_column_key' => 'test data',
            ];

            $guiTableDataResponseTransfer->addRow((new GuiTableRowDataResponseTransfer())->setResponseData($responseData));
        }

        return $guiTableDataResponseTransfer;
    }

2) Add a new filter

Extend the table criteria transfer with a new filter property:

<?xml version="1.0"?>
<transfers xmlns="spryker:transfer-01" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="spryker:transfer-01 http://static.spryker.com/transfer-01.xsd">

    <transfer name="ProductTableCriteria">
        <!--Initial properties-->
        <property name="filterExampleFilter" type="bool"/>
    </transfer>

</transfers>

Generate transfers:

console transfer:generate

Add a new filter to the configuration provider:

/**
 * @return \Generated\Shared\Transfer\GuiTableConfigurationTransfer
 */
public function getConfiguration(): GuiTableConfigurationTransfer
{
    //initial configuration

    $guiTableConfigurationBuilder->addFilterSelect('exampleFilter', 'Example filter', false, [
        '1' => 'Select title 1',
        '0' => 'Select title 2',
    ]);

    return $guiTableConfigurationBuilder->createConfiguration();
}

Adjust the data provider fetchData() method to filter the data by ProductTableCriteria.filterExampleFilter value.