Adobe Commerce 2.3 reached end of support in September 2022.

Columns component

The Columns component is a collection of columns. It renders the <table> element and displays the records of the Listing component in this table.

Configuration options

Option Description Type Default
component The path to the component’s .js file. String Magento_Ui/js/grid/listing
displayMode Initial display mode. String 'grid'
displayModes List of available display modes. {
[name: string]: DisplayMode
}		 {grid: {value: 'grid',label: 'Grid',template: '${ $.template }'},list: {value: 'list',label: 'List',template: '${ $.listTemplate }'}}
dndConfig Configuration of the DragAndDrop component. Object Specified in the DragAndDrop component configuration.
stickyTmpl Path to the .html template used for the Toolbar component when it receives a fixed position. String ui/grid/sticky/listing
template Path to the component’s .html template. String ui/grid/listing
editorConfig Configuration of the InlineEditing component. Object Specified in the InlineEditing component configuration.
viewSwitcherTmpl Path to the .html template for rendering the list of available display modes. By default this list is not displayed. String ui/grid/view-switcher
componentType The type of component. String columns
resizeConfig Configurations of Resize component. Object {name: '${ $.name }_resize',columnsProvider: '${ $.name }',component: 'Magento_Ui/js/grid/resize',enabled: false}

DisplayMode interface

Option Description Type Required
label Label for the list of available modes. String Optional
template Path to the .html template used to render listing in the selected mode. String Optional
value Mode’s identifier. String Optional

Source files

Extends uiCollection:

Examples

Integrate the Columns component as a grid (default) with the Listing component

This is an example of how the Columns component integrates with the Listing component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<listing>
    ...
    <columns name="columns_example">
        <column name="column1" sortOrder="10">
            <settings>
                <filter>text</filter>
                <dataType>text</dataType>
                <label translate="true">Column 1</label>
                <default>1</default>
            </settings>
        </column>
        <column name="column2" sortOrder="13">
            <settings>
                <filter>text</filter>
                <dataType>text</dataType>
                <label translate="true">Column 2</label>
                <default>2</default>
            </settings>
        </column>
        <column name="column3" sortOrder="14">
            <settings>
                <filter>text</filter>
                <dataType>text</dataType>
                <label translate="true">Column 3</label>
                <default>3</default>
            </settings>
        </column>
        <column name="column4" sortOrder="15">
            <settings>
                <filter>text</filter>
                <dataType>text</dataType>
                <label translate="true">Column 4</label>
                <default>4</default>
            </settings>
        </column>
    </columns>
    ...
</listing>

Result

Columns Component Example

Integrate the Columns component as a list with the Listing component

This is an example of how the Columns component with the list display mode integrates with the Listing component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<listing>
    ...
    <columns name="columns_list_example">
        <settings>
            <displayMode>list</displayMode>
        </settings>
        <column name="column1" sortOrder="10">
            <settings>
                <filter>text</filter>
                <dataType>text</dataType>
                <label translate="true">Column 1</label>
                <default>1</default>
            </settings>
        </column>
        <column name="column2" sortOrder="13">
            <settings>
                <filter>text</filter>
                <dataType>text</dataType>
                <label translate="true">Column 2</label>
                <default>2</default>
            </settings>
        </column>
        <column name="column3" sortOrder="14">
            <settings>
                <filter>text</filter>
                <dataType>text</dataType>
                <label translate="true">Column 3</label>
                <default>3</default>
            </settings>
        </column>
        <column name="column4" sortOrder="15">
            <settings>
                <filter>text</filter>
                <dataType>text</dataType>
                <label translate="true">Column 4</label>
                <default>4</default>
            </settings>
        </column>
    </columns>
    ...
</listing>

Result

Columns List Component Example

© 2023 Adobe. All rights reserved.