RouteReportPage.js added table pagination

[kriistiina]

[fix] Browser slowdown after executing a Route report with large number of records; The 4000 row preview slice limit is removed.

Forum Discussion Library used: Material-UI table pagination

This is an initial version using the MUI example for table pagination. Additional features/behavior may be added after discussion and approval.

[tananaev]

I think we discussed making it optional if there number exceeds some limit.

Can you also provide screenshots of what it looks like in desktop and mobile views.

[kriistiina]

Yes, with some customization, the pagination component can be shown or hidden on a condition. With the changes I just added, the initial views of Route report look like this for desktop and mobile.

After execution of Route report with large number of records, the pagination component is shown and looks like this for desktop and mobile.

On a following report execution, the pagination component is shown or hidden, based on the number of records in the new report. Reports with less records than the first pagination step do not contain pagination and look like this for desktop and mobile.

[kriistiina]

@tananaev Sorry about the delay, I was on a business trip last few days. I fixed the issue regarding the visualization of all items when their count is less than 1000 and made the .slice conditional only if the items count exceeds 1000.

[tananaev]

What do you think about the comment of using the "react-window" or something similar? The same way we do on the main screen for devices.

[kriistiina]

I used react-virtuoso to load all report items in a Table component, based on this example. This way, the behavior stays close to the one before with infinite scroll, but without the browser slowdown.

[kriistiina]

I managed to visualize the Route report by using the FixedSizeGrid component from react-window and removed the additional react-virtuoso.