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. | {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:
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
Integration (list)
This is an example of how the Columns component with the list display mode integrates with the Listing component:
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>
Result
