Every column in a grid is itself a small UI component: the PHP/XML side supplies raw data, and the column's component attribute decides which JavaScript module turns that raw data into a rendered value. This chapter walks through the most important column types, using Company and rating-like fields as practice examples.

Text column: the default case

Without an explicit component, every column automatically uses Magento_Ui/js/grid/columns/column - plain text. That's already enough for title (see chapter 4).

Date column

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

With dataType set to date, Magento_Ui/js/grid/columns/date automatically formats the value according to the backend locale, and filter set to dateRange switches on a from/to date filter instead of a plain text field.

Select column with options

For values from a fixed option list (for example status), a source model class implementing OptionSourceInterface supplies the available options - the same class can later be reused in the form too (chapter 10):

<?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 column

For image previews (relevant from chapter 16 on, once testimonials get a photo), Magento_Ui/js/grid/columns/thumbnail renders a small preview with a click-to-enlarge behavior:

<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 column

The actions column renders the edit/delete links at the end of the row - each action references a URL that gets filled in with the row's ID:

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

By default, this class generates an "Edit" link pointing to {route}/{controller}/edit/id/{value}. Further actions (delete with a confirmation dialog) require a custom PHP column renderer - exactly what chapter 19 covers in detail, when the testimonial actions column gets its own confirmation dialog.

Column type reference

• Text (default) - no component needed.
• Date - dataType: date, filter dateRange.
• Select - options class implementing OptionSourceInterface, filter select.
• Image - component: Magento_Ui/js/grid/columns/thumbnail.
• Actions - class: Magento\Ui\Component\Listing\Columns\Actions, or a custom column class.