How-To: Create a new Gui table filter type

Edit on GitHub

This article describes how to create a new Gui table filter type.

Prerequisites

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

Adjust GuiTableConfigurationBuilder

Add a new addFilter***() method to Spryker\Shared\GuiTable\Configuration\Builder\GuiTableConfigurationBuilder, where you pass all the required data for a new filter configuration. Define a structure as it will be used by the frontend component (the data will be transformed to arrays and then passed to a frontend as JSON).

    /**
     * @param string $id
     * @param string $title
     *
     * @return $this
     */
    public function addFilterExample(
        string $id,
        string $title
    ) {
        $typeOptionTransfers = (new SelectGuiTableFilterTypeOptionsTransfer());

        $typeOptionTransfers
            ->addValue(
                (new OptionSelectGuiTableFilterTypeOptionsTransfer())
                   ->setValue('value1')
                   ->setTitle('value1title')
            )
            ->addValue(
                 (new OptionSelectGuiTableFilterTypeOptionsTransfer())
                    ->setValue('value2')
                    ->setTitle('value2title')
            );

        $this->filters[] = (new GuiTableFilterTransfer())
            ->setId($id)
            ->setTitle($title)
            ->setType('new-type-name')
            ->setTypeOptions($typeOptionTransfers);

        return $this;
    }

See the Table Filter extension to learn more about the Table Filters feature.