Skip to content
This repository has been archived by the owner on Nov 19, 2024. It is now read-only.

Update ui columns documentation #6036

Merged
merged 3 commits into from
Nov 20, 2019
Merged

Update ui columns documentation #6036

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f592ee
Update ui columns documentation
Nov 20, 2019
51a4309
Adjust the example title
Nov 20, 2019
4dfe78e
Grammar updates
keharper Nov 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added common/images/ui_comps/ui-columns-list-result.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added common/images/ui_comps/ui-columns-result.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
106 changes: 105 additions & 1 deletion guides/v2.2/ui_comp_guide/components/ui-columns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ The Columns component is a collection of columns. It renders the `<table>` eleme
| `stickyTmpl` | Path to the `.html` template used for the [Toolbar component]({{ page.baseurl }}/ui_comp_guide/components/ui-toolbar.html) 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]({{ page.baseurl }}/ui_comp_guide/components/ui-insertlisting.html). |
| `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` |
| `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`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/resize.js) component. | Object | `{name: '${ $.name }_resize',columnsProvider: '${ $.name }',component: 'Magento_Ui/js/grid/resize',enabled: false}` |

Expand All @@ -33,3 +33,107 @@ The Columns component is a collection of columns. It renders the `<table>` eleme
Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicollection_concept.html):

- [`Magento/Ui/view/base/web/js/grid/listing.js`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/listing.js)
- [`Magento/Ui/view/base/web/templates/list/listing.html`]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/templates/list/listing.html)

## Examples

### Integrate Columns component with Listing component
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @serhiyzhovnir. To bring some clarity, I would suggest adjusting the title as following

Suggested change
### Integrate Columns component with Listing component
### Integrate Columns component as grid (default) with Listing component

So, at first glance, the reader understands the core difference between the examples.

Thank you!


This is an example of how the Columns component integrates with the [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:

```xml
<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]({{ site.baseurl }}/common/images/ui_comps/ui-columns-result.png)

### Integrate Columns component as list with Listing component

This is an example of how the Columns component with the list display mode integrates with the [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:

```xml
<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]({{ site.baseurl }}/common/images/ui_comps/ui-columns-list-result.png)