DataTable Wrong highlighting on pagination dropdown

[ncavallini]

Describe the bug

Hi all,
I've implemented a DataTable with server-side pagination (lazy loading) successfully. There's a little UI bug though (which I may have introduced myself) that the "current page" highlighting at the bottom (the blue square) is stuck at Page 1, and does not update. This also reflects on the fact that when I click >> or << the numbers do not increase (they rimain 1..5).

Here's my code:

import {useQuery} from "react-query";
import {Page} from "../../api/Page.ts";
import {Customer} from "../../api/customers/Customer.ts";
import {Spinner} from "react-bootstrap";
import {DataTable} from "primereact/datatable";
import {useState} from "react";
import {Pageable} from "../../api/Pageable.ts";
import {CustomerService} from "../../api/customers/CustomerService.ts";
import {Column} from "primereact/column";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faIndustry, faUser} from "@fortawesome/free-solid-svg-icons";
import {DATE_TIME_FORMATTER} from "../../api/Utils.ts";

export default function CustomersTable() {
    const [pageable, setPageable] = useState<Pageable>({page: 0, rows: 20})
    const customersQuery = useQuery<Page<Customer>>({
        queryKey: ["customers", {pageable}],
        queryFn: () => CustomerService.get(pageable)
    })
    if(customersQuery.isLoading) return <div className="center"><Spinner variant={"primary"}></Spinner></div>
    if(customersQuery.isError) return null;
    return (
        <>
                <DataTable
                    showGridlines={true}
                    stripedRows={true}
                    value={customersQuery.data!.content}
                    tableStyle={{ minWidth: '50rem' }}
                    lazy={true}
                    totalRecords={customersQuery.data!.totalElements}
                    dataKey={"id"}
                    paginator={true}
                    rows={pageable.rows}
                    rowsPerPageOptions={[20, 50, 100]}
                    onPage={(e) => {
                        setPageable({page: e.page!, rows: e.rows})
                        console.log(e)
                    }
                    }
                >
                    <Column field={"fullName"} header={"Nome e cognome"} body={(customer : Customer) => `${customer.firstName} ${customer.lastName}`}></Column>
                    <Column field={"internalNumber"} header={"Numero Cliente"}></Column>
                    <Column field={"isCompany"} header={"Privato/Azienda"} align={"center"} body={(c: Customer) =>  <FontAwesomeIcon icon={c.gender === "COMPANY" ? faIndustry : faUser} />}></Column>
                    <Column field={"address"} header={"Indirizzo"} body={(c: Customer) => `${c.street}, ${c.postCode} ${c.city}, ${c.country}`}></Column>
                    <Column field={"phone"} header={"Telefono"}></Column>
                    <Column field={"emailAddress"} header={"Indirizzo e-mail"}></Column>
                    <Column field={"emailAlias"} header={<span>Alias <pre style={{display: "inline"}}>@*.pcngroup.ch</pre></span>}></Column>
                    <Column field={"createdAt"} header={"Ultima modifica"} body={(c : Customer) => DATE_TIME_FORMATTER.format(new Date(c.createdAt))}></Column>
                </DataTable>
        </>
    )
}

pageable is a state, so each time it changes, the whole component reloads. Is maybe this the root of the problem?

Thank you for your feedback.
Best. NC

Reproducer

No response

PrimeReact version

10.3.2

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Try changing the page by clicking the bottom selector. It doesn't update (but the data DOES)

Expected behavior

The page selector should update to highlight current page and to show previous/next page.

[ncavallini]

Please fork the CodeSandbox project or Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

Sure, here is a Minimal Example: CodeSandbox

[melloware]

@ncavallini i see now. It is because you are not using the table correctly. You are trying to control the paging yourself while swapping out the table underneath. That is not the correct what to "page using an API". That example is here using the Lazy example:

https://primereact.org/datatable/#lazy_load

That is the proper way to "page" with an API.

[ncavallini]

@melloware I checked the example you mentioned on the website, but this doesn't work either, because (at least in TypeScript) there are some errors when running it i.e., in Stackblitz. For example: Argument of type 'DataTablePageEvent' is not assignable to parameter of type 'SetStateAction<LazyTableState>'. Property 'filters' is missing in type 'DataTablePageEvent' but required in type 'LazyTableState' in the onPage function. I find it weird to say the least that examples don't work even on your site

[melloware]

@ncavallini the TypeScript examples are not currently fully working see : #5800

But I have a fully working Lazy example with REST Service in TypesScript: https://github.com/melloware/quarkus-primereact

If you want to look at the actual code its here: https://github.com/melloware/quarkus-primereact/blob/main/src/main/webui/src/CrudPage.tsx

Its 100% typescript and Sorts, Paging, Filtering, all work lazy

[ncavallini]

This looks great, thanks! Sorry for not knowing about #5800 :)

[melloware]

if you are a Java guy you can literally run the entire project with 1 command mvn quarkus:dev

[ncavallini]

Well, I am, and I was digging right into it

[melloware]

You will fall in love with Quarkus if you have never used it....