Primereact Datatable serverside pagination with filters?

Question

I am using primereact and I want to improve the performance of the table so I wanted to make it serverside paginations but I have some issues the server-side pagination works with this code but the filters stopped also the download CSV I want it to download all the data that is filtered not just the 25 that is rendered on the screen , how can I achieve this ?

useEffect(() => {
  setFiltered(filteredData)
},[filteredData])
    <DataTable
      scrollable
      size="small"
      scrollHeight="auto"
      className="datatable"
      dataKey="id"
      sortIcon={<PiSortDescendingBold />}
      exportFilename={`${new Date().toLocaleDateString()}`}
      value={filteredData}
      ref={ref as any}
      sortMode="single"
      paginator
      lazy
      loading={loading}
      first={first}
      rows={rows}
      onPage={e => {
        setFirst(e.first)
        setRows(e.rows)
      }}
      totalRecords={count}
      rowsPerPageOptions={[10, 25, 50, 100]}
      paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
      paginatorLeft
      currentPageReportTemplate="{first} to {last} of {totalRecords}"
      emptyMessage="No Data !"
      onValueChange={e => setFiltered(e)}
   // columns
    </DataTable>

the first,rows is a useState that has a number inside , setFiltered is an empty array useState & count comes from total count from the database

Answer 1

Full working example using Server Side REST API for PrimeReact DataTable Sorts, Filters, Paging, etc.

Includes REST Server and serves the UI code all in one example.

See: https://github.com/melloware/quarkus-primereact