[SOLVED] Primereact Datatable serverside pagination with filters?

Primereact Datatable serverside pagination with filters?

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

Solution

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