Fix tables showing incorrect amount of pages, and some other table issues (#1198)

* fix pagination showing incorrect page amount when filtera are applied

* fix issue with occurences table resetting to first page, and make page numbers accurate in all tables

* fix error in occurences table menu bar

* remove pagination from TableView useEffect dependencies to break rerender loop

* update server side pagination useEffect with CoPilot

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* remove useless else-clause from useEffect

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

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 => (
-          <>
+          <Box>
             <OccurrenceDwcExportMenuItem handleClose={handleClose} />
             <OccurrenceDwcDpExportMenuItem handleClose={handleClose} />
             <OccurrenceFullDarwinCoreExportMenuItem handleClose={handleClose} />
-          </>
+          </Box>
         )}
       />
     </>

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 = <T extends MRT_RowData>({
   } = usePageContext()
   const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>([])
   const [sorting, setSorting] = useState<MRT_SortingState>(defaultSorting ?? [])
+  const [rowCount, setRowCount] = useState(data ? data.length : 0)
   const navigate = useNavigate()
   const [pagination, setPagination] = useState<MRT_PaginationState>(
     selectorFn ? defaultPaginationSmall : defaultPagination
@@ -483,12 +484,6 @@ export const TableView = <T extends MRT_RowData>({
     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 = <T extends MRT_RowData>({
     onPaginationChange: setPagination,
     manualPagination: serverSidePagination,
     manualSorting: serverSidePagination,
-    rowCount: rowCount,
+    rowCount: serverSidePagination ? rowCount : undefined,
-    autoResetPageIndex: true,
+    autoResetPageIndex: !serverSidePagination,
     positionPagination: paginationPlacement ?? (selectorFn ? 'top' : 'both'),
     paginationDisplayMode: 'pages',
     muiTablePaperProps: {
@@ -728,7 +723,6 @@ export const TableView = <T extends MRT_RowData>({
   }, [
     columnFilters,
     sorting,
-    pagination,
     columnVisibility,
     selectorFn,
     table,
@@ -738,12 +732,24 @@ export const TableView = <T extends MRT_RowData>({
     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])