The PageLinks are not functioning while using Paginator of Prime React library

Question

The { FirstPageLink,PrevPageLink, NextPageLink, LastPageLink }, all this pagelinks are visible on the ui part but they are not functioning as expected. The button seems to be disabled, they are not even clickable nor the cursor changes while hovering over the links.

Here is my code of layout

 const template1 = {
        layout: 'Page CurrentPageReport RowsPerPageDropdown FirstPageLink PrevPageLink JumpToPageInput NextPageLink LastPageLink',
        JumpToPageInput: (options) => {
            //console.log(Math.ceil(sessionStorage.getItem("TotalRows") / options.props.rows).toString())

        return (
            <div >
                <span className="mx-3" style={{ color: 'black', userSelect: 'none' }}>
                    Page Number : <InputText size="2" className="ml-1" value={pageno}
                        maxLength={(Math.ceil(sessionStorage.getItem("TotalRows") / perPage)).toString()}
                        tooltip={pageInputTooltip}
                        onKeyDown={(e) => onPageInputKeyDown(e, options)}
                        onChange={(e) => handleGoToPageChange(e.target.value)} /> of {(Math.ceil(sessionStorage.getItem("TotalRows") / perPage)).toString()}
                </span>
                <button id="search-button" className="p-button" onClick={(e) => onPageInputKeyDown(e, options)}> GO </button>
            </div> 
        ); 
    }
    };

And this is how it is rendered

 <DataTable className="gridfont"
                value={filtercontry}
                paginator
                rows={perPage}                
                rowsPerPageOptions={[10, 20, 30, 40, 50, 100]}
                paginatorTemplate={template1}

I did the same thing as mentioned in the document but it did not workout I tried to reinstall all the dependencies again but nothing worked

Answer 1

I think there are two main problems:

1. Rows per page are calculated using the sessionStorage, because I don't have the rest of the code, so it is hard to solve the problem, but it may stop you to change the value of InputText next to 'Page Number :' when you using the property 'maxLength'

2. Using the standard button instead of the PrimeReact Button.

Please have a look on the sample below:

import React, { useState, useEffect } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import { ProductService } from './service/ProductService';

export default function BasicDemo() {
    const [products, setProducts] = useState([]);
    const [pageno, setPageno] = useState(1);
    const [perPage, setPerPage] = useState(2);

    useEffect(() => {
        ProductService.getProductsMini().then(data => setProducts(data));
    }, []);

    const template1 = {
        layout: 'Page CurrentPageReport RowsPerPageDropdown FirstPageLink PrevPageLink JumpToPageInput NextPageLink LastPageLink',
        JumpToPageInput: (options) => {
        return (
            <div >
                <span className="mx-3" style={{ color: 'black', userSelect: 'none' }}>
                    Page Number : <InputText size="2" className="ml-1" value={pageno}                                          
                        onChange={(e) => setPageno(e.target.value)} /> 
                </span>
                <Button id="search-button" className="p-button" onClick={(e) => setPerPage(pageno)} label='Go'/>
            </div> 
        ); 
    }
    };

    return (
        <div className="card">
            <DataTable value={products} tableStyle={{ minWidth: '50rem' }}
            paginator
            rows={perPage}                
            rowsPerPageOptions={[2,10, 20, 30, 40, 50, 100]}
            paginatorTemplate={template1}
            >
                <Column field="code" header="Code"></Column>
                <Column field="name" header="Name"></Column>
                <Column field="category" header="Category"></Column>
                <Column field="quantity" header="Quantity"></Column>
            </DataTable>
        </div>
    );
}

Sample of code