How can I implement PrimeReact DataTable lazy load

Question

I'd like display data in PrimeReact (v9.3.1) DataTable with lazy load. Code is here:

const [questionAnswerValues, setQuestionAnswerValues] = useState([]);
const [editedRow, setEditedRow] = useState<any>({});
const [selectedRow, setSelectedRow] = useState<any>({});
const [lazyLoading, setLazyLoading] = useState(false);

useEffect(() => {
    fetchRange(0,20);
}, []);

const fetchRange = (first: number, last: number) => {
    fetch(`/api/questionanswer/slice?first=${first}&last=${last}`).then((response) => response.json()).then(data => {
        console.log(data);
        data = [...questionAnswerValues, data];
        //setQuestionAnswerValues(data); //generate infinite render requests !!!
        setLazyLoading(false);
    });
}
const loadQuestionAnswerLazy = (event: any) => {
    console.log(JSON.stringify(event));
    let { first, last } = event;
    if (last !== 0) {
        fetchRange(first, last);
    }
}

Data table looks like this:

        <DataTable value={questionAnswerValues} responsiveLayout="scroll" selectionMode="single" selection={selectedRow}
            onSelectionChange={(e) => setSelectedRow(e.value)} scrollable scrollHeight="400px"
            virtualScrollerOptions={{ lazy: true, onLazyLoad: loadQuestionAnswerLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading }}
            tableStyle={{ minWidth: '50rem' }}>
            <Column selectionMode="single" header="Select one"></Column>
            <Column field="_id" header="ID"></Column>
            <Column field="question_id.question" header="Question"></Column>
            <Column field="answer" header="Answer"></Column>
            <Column field="isCorrect" header="IsCorrect"></Column>
        </DataTable>

First question is: How should I update data values without infinite rendering.

Second question is: Appending like data = [...questionAnswerValues, data] not usable. How can I append data to questionAnswerValues?

Third question: is there any react datatable implementation that can show records that is appended without hide already loaded records?

score 0 · Answer 1 · answered May 13 '23 at 15:26

I have a fully working full PrimeReact Lazy Datatable example using a real REST Service and PostgresQL database.

Project: https://github.com/melloware/quarkus-monorepo

Lazty DataTable page specifically if you only care to look at the PrimeReact code: https://github.com/melloware/quarkus-monorepo/blob/main/src/main/webui/src/CrudPage.tsx

How can I implement PrimeReact DataTable lazy load

1 Answers1