Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
juhanikat wants to merge 6 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b0b77b2
fix pagination showing incorrect page amount when filtera are applied
juhanikat Jun 9, 2026
2c4538b
fix issue with occurences table resetting to first page, and make pag…
juhanikat Jun 15, 2026
755b78b
fix error in occurences table menu bar
juhanikat Jun 15, 2026
c216f80
remove pagination from TableView useEffect dependencies to break rere…
juhanikat Jun 15, 2026
06f1646
update server side pagination useEffect with CoPilot
juhanikat Jun 15, 2026
d7ec15b
remove useless else-clause from useEffect
juhanikat Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions frontend/src/components/CrossSearch/CrossSearchTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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>
)}
Comment thread
juhanikat marked this conversation as resolved.
/>
</>
Expand Down
28 changes: 17 additions & 11 deletions frontend/src/components/TableView/TableView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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}`
Expand Down Expand Up @@ -673,8 +668,8 @@ export const TableView = <T extends MRT_RowData>({
onPaginationChange: setPagination,
manualPagination: serverSidePagination,
manualSorting: serverSidePagination,
rowCount: rowCount,
autoResetPageIndex: true,
rowCount: serverSidePagination ? rowCount : undefined,
autoResetPageIndex: !serverSidePagination,
positionPagination: paginationPlacement ?? (selectorFn ? 'top' : 'both'),
paginationDisplayMode: 'pages',
muiTablePaperProps: {
Expand Down Expand Up @@ -728,7 +723,6 @@ export const TableView = <T extends MRT_RowData>({
}, [
columnFilters,
sorting,
pagination,
columnVisibility,
selectorFn,
Comment thread
juhanikat marked this conversation as resolved.
table,
Expand All @@ -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])
Expand Down
Loading