text: import React, { useState, useEffect, memo } from 'react';
  import { DataTable } from '../../components/lib/datatable/DataTable';
  import { Column } from '../../components/lib/column/Column';
  import { TabView } from '../../components/lib/tabview/TabView';
  import { useLiveEditorTabs } from '../../components/doc/common/liveeditor';
  import { CustomerService } from '../../service/CustomerService';
  import { classNames } from '../../components/lib/utils/ClassNames';
  import { Button } from '../../components/lib/button/Button';
  import { Ripple } from '../../components/lib/ripple/Ripple';
  import { Dropdown } from '../../components/lib/dropdown/Dropdown';
  import { InputText } from '../../components/lib/inputtext/InputText';
  import { DocActions } from '../../components/doc/common/docactions';
  import Head from 'next/head';
  
  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);
      }
  
      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-3">Previous</span>
                      <Ripple />
                  </button>
              )
          },
          'NextPageLink': (options) => {
              return (
                  <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
                      <span className="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} />;
          },
          'CurrentPageReport': (options) => {
              return (
                  <span className="mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
                      Go to <InputText size="2" className="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 (
                  <React.Fragment>
                      <span className="mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>Items per page: </span>
                      <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />
                  </React.Fragment>
              );
          },
          '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>
              <Head>
                  <title>React Table Component - Paginator</title>
                  <meta name="description" content="Pagination is enabled by setting paginator property to true." />
              </Head>
              <div className="content-section introduction">
                  <div className="feature-intro">
                      <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>
                  </div>
  
                  <DocActions github="datatable/paginator.js" />
              </div>
  
              <div className="content-section implementation">
                  <div className="card">
                      <h5>Basic</h5>
                      <DataTable value={customers1} paginator responsiveLayout="scroll"
                          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>
                  </div>
  
                  <div className="card">
                      <h5>Custom Paginator Template</h5>
                      <DataTable value={customers2} paginator paginatorTemplate={template1} first={first1} rows={rows1} onPage={onCustomPage1} responsiveLayout="scroll">
                          <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="justify-content-end" className="mt-6" responsiveLayout="scroll">
                          <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 default DataTablePaginatorDemo;
  
  const DataTablePaginatorDemoDoc = memo(() => {
  
      const 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 { 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-3">Previous</span>
                          <Ripple />
                      </button>
                  )
              },
              'NextPageLink': (options) => {
                  return (
                      <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
                          <span className="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} />;
              },
              'CurrentPageReport': (options) => {
                  return (
                      <span className="mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
                          Go to <InputText size="2" className="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 (
                      <React.Fragment>
                          <span className="mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>Items per page: </span>
                          <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />
                      </React.Fragment>
                  );
              },
              '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 responsiveLayout="scroll"
                          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>
                  </div>
  
                  <div className="card">
                      <h5>Custom Paginator Template</h5>
                      <DataTable value={this.state.customers2} paginator paginatorTemplate={template1} first={this.state.first1} rows={this.state.rows1} onPage={this.onCustomPage1} responsiveLayout="scroll">
                          <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="justify-content-end" className="mt-6" responsiveLayout="scroll">
                          <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 { 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);
      }
  
      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-3">Previous</span>
                      <Ripple />
                  </button>
              )
          },
          'NextPageLink': (options) => {
              return (
                  <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
                      <span className="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} />;
          },
          'CurrentPageReport': (options) => {
              return (
                  <span className="mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
                      Go to <InputText size="2" className="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 (
                  <React.Fragment>
                      <span className="mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>Items per page: </span>
                      <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />
                  </React.Fragment>
              );
          },
          '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 responsiveLayout="scroll"
                      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>
              </div>
  
              <div className="card">
                  <h5>Custom Paginator Template</h5>
                  <DataTable value={customers2} paginator paginatorTemplate={template1} first={first1} rows={rows1} onPage={onCustomPage1} responsiveLayout="scroll">
                      <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="justify-content-end" className="mt-6" responsiveLayout="scroll">
                      <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>
      );
  }
                  `
          },
          '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 { 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);
      }
  
      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-3">Previous</span>
                      <Ripple />
                  </button>
              )
          },
          'NextPageLink': (options) => {
              return (
                  <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
                      <span className="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} />;
          },
          'CurrentPageReport': (options) => {
              return (
                  <span className="mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
                      Go to <InputText size="2" className="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 (
                  <React.Fragment>
                      <span className="mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>Items per page: </span>
                      <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />
                  </React.Fragment>
              );
          },
          '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 responsiveLayout="scroll"
                      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>
              </div>
  
              <div className="card">
                  <h5>Custom Paginator Template</h5>
                  <DataTable value={customers2} paginator paginatorTemplate={template1} first={first1} rows={rows1} onPage={onCustomPage1} responsiveLayout="scroll">
                      <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="justify-content-end" className="mt-6" responsiveLayout="scroll">
                      <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>
      );
  }
                  `
          },
          'browser': {
              tabName: 'Browser Source',
              imports: `
          <script src="./CustomerService.js"></script>
  
          <script src="https://unpkg.com/primereact/api/api.min.js"></script>
          <script src="https://unpkg.com/primereact/core/core.min.js"></script>
          <script src="https://unpkg.com/primereact/dropdown/dropdown.min.js"></script>
          <script src="https://unpkg.com/primereact/inputtext/inputtext.min.js"></script>
          <script src="https://unpkg.com/primereact/paginator/paginator.min.js"></script>
          <script src="https://unpkg.com/primereact/virtualscroller/virtualscroller.min.js"></script>
          <script src="https://unpkg.com/primereact/column/column.min.js"></script>
          <script src="https://unpkg.com/primereact/datatable/datatable.min.js"></script>
          <script src="https://unpkg.com/primereact/button/button.min.js"></script>`,
              content: `
  const { useEffect, useState } = React;
  const { Column } = primereact.column;
  const { DataTable } = primereact.datatable;
  const { Button } = primereact.button;
  const { Dropdown } = primereact.dropdown;
  const { InputText } = primereact.inputtext;
  const { Ripple, classNames } = primereact.core;
  
  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);
      }
  
      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-3">Previous</span>
                      <Ripple />
                  </button>
              )
          },
          'NextPageLink': (options) => {
              return (
                  <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
                      <span className="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} />;
          },
          'CurrentPageReport': (options) => {
              return (
                  <span className="mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
                      Go to <InputText size="2" className="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 (
                  <React.Fragment>
                      <span className="mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>Items per page: </span>
                      <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />
                  </React.Fragment>
              );
          },
          '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 responsiveLayout="scroll"
                      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>
              </div>
  
              <div className="card">
                  <h5>Custom Paginator Template</h5>
                  <DataTable value={customers2} paginator paginatorTemplate={template1} first={first1} rows={rows1} onPage={onCustomPage1} responsiveLayout="scroll">
                      <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="justify-content-end" className="mt-6" responsiveLayout="scroll">
                      <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>
      );
  }
                  `
          }
      }
  
      return (
          <div className="content-section documentation" id="app-doc">
              <TabView>
                  {
                      useLiveEditorTabs({ name: 'DataTablePaginatorDemo', sources: sources, service: 'CustomerService', data: 'customers-large' })
                  }
              </TabView>
          </div>
      )
  })
  