Skip to content
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

Jump to bottom

RouteReportPage.js added table pagination #1133

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

RouteReportPage.js added table pagination #1133

Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5ff21a5
RouteReportPage.js added table pagination
Jun 13, 2023
803a63b
Add Show / Hide Functionality to RouteReportPage.js
Jun 13, 2023
dbef170
Merge branch 'traccar:master' into master
kriistiina Jun 13, 2023
837046a
[fix] Pagination active after 1k records;
Jun 14, 2023
6df31a9
Merge remote-tracking branch 'origin/master' into master
Jun 14, 2023
45d52b1
[fix] show all items when less than 1000;
Jun 20, 2023
16d15e3
[fix] Route report using react-virtuoso with Table component;
Jun 21, 2023
549a3f7
[fix] Route report using react-window FizedSizeGrid component;
Jul 4, 2023
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
28 changes: 26 additions & 2 deletions modern/src/reports/RouteReportPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useState } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import {
IconButton, Table, TableBody, TableCell, TableHead, TableRow,
IconButton, Table, TableBody, TableCell, TableHead, TablePagination, TableRow,
} from '@mui/material';
import GpsFixedIcon from '@mui/icons-material/GpsFixed';
import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
Expand Down Expand Up @@ -38,7 +38,19 @@ const RouteReportPage = () => {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(false);
const [selectedItem, setSelectedItem] = useState(null);
//
kriistiina marked this conversation as resolved.
Show resolved Hide resolved
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(100);
kriistiina marked this conversation as resolved.
Show resolved Hide resolved

const handleChangePage = (event, newPage) => {
setPage(newPage);
};
kriistiina marked this conversation as resolved.
Show resolved Hide resolved

const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use proper explicit conversion and only if needed. I would also inline it.

setPage(0);
};
//
const onMapPointClick = useCallback((positionId) => {
setSelectedItem(items.find((it) => it.id === positionId));
}, [items, setSelectedItem]);
Expand Down Expand Up @@ -137,7 +149,7 @@ const RouteReportPage = () => {
</TableRow>
</TableHead>
<TableBody>
{!loading ? items.slice(0, 4000).map((item) => (
{!loading ? items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item) => (
<TableRow key={item.id}>
<TableCell className={classes.columnAction} padding="none">
{selectedItem === item ? (
Expand All @@ -164,6 +176,18 @@ const RouteReportPage = () => {
)) : (<TableShimmer columns={columns.length + 2} startAction />)}
</TableBody>
</Table>
{items.length > 100 && (
<TablePagination
sx={{ position: 'sticky', bottom: 0, left: 0, backgroundColor: 'Background' }}
kriistiina marked this conversation as resolved.
Show resolved Hide resolved
rowsPerPageOptions={[100, 150, 200]}
kriistiina marked this conversation as resolved.
Show resolved Hide resolved
component="div"
count={items.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
)}
</div>
</div>
</PageLayout>
Expand Down