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.

Paging component

The Paging component implements pagination in grids implemented using Listing. It also creates an instance of the child Sizes component which allows to define the number of records displayed in the associated table.

Configuration options

Option Description Type Default Value
current The number of current page. String 1
sizesConfig.maxSize The maximum number of elements on a page configuration that is passed to the Sizes component. Object 999
sizesConfig.minSize The minimum number of elements on a page configuration that is passed to the Sizes component. Object 1
template The path to the component’s .html template. String ui/grid/paging/paging
totalTmpl Path to the .html template for rendering the total amount of found records. String ui/grid/paging-total

Source files

Extends UiElement:

Examples

Integrate the Paging component with the Listing component

This example integrates the Paging component with the Listing component:

1
2
3
4
5
6
7
<listing>
    ...
    <listingToolbar>
        ...
        <paging name="listing_paging"/>
    </listingToolbar>
</listing>

Result

Paging Component example

Configure page size and options for Paging component

This example configures the Paging component with the page size and options:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<paging name="listing_paging">
    <settings>
        <options>
            <option name="32" xsi:type="array">
                <item name="value" xsi:type="number">32</item>
                <item name="label" xsi:type="string">32</item>
            </option>
            <option name="48" xsi:type="array">
                <item name="value" xsi:type="number">48</item>
                <item name="label" xsi:type="string">48</item>
            </option>
            <option name="64" xsi:type="array">
                <item name="value" xsi:type="number">64</item>
                <item name="label" xsi:type="string">64</item>
            </option>
        </options>
        <pageSize>32</pageSize>
    </settings>
</paging>

Result

Configured Paging Component example