How-To: Create a new Gui table column type

Edit on GitHub

This article describes how to add new column types to a Gui table.

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 addColumn***() method to Spryker\Shared\GuiTable\Configuration\Builder\GuiTableConfigurationBuilder, in which all the required data for a new column configuration is passed. Define the structure that will be used by the frontend component (the data will be transformed into an array and then passed to the frontend component as JSON).

    /**
     * @api
     *
     * @param string $id
     * @param string $title
     * @param bool $isSortable
     * @param bool $isHideable
     *
     * @return $this
     */
    public function addColumnExample(
        string $id,
        string $title,
        bool $isSortable,
        bool $isHideable
    ) {
        $guiTableColumnConfigurationTransfer = (new GuiTableColumnConfigurationTransfer())
            ->setId($id)
            ->setTitle($title)
            ->setType('example-column-type')
            ->setSortable($isSortable)
            ->setHideable($isHideable);

        $this->addColumn($guiTableColumnConfigurationTransfer);

        return $this;
    }

See the Table Column Type Extension to learn more about Column Type frontend components.