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
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.