Create Gui table column types

Last updated:
Edit on GitHub

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

Prerequisites

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

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;
    }

To learn more about Column Type frontend components, see the Table Column Type Extension