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

``` ...

    <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, ...)?

1
  • 1
    go through these links 1, 2, 3
    – Hitesh
    Oct 25 '18 at 12:30
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.