diff --git a/package-lock.json b/package-lock.json
index b55a011..0187268 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12399,6 +12399,11 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
+ "react-lifecycles-compat": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+ },
"react-redux": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.1.tgz",
@@ -13430,6 +13435,19 @@
"prop-types": "^15.6.2"
}
},
+ "react-virtualized": {
+ "version": "9.22.3",
+ "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz",
+ "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==",
+ "requires": {
+ "@babel/runtime": "^7.7.2",
+ "clsx": "^1.0.4",
+ "dom-helpers": "^5.1.3",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.7.2",
+ "react-lifecycles-compat": "^3.0.4"
+ }
+ },
"react-virtualized-auto-sizer": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz",
@@ -13444,6 +13462,14 @@
"memoize-one": ">=3.1.1 <6"
}
},
+ "react-window-scroller": {
+ "version": "1.0.10",
+ "resolved": "https://registry.npmjs.org/react-window-scroller/-/react-window-scroller-1.0.10.tgz",
+ "integrity": "sha512-pgFX6O51cq7JmNVFcho9990dBHJJGgfGXucby7tviTrKqp/CJaKzt5AONYJ3SqWeBMh+N7/W9tvIl/7oMjq+2Q==",
+ "requires": {
+ "lodash": "^4.17.20"
+ }
+ },
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
diff --git a/package.json b/package.json
index 2c8ea37..f3f3f4d 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-table": "^7.5.1",
- "react-virtualized-auto-sizer": "^1.0.5",
+ "react-virtualized": "^9.22.3",
"react-window": "^1.8.6"
},
"scripts": {
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index d2e0ed0..67c27db 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -10,6 +10,7 @@ import ItemTableCell from "../ItemTableCell";
import LastUpdatedCell from "../LastUpdatedCell/";
import jester from "./loading-annimation.gif";
import { FixedSizeList, areEqual } from 'react-window';
+import { AutoSizer } from "react-virtualized";
export default function ItemTable({ data, rowCanBeSelected, loading }) {
const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
@@ -41,6 +42,10 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
borderLeftStyle: "solid",
borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
},
+ VirtualizedTableHeight: {
+ // The !important is placed here to enforce CSS specificity.
+ height: '82vh !important'
+ },
});
const classes = useStyles();
@@ -60,7 +65,6 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
{ Header: 'Department', accessor: 'department' },
{ Header: 'Building', accessor: 'building' },
{ Header: 'Date Received', accessor: 'dateReceived', sortInverted: true, Cell: ({ value }) => },
-
], []);
const tableInstance = useTable(
{
@@ -99,7 +103,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
)
: (
-
+
{headerGroups.map(headerGroup => (
@@ -144,115 +148,74 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
))}
-
-
- {memo(({ index, style }) => {
- const row = rows[index]
- prepareRow(row)
- let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
- return (
- {
- history.push(`/${row.original.queue}/${row.original.number}`);
- setSelectedRow({ queue: row.original.queue, number: row.original.number });
- }}
- // This functionality should be achieved by using the selected prop and
- // overriding the selected class but this applied the secondary color at 0.08% opacity.
- // Overridding the root class is a workaround.
- classes={{
- root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
- hover: classes.hoverBackgroundColor
- }}
- {...row.getRowProps({ style, })}
- >
- {row.cells.map(cell => (
- cell.render(_ => {
- switch (cell.column.id) {
- case "dateReceived":
- return (
-
-
-
- );
- case "lastUpdated":
- return (
-
- );
- default:
- return (
-
- {cell.value}
-
- );
- }
- })
- ))}
-
- );
- }, areEqual,
- [prepareRow, rows]
+
+
+ {({ height,width }) => (
+
+ {memo(({ index, style }) => {
+ const row = rows[index]
+ prepareRow(row)
+ let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
+ return (
+ {
+ history.push(`/${row.original.queue}/${row.original.number}`);
+ setSelectedRow({ queue: row.original.queue, number: row.original.number });
+ }}
+ // This functionality should be achieved by using the selected prop and
+ // overriding the selected class but this applied the secondary color at 0.08% opacity.
+ // Overridding the root class is a workaround.
+ classes={{
+ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
+ hover: classes.hoverBackgroundColor
+ }}
+ {...row.getRowProps({
+ style,
+ })}
+ >
+ {row.cells.map(cell => (
+ cell.render(_ => {
+ switch (cell.column.id) {
+ case "dateReceived":
+ return (
+
+
+
+ );
+ case "lastUpdated":
+ return (
+
+ );
+ default:
+ return (
+
+ {cell.value}
+
+ );
+ }
+ })
+ ))}
+
+ );
+ }, areEqual, [prepareRow, rows]
+ )}
+
)}
-
- {/* {rows.map((row) => {
- prepareRow(row);
- let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
- return (
- {
- history.push(`/${row.original.queue}/${row.original.number}`);
- setSelectedRow({ queue: row.original.queue, number: row.original.number });
- }}
- // This functionality should be achieved by using the selected prop and
- // overriding the selected class but this applied the secondary color at 0.08% opacity.
- // Overridding the root class is a workaround.
- classes={{
- root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
- hover: classes.hoverBackgroundColor
- }}
- {...row.getRowProps()}
- >
- {row.cells.map(cell => (
- cell.render(_ => {
- switch (cell.column.id) {
- case "dateReceived":
- return (
-
-
-
- );
- case "lastUpdated":
- return (
-
- );
- default:
- return (
-
- {cell.value}
-
- );
- }
- })
- ))}
-
- );
- })} */}
+
-
+
)
);
};