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

Commit 2a44d45

Browse files
author
Sergiy Zhovnir
committed
Added information about missed UI Columns options and added the Source files section
1 parent da1f23a commit 2a44d45

File tree

1 file changed

+23
-186
lines changed

1 file changed

+23
-186
lines changed

‎guides/v2.2/ui_comp_guide/components/ui-columns.md

Lines changed: 23 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -7,192 +7,29 @@ The Columns component is a collection of columns. It renders the `<table>` eleme
77

88
## Configuration options
99

10-
<table>
11-
<tr>
12-
<th>
13-
Option
14-
</th>
15-
<th>
16-
Description
17-
</th>
18-
<th>
19-
Type
20-
</th>
21-
<th>
22-
Default
23-
</th>
24-
</tr>
25-
<tr>
26-
<td>
27-
<code>displayMode</code>
28-
</td>
29-
<td>
30-
Initial display mode.
31-
</td>
32-
<td>
33-
String
34-
</td>
35-
<td>
36-
<code>'grid'</code>
37-
</td>
38-
</tr>
39-
<tr>
40-
<td>
41-
<code>displayModes</code>
42-
</td>
43-
<td>
44-
List of available display modes.
45-
</td>
46-
<td>
47-
{<br />
48-
[name: string]: <a href="#displaymode">DisplayMode</a><br />
49-
}
50-
</td>
51-
<td>
52-
<code>{<br />
53-
value: 'grid',<br />
54-
label: 'Grid',<br />
55-
template: 'ui/grid/listing'<br />
56-
}</code>
57-
</td>
58-
</tr>
59-
<tr>
60-
<td>
61-
<code>dndConfig</code>
62-
</td>
63-
<td>
64-
Configuration of the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html">DragAndDrop
65-
component</a>.
66-
</td>
67-
<td>
68-
Object
69-
</td>
70-
<td>
71-
Specified in the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html">
72-
DragAndDrop component configuration</a>.
73-
</td>
74-
</tr>
75-
<tr>
76-
<td>
77-
<code>stickyTmpl</code>
78-
</td>
79-
<td>
80-
Path to the <code>.html</code> template used for the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-toolbar.html">
81-
Toolbar component</a> when it receives a fixed position.
82-
</td>
83-
<td>
84-
String
85-
</td>
86-
<td>
87-
<code>ui/grid/sticky/listing</code>
88-
</td>
89-
</tr>
90-
<tr>
91-
<td>
92-
<code>template</code>
93-
</td>
94-
<td>
95-
Path to the component’s <code>.html</code> template.
96-
</td>
97-
<td>
98-
String
99-
</td>
100-
<td>
101-
<code>ui/grid/listing</code>
102-
</td>
103-
</tr>
104-
<tr>
105-
<td>
106-
<code>editorConfig</code>
107-
</td>
108-
<td>
109-
Configuration of the InlineEditing
110-
component.
111-
</td>
112-
<td>
113-
Object
114-
</td>
115-
<td>
116-
Specified in the <a href="{{ page.baseurl }}/ui_comp_guide/components/ui-insertlisting.html">
117-
InlineEditing component configuration</a>.
118-
</td>
119-
</tr>
120-
<tr>
121-
<td>
122-
<code>viewSwitcherTmpl</code>
123-
</td>
124-
<td>
125-
Path to the .html template for rendering the list of
126-
available display modes. By default this list is not
127-
displayed.
128-
</td>
129-
<td>
130-
String
131-
</td>
132-
<td>
133-
<code>ui/grid/view-switcher</code>
134-
</td>
135-
</tr>
136-
</table>
10+
| Option | Description | Type | Default |
11+
| --- | --- | --- | --- |
12+
| `component` | The path to the component’s `.js` file. | String | `Magento_Ui/js/grid/listing` |
13+
| `displayMode` | Initial display mode. | String | `'grid'` |
14+
| `displayModes` | List of available display modes. | {<br />[name: string]: [DisplayMode](#displaymode)<br />} | `{grid: {value: 'grid',label: 'Grid',template: '${ $.template }'},list: {value: 'list',label: 'List',template: '${ $.listTemplate }'}}` |
15+
| `dndConfig` | Configuration of the [DragAndDrop component]({{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html). | Object | Specified in the [DragAndDrop component configuration]({{ page.baseurl }}/ui_comp_guide/components/ui-draganddrop.html). |
16+
| `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` |
17+
| `template` | Path to the component’s `.html` template. | String | `ui/grid/listing` |
18+
| `editorConfig` | Configuration of the InlineEditing component. | Object | Specified in the [InlineEditing component configuration]({{ page.baseurl }}/ui_comp_guide/components/ui-insertlisting.html). |
19+
| `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` |
20+
| `componentType` | The type of component. | String | `columns` |
21+
| `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}` |
13722

13823
### DisplayMode interface {#displaymode}
13924

140-
<table>
141-
<tr>
142-
<th>
143-
Option
144-
</th>
145-
<th>
146-
Description
147-
</th>
148-
<th>
149-
Type
150-
</th>
151-
<th>
152-
Required
153-
</th>
154-
</tr>
155-
<tr>
156-
<td>
157-
<code>label</code>
158-
</td>
159-
<td>
160-
Label for the list of available modes.
161-
</td>
162-
<td>
163-
String
164-
</td>
165-
<td>
166-
Optional
167-
</td>
168-
</tr>
169-
<tr>
170-
<td>
171-
<code>template</code>
172-
</td>
173-
<td>
174-
Path to the <code>.html</code> template used to render
175-
listing in the selected mode.
176-
</td>
177-
<td>
178-
String
179-
</td>
180-
<td>
181-
Optional
182-
</td>
183-
</tr>
184-
<tr>
185-
<td>
186-
<code>value</code>
187-
</td>
188-
<td>
189-
Mode's identifier.
190-
</td>
191-
<td>
192-
String
193-
</td>
194-
<td>
195-
Optional
196-
</td>
197-
</tr>
198-
</table>
25+
| Option | Description | Type | Required |
26+
| --- | --- | --- | --- |
27+
| `label` | Label for the list of available modes. | String | Optional |
28+
| `template` | Path to the `.html` template used to render listing in the selected mode. | String | Optional |
29+
| `value` | Mode's identifier. | String | Optional |
30+
31+
## Source files
32+
33+
Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicollection_concept.html):
34+
35+
- [`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)

0 commit comments

Comments
 (0)