2

I add custom grid to adminhtml in Magento 2. This is definition of my UI Component

./view/adminhtml/ui_component/my_own_grid.xml

```

...
</p>

    <column name="id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">number</item>
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">ID</item>
            </item>
        </argument>
    </column>

</columns>

```

Where can I find list of available options for column configuration (dataType, filter, label, ...)?

Payal Patel
  • 1,511
  • 1
  • 20
  • 40
Alex Gusev
  • 2,009
  • 3
  • 26
  • 45

1 Answers1

3

You can find definition in the .xsd (XML schema) which usually located for the UI components in vendor/magento/module-ui/view/base/ui_component/etc/definition directory.

vendor/magento/module-ui/etc/ui_configuration.xsd

<xs:complexType name="componentColumnsConfigured">
    <xs:complexContent>
        <xs:extension base="componentColumns">
            <xs:choice minOccurs="0" maxOccurs="unbounded">
                <xs:element ref="column"/>
                <xs:element ref="actionsColumn"/>
                <xs:element ref="selectionsColumn"/>
            </xs:choice>
        </xs:extension>
    </xs:complexContent>
</xs:complexType>

Column itself:

<xs:element name="column" type="componentColumn">
    <xs:annotation>
        <xs:documentation>
            The Column component is a collection of columns and it provides an interface for such actions
            as showing and hiding columns.
        </xs:documentation>
    </xs:annotation>
</xs:element>

Column component (componentColumn):

vendor/magento/module-ui/view/base/ui_component/etc/definition/column.xsd

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
    <!-- Include section -->
    <xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/ui_component.xsd"/>

    <xs:complexType name="componentColumn">
        <xs:sequence>
            <xs:group ref="configurable" minOccurs="0" maxOccurs="unbounded"/>
            <xs:element name="settings" minOccurs="0" maxOccurs="1">
                <xs:complexType>
                    <xs:choice minOccurs="0" maxOccurs="unbounded">
                        <xs:group ref="componentColumnSettings"/>
                    </xs:choice>
                </xs:complexType>
            </xs:element>
        </xs:sequence>
        <xs:attributeGroup ref="ui_element_attributes"/>
    </xs:complexType>

    <xs:group name="componentColumnSettings">
        <xs:choice>
            <xs:group ref="uiElementSettings"/>
            <xs:element ref="draggable"/>
            <xs:element ref="sorting"/>
            <xs:element ref="sortable"/>
            <xs:element ref="controlVisibility"/>
            <xs:element ref="bodyTmpl"/>
            <xs:element ref="headerTmpl"/>
            <xs:element ref="label">
                <xs:annotation>
                    <xs:documentation>
                        The column label displayed in the header.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
            <xs:element ref="fieldClass"/>
            <xs:element ref="disableAction"/>
            <xs:element ref="filter"/>
            <xs:element ref="editor"/>
            <xs:element ref="dataType"/>
            <xs:element ref="visible"/>
            <xs:element name="resizeEnabled" type="xs:boolean">
                <xs:annotation>
                    <xs:documentation>
                        Option that enables resize for current column.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
            <xs:element name="resizeDefaultWidth" type="xs:integer">
                <xs:annotation>
                    <xs:documentation>
                        Option that sets the initial column width in pixels.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
            <xs:element name="addField" type="xs:boolean"/>
            <xs:element name="hasPreview" type="xs:boolean">
                <xs:annotation>
                    <xs:documentation>
                        For Thumbnail column: enables image preview popup.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
            <xs:element name="altField" type="xs:string">
                <xs:annotation>
                    <xs:documentation>
                        For Thumbnail column: specifies the index (column name), which should be used as a value
                        for the image alt attribute.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
            <xs:element name="fieldAction" type="columnActions">
                <xs:annotation>
                    <xs:documentation>
                        Describes action that will be applied when user clicks on one of the column's fields.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
            <xs:element name="options" type="optionsType">
                <xs:annotation>
                    <xs:documentation>
                        An array of objects used to display a field's content by matching the associated record's
                        value with the value of one of the elements provided in "options".
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
            <xs:element name="dateFormat" type="xs:string">
                <xs:annotation>
                    <xs:documentation>
                        For the Date column: Date format for the displayed column's values.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
            <xs:element name="timeFormat" type="xs:string"/>
            <xs:element name="skipTimeZoneConversion" type="xs:boolean">
                <xs:annotation>
                    <xs:documentation>
                        For the Date column: If time not important for filtering.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
            <xs:element name="timezone" type="xs:boolean">
                <xs:annotation>
                    <xs:documentation>
                        For the Date column: enables date conversion based on the timezone configuration.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
        </xs:choice>
    </xs:group>

    <xs:complexType name="columnActions">
        <xs:choice minOccurs="2" maxOccurs="unbounded">
            <xs:element name="params" minOccurs="0" maxOccurs="1">
                <xs:annotation>
                    <xs:documentation>
                        A list of arguments that will be passed to the method.
                    </xs:documentation>
                </xs:annotation>
                <xs:complexType>
                    <xs:sequence minOccurs="0" maxOccurs="unbounded">
                        <xs:element ref="param"/>
                    </xs:sequence>
                </xs:complexType>
            </xs:element>
            <xs:element name="provider" type="xs:string" minOccurs="1" maxOccurs="1">
                <xs:annotation>
                    <xs:documentation>
                        Reference to component.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
            <xs:element name="target" type="xs:string" minOccurs="1" maxOccurs="1">
                <xs:annotation>
                    <xs:documentation>
                        Name of the component's method to be invoked.
                    </xs:documentation>
                </xs:annotation>
            </xs:element>
        </xs:choice>
    </xs:complexType>

</xs:schema>

Important Note: This information captured from the Magento 2.2.5. Actual information could be found inside corresponding Magento_Ui module of yours Magento.

Siarhey Uchukhlebau
  • 15,957
  • 11
  • 54
  • 83