diff --git a/src/components/paginator/Paginator.js b/src/components/paginator/Paginator.js
index d73d0eac0b..29be0ce6ac 100644
--- a/src/components/paginator/Paginator.js
+++ b/src/components/paginator/Paginator.js
@@ -142,16 +142,21 @@ export class Paginator extends Component {
     }
 
     onRowsChange(event) {
-        this.changePage(0, event.value);
+        const rows = event.value;
+
+        this.isRowChanged = rows !== this.props.rows;
+        this.changePage(0, rows);
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.props.rows !== prevProps.rows) {
+        if (this.props.rows !== prevProps.rows && !this.isRowChanged) {
             this.changePage(0, this.props.rows);
         }
         else if (this.getPage() > 0 && prevProps.totalRecords !== this.props.totalRecords && this.props.first >= this.props.totalRecords) {
             this.changePage((this.getPageCount() - 1) * this.props.rows, this.props.rows);
         }
+
+        this.isRowChanged = false;
     }
 
     renderElement(key, template) {
diff --git a/src/showcase/datatable/DataTablePaginatorDemo.js b/src/showcase/datatable/DataTablePaginatorDemo.js
index 58a3608a38..855cf3e1ca 100644
--- a/src/showcase/datatable/DataTablePaginatorDemo.js
+++ b/src/showcase/datatable/DataTablePaginatorDemo.js
@@ -1,774 +1,166 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import { DataTable } from '../../components/datatable/DataTable';
 import { Column } from '../../components/column/Column';
 import { CustomerService } from '../service/CustomerService';
-import { TabView } from '../../components/tabview/TabView';
-import { Button } from '../../components/button/Button';
 import { Ripple } from '../../components/ripple/Ripple';
 import { Dropdown } from '../../components/dropdown/Dropdown';
 import { InputText } from '../../components/inputtext/InputText';
-import { useLiveEditorTabs } from '../liveeditor/LiveEditor';
-import { AppInlineHeader } from '../../AppInlineHeader';
 import { classNames } from '../../components/utils/ClassNames';
-import AppDemoActions from '../../AppDemoActions';
 
-export class DataTablePaginatorDemo extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            customers1: [],
-            customers2: [],
-            customers3: [],
-            first1: 0,
-            rows1: 10,
-            first2: 0,
-            rows2: 10,
-            currentPage: 1,
-            pageInputTooltip: 'Press \'Enter\' key to go to this page.'
-        };
-
-        this.customerService = new CustomerService();
-
-        this.onCustomPage1 = this.onCustomPage1.bind(this);
-        this.onCustomPage2 = this.onCustomPage2.bind(this);
-        this.onPageInputKeyDown = this.onPageInputKeyDown.bind(this);
-        this.onPageInputChange = this.onPageInputChange.bind(this);
-    }
-
-    onCustomPage1(event) {
-        this.setState({
-            first1: event.first,
-            rows1: event.rows,
-            currentPage: event.page + 1
-        });
-    }
-
-    onCustomPage2(event) {
-        this.setState({
-            first2: event.first,
-            rows2: event.rows
-        });
-    }
-
-    onPageInputKeyDown(event, options) {
-        if (event.key === 'Enter') {
-            const page = parseInt(this.state.currentPage);
-            if (page < 0 || page > options.totalPages) {
-                this.setState({ pageInputTooltip: `Value must be between 1 and ${options.totalPages}.`})
-            }
-            else {
-                const first = this.state.currentPage ? options.rows * (page - 1) : 0;
-
-                this.setState({ first1: first, pageInputTooltip: 'Press \'Enter\' key to go to this page.' });
-            }
-        }
-    }
-
-    onPageInputChange(event) {
-        this.setState({ currentPage: event.target.value });
-    }
-
-    componentDidMount() {
-        this.customerService.getCustomersLarge().then(data => this.setState({ customers1: data }));
-        this.customerService.getCustomersLarge().then(data => this.setState({ customers2: data }));
-        this.customerService.getCustomersLarge().then(data => this.setState({ customers3: data }));
-    }
-
-    render() {
-        const paginatorLeft = <Button type="button" icon="pi pi-refresh" className="p-button-text" />;
-        const paginatorRight = <Button type="button" icon="pi pi-cloud" className="p-button-text" />;
-        const template1 = {
-            layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport',
-            'PrevPageLink': (options) => {
-                return (
-                    <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
-                        <span className="p-p-3">Previous</span>
-                        <Ripple />
-                    </button>
-                )
-            },
-            'NextPageLink': (options) => {
-                return (
-                    <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
-                        <span className="p-p-3">Next</span>
-                        <Ripple />
-                    </button>
-                )
-            },
-            'PageLinks': (options) => {
-                if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
-                    const className = classNames(options.className, { 'p-disabled': true });
-
-                    return <span className={className} style={{ userSelect: 'none' }}>...</span>;
-                }
-
-                return (
-                    <button type="button" className={options.className} onClick={options.onClick}>
-                        {options.page + 1}
-                        <Ripple />
-                    </button>
-                )
-            },
-            'RowsPerPageDropdown': (options) => {
-                const dropdownOptions = [
-                    { label: 10, value: 10 },
-                    { label: 20, value: 20 },
-                    { label: 50, value: 50 },
-                    { label: 'All', value: options.totalRecords }
-                ];
-
-                return <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} appendTo={document.body} />;
-            },
-            'CurrentPageReport': (options) => {
-                return (
-                    <span className="p-mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
-                        Go to <InputText size="2" className="p-ml-1" value={this.state.currentPage} tooltip={this.state.pageInputTooltip}
-                            onKeyDown={(e) => this.onPageInputKeyDown(e, options)} onChange={this.onPageInputChange}/>
-                    </span>
-                )
-            }
-        };
-        const template2 = {
-            layout: 'RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink',
-            'RowsPerPageDropdown': (options) => {
-                const dropdownOptions = [
-                    { label: 10, value: 10 },
-                    { label: 20, value: 20 },
-                    { label: 50, value: 50 }
-                ];
-
-                return (
-                    <>
-                        <span className="p-mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>Items per page: </span>
-                        <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} appendTo={document.body} />
-                    </>
-                );
-            },
-            'CurrentPageReport': (options) => {
-                return (
-                    <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
-                        {options.first} - {options.last} of {options.totalRecords}
-                    </span>
-                )
-            }
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <AppInlineHeader changelogText="dataTable">
-                        <h1>DataTable <span>Paginator</span></h1>
-                        <p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display.</p>
-                    </AppInlineHeader>
-                    <AppDemoActions github="datatable/DataTablePaginatorDemo.js" />
-                </div>
-
-                <div className="content-section implementation">
-                    <div className="card">
-                        <h5>Basic</h5>
-                        <DataTable value={this.state.customers1} paginator
-                            paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
-                            currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" rows={10} rowsPerPageOptions={[10,20,50]}
-                            paginatorLeft={paginatorLeft} paginatorRight={paginatorRight}>
-                            <Column field="name" header="Name"></Column>
-                            <Column field="country.name" header="Country"></Column>
-                            <Column field="company" header="Company"></Column>
-                            <Column field="representative.name" header="Representative"></Column>
-                        </DataTable>
-
-                        <h5>Custom Paginator Template</h5>
-                        <DataTable value={this.state.customers2} paginator paginatorTemplate={template1} first={this.state.first1} rows={this.state.rows1} onPage={this.onCustomPage1}>
-                            <Column field="name" header="Name"></Column>
-                            <Column field="country.name" header="Country"></Column>
-                            <Column field="company" header="Company"></Column>
-                            <Column field="representative.name" header="Representative"></Column>
-                        </DataTable>
-
-                        <DataTable value={this.state.customers3} paginator paginatorTemplate={template2} first={this.state.first2} rows={this.state.rows2} onPage={this.onCustomPage2}
-                            paginatorClassName="p-jc-end" className="p-mt-6">
-                            <Column field="name" header="Name"></Column>
-                            <Column field="country.name" header="Country"></Column>
-                            <Column field="company" header="Company"></Column>
-                            <Column field="representative.name" header="Representative"></Column>
-                        </DataTable>
-                    </div>
-                </div>
-
-                <DataTablePaginatorDemoDoc></DataTablePaginatorDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTablePaginatorDemoDoc extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.sources = {
-            'class': {
-                tabName: 'Class Source',
-                content: `
-import React, { Component } from 'react';
-import { DataTable } from 'primereact/datatable';
-import { Column } from 'primereact/column';
-import { Button } from 'primereact/button';
-import { Ripple } from 'primereact/ripple';
-import { Dropdown } from 'primereact/dropdown';
-import { InputText } from 'primereact/inputtext';
-import { CustomerService } from '../service/CustomerService';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-
-export class DataTablePaginatorDemo extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            customers1: [],
-            customers2: [],
-            customers3: [],
-            first1: 0,
-            rows1: 10,
-            first2: 0,
-            rows2: 10,
-            currentPage: 1,
-            pageInputTooltip: 'Press \\'Enter\\' key to go to this page.'
-        };
-
-        this.customerService = new CustomerService();
-
-        this.onCustomPage1 = this.onCustomPage1.bind(this);
-        this.onCustomPage2 = this.onCustomPage2.bind(this);
-        this.onPageInputKeyDown = this.onPageInputKeyDown.bind(this);
-        this.onPageInputChange = this.onPageInputChange.bind(this);
-    }
-
-    onCustomPage1(event) {
-        this.setState({
-            first1: event.first,
-            rows1: event.rows,
-            currentPage: event.page + 1
-        });
-    }
-
-    onCustomPage2(event) {
-        this.setState({
-            first2: event.first,
-            rows2: event.rows
-        });
-    }
-
-    onPageInputKeyDown(event, options) {
-        if (event.key === 'Enter') {
-            const page = parseInt(this.state.currentPage);
-            if (page < 0 || page > options.totalPages) {
-                this.setState({ pageInputTooltip: \`Value must be between 1 and \${options.totalPages}.\`})
-            }
-            else {
-                const first = this.state.currentPage ? options.rows * (page - 1) : 0;
-
-                this.setState({ first1: first, pageInputTooltip: 'Press \\'Enter\\' key to go to this page.' });
-            }
-        }
-    }
-
-    onPageInputChange(event) {
-        this.setState({ currentPage: event.target.value });
-    }
-
-    componentDidMount() {
-        this.customerService.getCustomersLarge().then(data => this.setState({ customers1: data }));
-        this.customerService.getCustomersLarge().then(data => this.setState({ customers2: data }));
-        this.customerService.getCustomersLarge().then(data => this.setState({ customers3: data }));
-    }
-
-    render() {
-        const paginatorLeft = <Button type="button" icon="pi pi-refresh" className="p-button-text" />;
-        const paginatorRight = <Button type="button" icon="pi pi-cloud" className="p-button-text" />;
-        const template1 = {
-            layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport',
-            'PrevPageLink': (options) => {
-                return (
-                    <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
-                        <span className="p-p-3">Previous</span>
-                        <Ripple />
-                    </button>
-                )
-            },
-            'NextPageLink': (options) => {
-                return (
-                    <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
-                        <span className="p-p-3">Next</span>
-                        <Ripple />
-                    </button>
-                )
-            },
-            'PageLinks': (options) => {
-                if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
-                    const className = classNames(options.className, { 'p-disabled': true });
-
-                    return <span className={className} style={{ userSelect: 'none' }}>...</span>;
-                }
-
-                return (
-                    <button type="button" className={options.className} onClick={options.onClick}>
-                        {options.page + 1}
-                        <Ripple />
-                    </button>
-                )
-            },
-            'RowsPerPageDropdown': (options) => {
-                const dropdownOptions = [
-                    { label: 10, value: 10 },
-                    { label: 20, value: 20 },
-                    { label: 50, value: 50 },
-                    { label: 'All', value: options.totalRecords }
-                ];
-
-                return <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} appendTo={document.body} />;
-            },
-            'CurrentPageReport': (options) => {
-                return (
-                    <span className="p-mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
-                        Go to <InputText size="2" className="p-ml-1" value={this.state.currentPage} tooltip={this.state.pageInputTooltip}
-                            onKeyDown={(e) => this.onPageInputKeyDown(e, options)} onChange={this.onPageInputChange}/>
-                    </span>
-                )
-            }
-        };
-        const template2 = {
-            layout: 'RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink',
-            'RowsPerPageDropdown': (options) => {
-                const dropdownOptions = [
-                    { label: 10, value: 10 },
-                    { label: 20, value: 20 },
-                    { label: 50, value: 50 }
-                ];
-
-                return (
-                    <>
-                        <span className="p-mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>Items per page: </span>
-                        <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} appendTo={document.body} />
-                    </>
-                );
-            },
-            'CurrentPageReport': (options) => {
-                return (
-                    <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
-                        {options.first} - {options.last} of {options.totalRecords}
-                    </span>
-                )
-            }
-        };
-
-        return (
-            <div>
-                <div className="card">
-                    <h5>Basic</h5>
-                    <DataTable value={this.state.customers1} paginator
-                        paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
-                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" rows={10} rowsPerPageOptions={[10,20,50]}
-                        paginatorLeft={paginatorLeft} paginatorRight={paginatorRight}>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="country.name" header="Country"></Column>
-                        <Column field="company" header="Company"></Column>
-                        <Column field="representative.name" header="Representative"></Column>
-                    </DataTable>
-
-                    <h5>Custom Paginator Template</h5>
-                    <DataTable value={this.state.customers2} paginator paginatorTemplate={template1} first={this.state.first1} rows={this.state.rows1} onPage={this.onCustomPage1}>
-                        <Column field="name" header="Name"></Column>
-                        <Column field="country.name" header="Country"></Column>
-                        <Column field="company" header="Company"></Column>
-                        <Column field="representative.name" header="Representative"></Column>
-                    </DataTable>
-
-                    <DataTable value={this.state.customers3} paginator paginatorTemplate={template2} first={this.state.first2} rows={this.state.rows2} onPage={this.onCustomPage2}
-                        paginatorClassName="p-jc-end" className="p-mt-6">
-                        <Column field="name" header="Name"></Column>
-                        <Column field="country.name" header="Country"></Column>
-                        <Column field="company" header="Company"></Column>
-                        <Column field="representative.name" header="Representative"></Column>
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-                `
-            },
-            'hooks': {
-                tabName: 'Hooks Source',
-                content: `
-import React, { useState, useEffect } from 'react';
-import { DataTable } from 'primereact/datatable';
-import { Column } from 'primereact/column';
-import { Button } from 'primereact/button';
-import { Ripple } from 'primereact/ripple';
-import { Dropdown } from 'primereact/dropdown';
-import { InputText } from 'primereact/inputtext';
-import { CustomerService } from '../service/CustomerService';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-
-const DataTablePaginatorDemo = () => {
-    const [customers1, setCustomers1] = useState([]);
+export const DataTablePaginatorDemo = () => {
     const [customers2, setCustomers2] = useState([]);
-    const [customers3, setCustomers3] = useState([]);
     const [first1, setFirst1] = useState(0);
     const [rows1, setRows1] = useState(10);
-    const [first2, setFirst2] = useState(0);
-    const [rows2, setRows2] = useState(10);
     const [currentPage, setCurrentPage] = useState(1);
-    const [pageInputTooltip, setPageInputTooltip] = useState('Press \\'Enter\\' key to go to this page.');
-
-    const customerService = new CustomerService();
-
-    const onCustomPage1 = (event) => {
-        setFirst1(event.first);
-        setRows1(event.rows);
-        setCurrentPage(event.page + 1);
-    }
-
-    const onCustomPage2 = (event) => {
-        setFirst2(event.first);
-        setRows2(event.rows);
-    }
-
-    const onPageInputKeyDown = (event, options) => {
-        if (event.key === 'Enter') {
-            const page = parseInt(currentPage);
-            if (page < 0 || page > options.totalPages) {
-                setPageInputTooltip(\`Value must be between 1 and \${options.totalPages}.\`);
-            }
-            else {
-                const first = currentPage ? options.rows * (page - 1) : 0;
-
-                setFirst1(first);
-                setPageInputTooltip('Press \\'Enter\\' key to go to this page.');
-            }
-        }
-    }
-
-    const onPageInputChange = (event) => {
-        setCurrentPage(event.target.value);
-    }
-
-    useEffect(() => {
-        customerService.getCustomersLarge().then(data => setCustomers1(data));
-        customerService.getCustomersLarge().then(data => setCustomers2(data));
-        customerService.getCustomersLarge().then(data => setCustomers3(data));
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const paginatorLeft = <Button type="button" icon="pi pi-refresh" className="p-button-text" />;
-    const paginatorRight = <Button type="button" icon="pi pi-cloud" className="p-button-text" />;
-    const template1 = {
-        layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport',
-        'PrevPageLink': (options) => {
-            return (
-                <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
-                    <span className="p-p-3">Previous</span>
-                    <Ripple />
-                </button>
-            )
-        },
-        'NextPageLink': (options) => {
-            return (
-                <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
-                    <span className="p-p-3">Next</span>
-                    <Ripple />
-                </button>
-            )
-        },
-        'PageLinks': (options) => {
-            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
-                const className = classNames(options.className, { 'p-disabled': true });
-
-                return <span className={className} style={{ userSelect: 'none' }}>...</span>;
-            }
-
-            return (
-                <button type="button" className={options.className} onClick={options.onClick}>
-                    {options.page + 1}
-                    <Ripple />
-                </button>
-            )
-        },
-        'RowsPerPageDropdown': (options) => {
-            const dropdownOptions = [
-                { label: 10, value: 10 },
-                { label: 20, value: 20 },
-                { label: 50, value: 50 },
-                { label: 'All', value: options.totalRecords }
-            ];
-
-            return <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} appendTo={document.body} />;
-        },
-        'CurrentPageReport': (options) => {
-            return (
-                <span className="p-mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
-                    Go to <InputText size="2" className="p-ml-1" value={currentPage} tooltip={pageInputTooltip}
-                        onKeyDown={(e) => onPageInputKeyDown(e, options)} onChange={onPageInputChange}/>
-                </span>
-            )
-        }
-    };
-    const template2 = {
-        layout: 'RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink',
-        'RowsPerPageDropdown': (options) => {
-            const dropdownOptions = [
-                { label: 10, value: 10 },
-                { label: 20, value: 20 },
-                { label: 50, value: 50 }
-            ];
-
-            return (
-                <>
-                    <span className="p-mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>Items per page: </span>
-                    <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} appendTo={document.body} />
-                </>
-            );
-        },
-        'CurrentPageReport': (options) => {
-            return (
-                <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
-                    {options.first} - {options.last} of {options.totalRecords}
-                </span>
-            )
-        }
-    };
-
-    return (
-        <div>
-            <div className="card">
-                <h5>Basic</h5>
-                <DataTable value={customers1} paginator
-                    paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
-                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" rows={10} rowsPerPageOptions={[10,20,50]}
-                    paginatorLeft={paginatorLeft} paginatorRight={paginatorRight}>
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country.name" header="Country"></Column>
-                    <Column field="company" header="Company"></Column>
-                    <Column field="representative.name" header="Representative"></Column>
-                </DataTable>
-
-                <h5>Custom Paginator Template</h5>
-                <DataTable value={customers2} paginator paginatorTemplate={template1} first={first1} rows={rows1} onPage={onCustomPage1}>
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country.name" header="Country"></Column>
-                    <Column field="company" header="Company"></Column>
-                    <Column field="representative.name" header="Representative"></Column>
-                </DataTable>
-
-                <DataTable value={customers3} paginator paginatorTemplate={template2} first={first2} rows={rows2} onPage={onCustomPage2}
-                    paginatorClassName="p-jc-end" className="p-mt-6">
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country.name" header="Country"></Column>
-                    <Column field="company" header="Company"></Column>
-                    <Column field="representative.name" header="Representative"></Column>
-                </DataTable>
-            </div>
-        </div>
+    const [pageInputTooltip, setPageInputTooltip] = useState(
+      "Press 'Enter' key to go to this page."
     );
-}
-                `
-            },
-            'ts': {
-                tabName: 'TS Source',
-                content: `
-import React, { useState, useEffect } from 'react';
-import { DataTable } from 'primereact/datatable';
-import { Column } from 'primereact/column';
-import { Button } from 'primereact/button';
-import { Ripple } from 'primereact/ripple';
-import { Dropdown } from 'primereact/dropdown';
-import { InputText } from 'primereact/inputtext';
-import { CustomerService } from '../service/CustomerService';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-
-const DataTablePaginatorDemo = () => {
-    const [customers1, setCustomers1] = useState([]);
-    const [customers2, setCustomers2] = useState([]);
-    const [customers3, setCustomers3] = useState([]);
-    const [first1, setFirst1] = useState(0);
-    const [rows1, setRows1] = useState(10);
-    const [first2, setFirst2] = useState(0);
-    const [rows2, setRows2] = useState(10);
-    const [currentPage, setCurrentPage] = useState(1);
-    const [pageInputTooltip, setPageInputTooltip] = useState('Press \\'Enter\\' key to go to this page.');
 
     const customerService = new CustomerService();
 
     const onCustomPage1 = (event) => {
-        setFirst1(event.first);
-        setRows1(event.rows);
-        setCurrentPage(event.page + 1);
-    }
+      console.log("onCustomPage1");
+      setFirst1(event.first);
+      setRows1(event.rows);
+      setCurrentPage(event.page + 1);
+    };
 
-    const onCustomPage2 = (event) => {
-        setFirst2(event.first);
-        setRows2(event.rows);
-    }
 
     const onPageInputKeyDown = (event, options) => {
-        if (event.key === 'Enter') {
-            const page = parseInt(currentPage);
-            if (page < 0 || page > options.totalPages) {
-                setPageInputTooltip(\`Value must be between 1 and \${options.totalPages}.\`);
-            }
-            else {
-                const first = currentPage ? options.rows * (page - 1) : 0;
-
-                setFirst1(first);
-                setPageInputTooltip('Press \\'Enter\\' key to go to this page.');
-            }
+      if (event.key === "Enter") {
+        const page = parseInt(currentPage, 10);
+        if (page < 0 || page > options.totalPages) {
+          setPageInputTooltip(
+            `Value must be between 1 and ${options.totalPages}.`
+          );
+        } else {
+          const first = currentPage ? options.rows * (page - 1) : 0;
+
+          setFirst1(first);
+          setPageInputTooltip("Press 'Enter' key to go to this page.");
         }
-    }
+      }
+    };
 
     const onPageInputChange = (event) => {
-        setCurrentPage(event.target.value);
-    }
+      setCurrentPage(event.target.value);
+    };
 
     useEffect(() => {
-        customerService.getCustomersLarge().then(data => setCustomers1(data));
-        customerService.getCustomersLarge().then(data => setCustomers2(data));
-        customerService.getCustomersLarge().then(data => setCustomers3(data));
+      customerService.getCustomersLarge().then((data) => setCustomers2(data));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const paginatorLeft = <Button type="button" icon="pi pi-refresh" className="p-button-text" />;
-    const paginatorRight = <Button type="button" icon="pi pi-cloud" className="p-button-text" />;
     const template1 = {
-        layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport',
-        'PrevPageLink': (options) => {
-            return (
-                <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
-                    <span className="p-p-3">Previous</span>
-                    <Ripple />
-                </button>
-            )
-        },
-        'NextPageLink': (options) => {
-            return (
-                <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
-                    <span className="p-p-3">Next</span>
-                    <Ripple />
-                </button>
-            )
-        },
-        'PageLinks': (options) => {
-            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
-                const className = classNames(options.className, { 'p-disabled': true });
-
-                return <span className={className} style={{ userSelect: 'none' }}>...</span>;
-            }
-
-            return (
-                <button type="button" className={options.className} onClick={options.onClick}>
-                    {options.page + 1}
-                    <Ripple />
-                </button>
-            )
-        },
-        'RowsPerPageDropdown': (options) => {
-            const dropdownOptions = [
-                { label: 10, value: 10 },
-                { label: 20, value: 20 },
-                { label: 50, value: 50 },
-                { label: 'All', value: options.totalRecords }
-            ];
-
-            return <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} appendTo={document.body} />;
-        },
-        'CurrentPageReport': (options) => {
-            return (
-                <span className="p-mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
-                    Go to <InputText size="2" className="p-ml-1" value={currentPage} tooltip={pageInputTooltip}
-                        onKeyDown={(e) => onPageInputKeyDown(e, options)} onChange={onPageInputChange}/>
-                </span>
-            )
+      layout:
+        "PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport",
+      PrevPageLink: (options) => {
+        return (
+          <button
+            type="button"
+            className={options.className}
+            onClick={options.onClick}
+            disabled={options.disabled}
+          >
+            <span className="p-p-3">Previous</span>
+            <Ripple />
+          </button>
+        );
+      },
+      NextPageLink: (options) => {
+        return (
+          <button
+            type="button"
+            className={options.className}
+            onClick={options.onClick}
+            disabled={options.disabled}
+          >
+            <span className="p-p-3">Next</span>
+            <Ripple />
+          </button>
+        );
+      },
+      PageLinks: (options) => {
+        if (
+          (options.view.startPage === options.page &&
+            options.view.startPage !== 0) ||
+          (options.view.endPage === options.page &&
+            options.page + 1 !== options.totalPages)
+        ) {
+          const className = classNames(options.className, { "p-disabled": true });
+
+          return (
+            <span className={className} style={{ userSelect: "none" }}>
+              ...
+            </span>
+          );
         }
-    };
-    const template2 = {
-        layout: 'RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink',
-        'RowsPerPageDropdown': (options) => {
-            const dropdownOptions = [
-                { label: 10, value: 10 },
-                { label: 20, value: 20 },
-                { label: 50, value: 50 }
-            ];
 
-            return (
-                <>
-                    <span className="p-mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>Items per page: </span>
-                    <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} appendTo={document.body} />
-                </>
-            );
-        },
-        'CurrentPageReport': (options) => {
-            return (
-                <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
-                    {options.first} - {options.last} of {options.totalRecords}
-                </span>
-            )
-        }
+        return (
+          <button
+            type="button"
+            className={options.className}
+            onClick={options.onClick}
+          >
+            {options.page + 1}
+            <Ripple />
+          </button>
+        );
+      },
+      RowsPerPageDropdown: (options) => {
+        const dropdownOptions = [
+          { label: 10, value: 10 },
+          { label: 20, value: 20 },
+          { label: 50, value: 50 },
+          { label: "All", value: options.totalRecords }
+        ];
+
+        return (
+          <Dropdown
+            value={options.value}
+            options={dropdownOptions}
+            onChange={options.onChange}
+            appendTo={document.body}
+          />
+        );
+      },
+      CurrentPageReport: (options) => {
+        return (
+          <span
+            className="p-mx-3"
+            style={{ color: "var(--text-color)", userSelect: "none" }}
+          >
+            Go to{" "}
+            <InputText
+              size="2"
+              className="p-ml-1"
+              value={currentPage}
+              tooltip={pageInputTooltip}
+              onKeyDown={(e) => onPageInputKeyDown(e, options)}
+              onChange={onPageInputChange}
+            />
+          </span>
+        );
+      }
     };
 
     return (
-        <div>
-            <div className="card">
-                <h5>Basic</h5>
-                <DataTable value={customers1} paginator
-                    paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
-                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" rows={10} rowsPerPageOptions={[10,20,50]}
-                    paginatorLeft={paginatorLeft} paginatorRight={paginatorRight}>
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country.name" header="Country"></Column>
-                    <Column field="company" header="Company"></Column>
-                    <Column field="representative.name" header="Representative"></Column>
-                </DataTable>
-
-                <h5>Custom Paginator Template</h5>
-                <DataTable value={customers2} paginator paginatorTemplate={template1} first={first1} rows={rows1} onPage={onCustomPage1}>
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country.name" header="Country"></Column>
-                    <Column field="company" header="Company"></Column>
-                    <Column field="representative.name" header="Representative"></Column>
-                </DataTable>
-
-                <DataTable value={customers3} paginator paginatorTemplate={template2} first={first2} rows={rows2} onPage={onCustomPage2}
-                    paginatorClassName="p-jc-end" className="p-mt-6">
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country.name" header="Country"></Column>
-                    <Column field="company" header="Company"></Column>
-                    <Column field="representative.name" header="Representative"></Column>
-                </DataTable>
-            </div>
+      <div>
+        <div className="card">
+          <h5>Custom Paginator Template</h5>
+          <DataTable
+            value={customers2}
+            paginator
+            paginatorTemplate={template1}
+            first={first1}
+            rows={rows1}
+            onPage={onCustomPage1}
+          >
+            <Column field="name" header="Name"></Column>
+            <Column field="country.name" header="Country"></Column>
+            <Column field="company" header="Company"></Column>
+            <Column field="representative.name" header="Representative"></Column>
+          </DataTable>
         </div>
+      </div>
     );
-}
-                `
-            }
-        }
-    }
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation" id="app-doc">
-                <TabView>
-                    {
-                        useLiveEditorTabs({ name: 'DataTablePaginatorDemo', sources: this.sources, service: 'CustomerService', data: 'customers-large' })
-                    }
-                </TabView>
-            </div>
-        )
-    }
-}
+  };