You are reading the documentation for version 2.2. Magento 2.3 is the latest version available. Ensure you are reading the documentation for your version of Magento.

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: