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.

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

Integration (grid)

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

<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>
Copied to your clipboard
<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

Integration (list)

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

<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>
Copied to your clipboard
<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>