diff --git a/rollup.config.js b/rollup.config.js
index a380d93e94..810c153ebc 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -21,6 +21,7 @@ const ALIAS_ENTRIES = [
{ find: '../virtualscroller/VirtualScroller', replacement: 'primereact/virtualscroller' },
{ find: '../button/Button', replacement: 'primereact/button' },
{ find: '../inputtext/InputText', replacement: 'primereact/inputtext' },
+ { find: '../inputnumber/InputNumber', replacement: 'primereact/inputnumber' },
{ find: '../paginator/Paginator', replacement: 'primereact/paginator' },
{ find: '../messages/Messages', replacement: 'primereact/messages' },
{ find: '../progressbar/ProgressBar', replacement: 'primereact/progressbar' },
diff --git a/src/components/paginator/JumpToPageInput.js b/src/components/paginator/JumpToPageInput.js
new file mode 100644
index 0000000000..b451cb05a2
--- /dev/null
+++ b/src/components/paginator/JumpToPageInput.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { InputNumber } from '../inputnumber/InputNumber';
+
+export class JumpToPageInput extends Component {
+
+ static defaultProps = {
+ value: null,
+ page: null,
+ pageCount: null,
+ disabled: false
+ }
+
+ static propTypes = {
+ value: PropTypes.number,
+ page: PropTypes.number,
+ pageCount: PropTypes.number,
+ disabled: PropTypes.bool,
+ }
+
+ constructor(props) {
+ super(props)
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ onChange(event) {
+ if (this.props.onChange) {
+ this.props.onChange({
+ event: event.originalEvent,
+ value: event.value
+ });
+ }
+ }
+
+ render() {
+ return (
+
+ )
+ }
+
+}
diff --git a/src/components/paginator/Paginator.d.ts b/src/components/paginator/Paginator.d.ts
index a023db4744..d6a9d0913c 100644
--- a/src/components/paginator/Paginator.d.ts
+++ b/src/components/paginator/Paginator.d.ts
@@ -21,6 +21,8 @@ type PaginatorRowsPerPageDropdownType = React.ReactNode | ((options: PaginatorRo
type PaginatorCurrentPageReportType = React.ReactNode | ((options: PaginatorCurrentPageReportOptions) => React.ReactNode);
+type PaginatorJumpToPageInputType = React.ReactNode | ((options: PaginatorJumpToPageInputOptions) => React.ReactNode);
+
type PaginatorAppendToType = 'self' | HTMLElement | undefined | null;
interface PaginatorFirstPageLinkOptions {
@@ -112,6 +114,13 @@ interface PaginatorCurrentPageReportOptions {
props: PaginatorProps;
}
+interface PaginatorJumpToPageInputOptions {
+ value: number;
+ page: number;
+ pageCount: number;
+ disabled: boolean;
+}
+
interface PaginatorTemplateOptions {
layout: string;
FirstPageLink: PaginatorFirstPageLinkType;
@@ -121,6 +130,7 @@ interface PaginatorTemplateOptions {
LastPageLink: PaginatorLastPageLinkType;
RowsPerPageDropdown: PaginatorRowsPerPageDropdownType;
CurrentPageReport: PaginatorCurrentPageReportType;
+ JumpToPageInput: PaginatorJumpToPageInputType;
}
export type PaginatorTemplate = string | PaginatorTemplateOptions;
diff --git a/src/components/paginator/Paginator.js b/src/components/paginator/Paginator.js
index 29be0ce6ac..bdc3c6cf67 100644
--- a/src/components/paginator/Paginator.js
+++ b/src/components/paginator/Paginator.js
@@ -8,6 +8,7 @@ import { LastPageLink } from './LastPageLink';
import { PageLinks } from './PageLinks';
import { RowsPerPageDropdown } from './RowsPerPageDropdown';
import { CurrentPageReport } from './CurrentPageReport';
+import { JumpToPageInput } from './JumpToPageInput';
export class Paginator extends Component {
@@ -190,7 +191,10 @@ export class Paginator extends Component {
case 'CurrentPageReport':
element = ;
+ rows={this.props.rows} totalRecords={this.props.totalRecords} template={template} />;
+ break;
+ case 'JumpToPageInput':
+ element = ;
break;
default:
diff --git a/src/showcase/paginator/PaginatorDoc.js b/src/showcase/paginator/PaginatorDoc.js
index a92a6b0d33..daa0c5c2f7 100644
--- a/src/showcase/paginator/PaginatorDoc.js
+++ b/src/showcase/paginator/PaginatorDoc.js
@@ -910,6 +910,7 @@ const onPageChange = (e) => {
NextPageLink
LastPageLink
RowsPerPageDropdown
+ JumpToPageInput
CurrentPageReport