Extend Gui tables

Edit on GitHub

This document 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

To install the Marketplace Merchant Portal Core feature providing the GuiTable module, follow the Install the Marketplace Merchant Portal Core feature.

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.