Jede Spalte im Grid ist selbst eine kleine UI-Komponente: Das PHP-XML liefert Rohdaten, das component-Attribut der Spalte entscheidet, welches JavaScript-Modul diese Rohdaten zu einer Darstellung macht. Dieses Kapitel geht die wichtigsten Spaltentypen durch, erweitert um Company und Rating-ähnliche Felder als Übungsbeispiele.

Text-Spalte: der Standardfall

Ohne explizites component nutzt jede Spalte automatisch Magento_Ui/js/grid/columns/column - reinen Text. Das reicht für title bereits aus (siehe Kapitel 4).

Date-Spalte

<column name="created_at" xsi:type="Magento\Ui\Component\Listing\Columns\Column">
    <settings>
        <filter>dateRange</filter>
        <dataType>date</dataType>
        <label translate="true">Created At</label>
    </settings>
</column>

Mit dataType auf date übernimmt Magento_Ui/js/grid/columns/date automatisch die Formatierung nach der Backend-Locale, filter auf dateRange aktiviert einen Von-Bis-Datumsfilter statt eines einfachen Textfelds.

Select-Spalte mit Optionen

Für Werte aus einer festen Optionsliste (zum Beispiel Status) liefert eine Source-Model-Klasse, die OptionSourceInterface implementiert, die verfügbaren Optionen - dieselbe Klasse lässt sich später auch im Formular (Kapitel 10) wiederverwenden:

<?php

declare(strict_types=1);

namespace Mironsoft\Announcement\Model\Source;

use Magento\Framework\Data\OptionSourceInterface;

/**
 * Provides the active/inactive option list for grid filter and form select.
 */
class IsActive implements OptionSourceInterface
{
    /**
     * Returns the option array.
     *
     * @return array<int, array{value: int, label: string}>
     */
    public function toOptionArray(): array
    {
        return [
            ['value' => 1, 'label' => __('Active')],
            ['value' => 0, 'label' => __('Inactive')],
        ];
    }
}

<column name="is_active" xsi:type="Magento\Ui\Component\Listing\Columns\Column">
    <settings>
        <options class="Mironsoft\Announcement\Model\Source\IsActive"/>
        <filter>select</filter>
        <dataType>select</dataType>
        <label translate="true">Status</label>
    </settings>
</column>

Image-Spalte

Für Bild-Vorschauen (relevant ab Kapitel 16, wenn Kundenstimmen ein Foto bekommen) sorgt Magento_Ui/js/grid/columns/thumbnail für eine kleine Vorschau mit Klick-Vergrößerung:

<column name="image" component="Magento_Ui/js/grid/columns/thumbnail">
    <settings>
        <altField>title</altField>
        <has_preview>1</has_preview>
        <label translate="true">Image</label>
        <sortable>false</sortable>
    </settings>
</column>

Actions-Spalte

Die Actions-Spalte rendert die Edit-/Delete-Links am Zeilenende - jede Aktion referenziert eine URL, die mit der ID der Zeile aufgefüllt wird:

<column name="actions" class="Magento\Ui\Component\Listing\Columns\Actions">
    <settings>
        <indexField>announcement_id</indexField>
        <resizeEnabled>false</resizeEnabled>
        <sortable>false</sortable>
    </settings>
</column>

Standardmäßig generiert diese Klasse einen "Edit"-Link auf {route}/{controller}/edit/id/{value}. Weitere Aktionen (Delete mit Bestätigungsdialog) baut ein eigener PHP-Column-Renderer - genau das behandelt Kapitel 19 im Detail, wenn die Testimonial-Actions-Spalte einen eigenen Bestätigungsdialog bekommt.

Spaltentypen-Referenz

• Text (Standard) - kein component nötig.
• Date - dataType: date, Filter dateRange.
• Select - options-Klasse mit OptionSourceInterface, Filter select.
• Image - component: Magento_Ui/js/grid/columns/thumbnail.
• Actions - class: Magento\Ui\Component\Listing\Columns\Actions oder eine eigene Column-Klasse.