A plugin that renders the paging panel used for navigation through data pages. The panel occupies the entire Grid footer.
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';| 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. |
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. |
| 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. |
| Name | Properties | Description |
|---|---|---|
| PagingPanel.Container | PagingPanel.ContainerProps | A component that renders the paging panel. |
Additional properties are added to the component's root element.
| 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. |
none