Row pagination

Pagination splits row data into pages, so the Grid renders a manageable subset of rows at a time. This is useful for large datasets and helps keep the interface fast and readable.

If you prefer continuous scrolling instead of pages, consider row virtualization under rendering.rows.

Enable pagination

Grid.grid('container', {
    data: {
        dataTable: {
            columns: {
                product: ['Apple', 'Pear', 'Orange', 'Banana', 'Grape', 'Mango'],
                price: [3.5, 2.5, 3, 2.2, 4.1, 3.8]
            }
        }
    },
    pagination: true
});

To customize pagination, use the object form:

Grid.grid('container', {
    data: {
        dataTable: {
            columns: {
                product: ['Apple', 'Pear', 'Orange', 'Banana', 'Grape', 'Mango'],
                price: [3.5, 2.5, 3, 2.2, 4.1, 3.8]
            }
        }
    },
    pagination: {
        enabled: true,
        pageSize: 5,
        position: 'bottom'
    }
});

Page size

The pageSize option controls how many rows appear on each page. The default value is 10.

pagination: {
    enabled: true,
    pageSize: 25
}

Pagination controls

You can enable or disable individual UI controls, such as the page size selector or the page buttons:

pagination: {
    enabled: true,
    controls: {
        pageSizeSelector: {
            enabled: true,
            options: [10, 25, 50]
        },
        pageInfo: {
            enabled: true
        },
        pageButtons: {
            enabled: true,
            count: 7
        }
    }
}

For a complete list of options and methods, see the Pagination article or the pagination API reference.