Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9dad679

Browse files
doboothdobooth
authored
Merge pull request magento#6177 from serhiyzhovnir/update-SelectColumn-UI-component-documentation
Update documentation for the SelectColumn UI component
2 parents 58420da + 1ad6c28 commit 9dad679

File tree

2 files changed

+54
-77
lines changed

2 files changed

+54
-77
lines changed

‎src/common/images/ui_comps/ui-selectcolumn-result.png

30.8 KB
Loading

‎src/guides/v2.2/ui_comp_guide/components/ui-selectcolumn.md

Lines changed: 54 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -7,88 +7,65 @@ The SelectColumn component receives an array of values and displays the column w
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>options</code>
28-
</td>
29-
<td>
30-
An array of objects used to display a field's content by
31-
matching the associated record's value with the value of one
32-
of the elements provided in <code>options</code>.
33-
</td>
34-
<td>
35-
Array
36-
</td>
37-
<td>
38-
<code>ui/grid/cells/thumbnail</code>
39-
</td>
40-
</tr>
41-
</table>
10+
| Option | Description | Type | Default |
11+
| --- | --- | --- | --- |
12+
| `component` | The path to the component’s `.js` file in terms of RequireJS. | String | `Magento_Ui/js/grid/columns/select` |
13+
| `filter` | Reference to one of the available filter types defined in the [Filters component]({{ page.baseurl }}/ui_comp_guide/components/ui-filters.html). If the value represents an object containing the `filterType` field, this object is considered as an extension of the referenced filter element. If there is no such field in the value object, it is considered as a definition of a custom filter element. | String \| Object | `-` |
14+
| `label` | The column label displayed in the header. | String | `''` |
15+
| `options` | An array of objects used to display a field's content by matching the associated record's value with the value of one of the elements provided in `options`. | Array | `[]` |
16+
| `visible` | Initial component's visibility. When set to `false`, the `display: none` CSS style is added to the component's DOM block. | Boolean | `true` |
4217

4318
### Option interface
4419

45-
<table>
46-
<tr>
47-
<th>
48-
Option
49-
</th>
50-
<th>
51-
Description
52-
</th>
53-
<th>
54-
Type
55-
</th>
56-
<th>
57-
Required
58-
</th>
59-
</tr>
60-
<tr>
61-
<td>
62-
<code>value</code>
63-
</td>
64-
<td>
65-
Option's identifier or an array of options.
66-
</td>
67-
<td>
68-
String | Number | Array&lt;Option&gt;
69-
</td>
70-
<td>
71-
Required
72-
</td>
73-
</tr>
74-
<tr>
75-
<td>
76-
<code>label</code>
77-
</td>
78-
<td>
79-
Label to be displayed in a column's field.
80-
</td>
81-
<td>
82-
String
83-
</td>
84-
<td>
85-
Required
86-
</td>
87-
</tr>
88-
</table>
20+
| Option | Description | Type | Required |
21+
| --- | --- | --- | --- |
22+
| `value` | Option's identifier or an array of options. | String \| Number \| Array&lt;Option&gt; | Required |
23+
| `label` | Label to be displayed in a column's field. | String | Required |
8924

9025
## Source files
9126

9227
Extends [`Column`]({{ page.baseurl }}/ui_comp_guide/components/ui-column.html):
9328

94-
- [app/code/Magento/Ui/view/base/web/js/grid/columns/select.js]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/select.js)
29+
- [app/code/Magento/Ui/view/base/web/js/grid/columns/select.js]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/select.js)
30+
31+
## Examples
32+
33+
### Integrate the SelectColumn component with the Listing component
34+
35+
This is an example of how the SelectColumn component integrates with the [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:
36+
37+
```xml
38+
<listing>
39+
<listingToolbar name="listing_top">
40+
<filters name="listing_filters"/>
41+
</listingToolbar>
42+
<columns>
43+
<column name="select_column_example" component="Magento_Ui/js/grid/columns/select">
44+
<settings>
45+
<filter>select</filter>
46+
<dataType>select</dataType>
47+
<label translate="true">Select Column</label>
48+
<visible>true</visible>
49+
<options>
50+
<option name="0" xsi:type="array">
51+
<item name="value" xsi:type="number">1</item>
52+
<item name="label" xsi:type="string" translate="true">Option #1</item>
53+
</option>
54+
<option name="1" xsi:type="array">
55+
<item name="value" xsi:type="number">2</item>
56+
<item name="label" xsi:type="string" translate="true">Option #2</item>
57+
</option>
58+
<option name="2" xsi:type="array">
59+
<item name="value" xsi:type="number">3</item>
60+
<item name="label" xsi:type="string" translate="true">Option #3</item>
61+
</option>
62+
</options>
63+
</settings>
64+
</column>
65+
</columns>
66+
</listing>
67+
```
68+
69+
#### Result
70+
71+
![SelectColumn Component example]({{ site.baseurl }}/common/images/ui_comps/ui-selectcolumn-result.png)

0 commit comments

Comments
 (0)