PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
Sizes component
The Sizes component defines the maximum number of displayed records in a table (grid).
Configuration options
| Option | Description | Type | Default Value |
|---|---|---|---|
component |
The path to the component’s .js file in terms of RequireJS. |
String | 'Magento_Ui/js/grid/paging/sizes' |
maxSize |
Maximum allowed number of rows. | Number | 999 |
minSize |
Minimum number of rows. | Number | 1 |
options |
The initial list of available table sizes (number of rows). | Array | [] |
template |
Path to the component’s .html template. |
String | ui/grid/paging/sizes |
value |
Initial number of rows per page. | Number | 20 |
SizeOption interface
| Option | Description | Type | Required |
|---|---|---|---|
label |
Label displayed in the rendered options list. This label is usually equal to the corresponding value property. |
String | Number | Required |
value |
Options identifier which represents the table size. | Number | Required |
Source files
Extends UiElement:
- app/code/Magento/Ui/view/base/web/js/grid/paging/sizes.js
- app/code/Magento/Ui/view/base/web/templates/grid/paging/sizes.html
Examples
Integrate the Sizes component with the Paging component
This example integrates the Sizes component with the Paging component:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<listing>
<listingToolbar>
<paging name="listing_paging">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sizesConfig" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/paging/sizes</item>
<item name="template" xsi:type="string">ui/grid/paging/sizes</item>
<item name="maxSize" xsi:type="number">500</item>
</item>
</item>
</argument>
</paging>
</listingToolbar>
</listing>
Result
