PagingPanel Plugin Reference

A plugin that renders the paging panel used for navigation through data pages. The panel occupies the entire Grid footer.

Import

Use the following statement to import a plugin with embedded theme components:

import { PagingPanel } from '@devexpress/dx-react-grid-material-ui';
// import { PagingPanel } from '@devexpress/dx-react-grid-bootstrap4';
// import { PagingPanel } from '@devexpress/dx-react-grid-bootstrap3';

If you want to use custom components, you can import the themeless plugin:

import { PagingPanel } from '@devexpress/dx-react-grid';

User Reference

Dependencies

Properties

Name Type Default Description
containerComponent ComponentType<PagingPanel.ContainerProps> A component that renders the paging panel.
pageSizes? Array<number> [] The page sizes that a user can select.
messages? PagingPanel.LocalizationMessages An object that specifies the localization messages.

Interfaces

PagingPanel.ContainerProps

Describes the container component properties.

Field Type Description
totalPages number Specifies the total page count.
currentPage number Specifies the current page.
onCurrentPageChange (page: number) => void Handles the current page changes.
pageSize number Specifies the page size.
totalCount number Specifies the total row count.
onPageSizeChange (size: number) => void Handles the page size changes.
pageSizes Array<number> Specifies the page sizes that a user can select.
getMessage (messageKey: string, parameters?: { from: number, to: number, count: number }) => string Returns the paging panel's text.

Localization Messages

Field Type Default Description
showAll? string 'All' Specifies the page size selector's 'All' item text.
rowsPerPage? string 'Rows per page:' Specifies the 'Rows per page' label's text. Available in the "@devexpress/dx-react-grid-material-ui" package.
info? (parameters: { from: number, to: number, count: number }) => string | string {from}-{to} of {count} Specifies the 'Row count' text template.

Plugin Components

Name Properties Description
PagingPanel.Container PagingPanel.ContainerProps A component that renders the paging panel.

Additional properties are added to the component's root element.

Plugin Developer Reference

Imports

Name Plugin Type Description
currentPage Getter number The current page.
pageSize Getter number The page size.
totalCount Getter number The total row count.
setCurrentPage Action (page: number) => void Changes the current page.
setPageSize Action (size: number) => void Changes the page size.
footer Template object? A template that renders the grid footer.

Exports

none