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 => (
- <>
+
- >
+
)}
/>
>
diff --git a/frontend/src/components/TableView/TableView.tsx b/frontend/src/components/TableView/TableView.tsx
index 3fe3a2cc..3fad884c 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,12 +484,6 @@ 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
- }
-
const resolveDetailPath = (row: T) => {
if (getDetailPath) return getDetailPath(row)
return `/${url}/${row[idFieldName] as string | number}`
@@ -673,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: {
@@ -728,7 +723,6 @@ export const TableView = ({
}, [
columnFilters,
sorting,
- pagination,
columnVisibility,
selectorFn,
table,
@@ -738,12 +732,24 @@ export const TableView = ({
hasLoadedTableState,
])
+ useEffect(() => {
+ if (!serverSidePagination) return
+ if (data && data.length > 0) {
+ setRowCount(data[0].full_count as number)
+ } else {
+ setRowCount(0)
+ }
+ }, [data, serverSidePagination])
+
useEffect(() => {
if (selectorFn) {
return
}
setIdList(table.getPrePaginationRowModel().rows.map(row => row.original[idFieldName] as string))
-
+ if (serverSidePagination) {
+ // resets pagination when filters or sorting change
+ setPagination(selectorFn ? defaultPaginationSmall : defaultPagination)
+ }
// 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])