From b0b77b2bbf1b54486a560f8c6c39cb91cd61eb62 Mon Sep 17 00:00:00 2001 From: juhanikat Date: Tue, 9 Jun 2026 16:12:15 +0300 Subject: [PATCH 1/6] fix pagination showing incorrect page amount when filtera are applied --- frontend/src/components/TableView/TableView.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/TableView/TableView.tsx b/frontend/src/components/TableView/TableView.tsx index 3fe3a2cc..90f959ba 100755 --- a/frontend/src/components/TableView/TableView.tsx +++ b/frontend/src/components/TableView/TableView.tsx @@ -15,7 +15,7 @@ import { import { Alert, Box, CircularProgress, Paper, Tooltip } from '@mui/material' import type { FetchBaseQueryError } from '@reduxjs/toolkit/query' import type { SerializedError } from '@reduxjs/toolkit' -import type { FilterFn } from '@tanstack/table-core' +import { type FilterFn } from '@tanstack/table-core' import { useLocation, useNavigate } from 'react-router-dom' import { ActionComponent } from './ActionComponent' import { usePageContext } from '../Page' @@ -249,6 +249,7 @@ export const TableView = ({ } = usePageContext() const [columnFilters, setColumnFilters] = useState([]) const [sorting, setSorting] = useState(defaultSorting ?? []) + const [rowCount, setRowCount] = useState(data ? data.length : 0) const navigate = useNavigate() const [pagination, setPagination] = useState( selectorFn ? defaultPaginationSmall : defaultPagination @@ -483,10 +484,8 @@ export const TableView = ({ document.title = `${title}` } - let rowCount = undefined if (data && data.length > 0) { - if (serverSidePagination) rowCount = data[0].full_count as number - else rowCount = data.length + if (serverSidePagination) setRowCount(data[0].full_count as number) } const resolveDetailPath = (row: T) => { @@ -743,6 +742,7 @@ export const TableView = ({ return } setIdList(table.getPrePaginationRowModel().rows.map(row => row.original[idFieldName] as string)) + setRowCount(table.getPrePaginationRowModel().rows.length) // Don't put setIdList in the dependency array: it will cause re-render loop. // eslint-disable-next-line react-hooks/exhaustive-deps From 2c4538b7a621b3e2af23e6cffcdf1b966adfa966 Mon Sep 17 00:00:00 2001 From: juhanikat Date: Mon, 15 Jun 2026 15:14:44 +0300 Subject: [PATCH 2/6] fix issue with occurences table resetting to first page, and make page numbers accurate in all tables --- .../src/components/TableView/TableView.tsx | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/TableView/TableView.tsx b/frontend/src/components/TableView/TableView.tsx index 90f959ba..17e011b2 100755 --- a/frontend/src/components/TableView/TableView.tsx +++ b/frontend/src/components/TableView/TableView.tsx @@ -484,10 +484,6 @@ export const TableView = ({ document.title = `${title}` } - if (data && data.length > 0) { - if (serverSidePagination) setRowCount(data[0].full_count as number) - } - const resolveDetailPath = (row: T) => { if (getDetailPath) return getDetailPath(row) return `/${url}/${row[idFieldName] as string | number}` @@ -672,8 +668,8 @@ export const TableView = ({ onPaginationChange: setPagination, manualPagination: serverSidePagination, manualSorting: serverSidePagination, - rowCount: rowCount, - autoResetPageIndex: true, + rowCount: serverSidePagination ? rowCount : undefined, + autoResetPageIndex: !serverSidePagination, positionPagination: paginationPlacement ?? (selectorFn ? 'top' : 'both'), paginationDisplayMode: 'pages', muiTablePaperProps: { @@ -737,13 +733,28 @@ export const TableView = ({ hasLoadedTableState, ]) + useEffect(() => { + if (serverSidePagination) { + if (data && data.length > 0) { + setRowCount(data[0].full_count as number) + } else { + setRowCount(0) + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [data]) + useEffect(() => { if (selectorFn) { return } setIdList(table.getPrePaginationRowModel().rows.map(row => row.original[idFieldName] as string)) - setRowCount(table.getPrePaginationRowModel().rows.length) - + // resets pagination when filters or sorting change + if (serverSidePagination) { + setPagination(selectorFn ? defaultPaginationSmall : defaultPagination) + } else { + setRowCount(table.getPrePaginationRowModel().rows.length) + } // Don't put setIdList in the dependency array: it will cause re-render loop. // eslint-disable-next-line react-hooks/exhaustive-deps }, [table, columnFilters, sorting]) From 755b78b94145142d39349141927b1da87cc98f4d Mon Sep 17 00:00:00 2001 From: juhanikat Date: Mon, 15 Jun 2026 15:16:59 +0300 Subject: [PATCH 3/6] fix error in occurences table menu bar --- frontend/src/components/CrossSearch/CrossSearchTable.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/CrossSearch/CrossSearchTable.tsx b/frontend/src/components/CrossSearch/CrossSearchTable.tsx index 25764ab2..3fa150fd 100755 --- a/frontend/src/components/CrossSearch/CrossSearchTable.tsx +++ b/frontend/src/components/CrossSearch/CrossSearchTable.tsx @@ -16,6 +16,7 @@ import { exportOccurrenceMapSvg, getUniqueCrossSearchMapExportLocalities, } from '@/components/Species/localitySpeciesMapExport' +import { Box } from '@mui/material' const LocalitiesMap = lazy(async () => { const module = await import('../Map/LocalitiesMap') @@ -1119,11 +1120,11 @@ export const CrossSearchTable = ({ selectorFn }: { selectorFn?: (newObject: Cros isError={isError} error={error} renderExtraExportMenuItems={handleClose => ( - <> + - + )} /> From c216f8036478118b6bfa97dd75daeeeeb6fafff1 Mon Sep 17 00:00:00 2001 From: juhanikat Date: Mon, 15 Jun 2026 15:39:16 +0300 Subject: [PATCH 4/6] remove pagination from TableView useEffect dependencies to break rerender loop --- frontend/src/components/TableView/TableView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/TableView/TableView.tsx b/frontend/src/components/TableView/TableView.tsx index 17e011b2..503d0194 100755 --- a/frontend/src/components/TableView/TableView.tsx +++ b/frontend/src/components/TableView/TableView.tsx @@ -723,7 +723,6 @@ export const TableView = ({ }, [ columnFilters, sorting, - pagination, columnVisibility, selectorFn, table, From 06f1646dec915bf1e27e1e3c06a4048c7dd4e164 Mon Sep 17 00:00:00 2001 From: juhanikat Date: Mon, 15 Jun 2026 16:13:18 +0300 Subject: [PATCH 5/6] update server side pagination useEffect with CoPilot Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- frontend/src/components/TableView/TableView.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/TableView/TableView.tsx b/frontend/src/components/TableView/TableView.tsx index 503d0194..3946471f 100755 --- a/frontend/src/components/TableView/TableView.tsx +++ b/frontend/src/components/TableView/TableView.tsx @@ -733,15 +733,13 @@ export const TableView = ({ ]) useEffect(() => { - if (serverSidePagination) { - if (data && data.length > 0) { - setRowCount(data[0].full_count as number) - } else { - setRowCount(0) - } + if (!serverSidePagination) return + if (data && data.length > 0) { + setRowCount(data[0].full_count as number) + } else { + setRowCount(0) } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [data]) + }, [data, serverSidePagination]) useEffect(() => { if (selectorFn) { From d7ec15bd4cc7df3612c66f35907e92946e13639a Mon Sep 17 00:00:00 2001 From: juhanikat Date: Mon, 15 Jun 2026 16:48:03 +0300 Subject: [PATCH 6/6] remove useless else-clause from useEffect --- frontend/src/components/TableView/TableView.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/components/TableView/TableView.tsx b/frontend/src/components/TableView/TableView.tsx index 3946471f..3fad884c 100755 --- a/frontend/src/components/TableView/TableView.tsx +++ b/frontend/src/components/TableView/TableView.tsx @@ -746,11 +746,9 @@ export const TableView = ({ return } setIdList(table.getPrePaginationRowModel().rows.map(row => row.original[idFieldName] as string)) - // resets pagination when filters or sorting change if (serverSidePagination) { + // resets pagination when filters or sorting change setPagination(selectorFn ? defaultPaginationSmall : defaultPagination) - } else { - setRowCount(table.getPrePaginationRowModel().rows.length) } // Don't put setIdList in the dependency array: it will cause re-render loop. // eslint-disable-next-line react-hooks/exhaustive-deps