From e4ca2f841da7220a3b1ced44795bb83c607ff366 Mon Sep 17 00:00:00 2001 From: wrigh393 Date: Mon, 19 Apr 2021 10:58:39 -0400 Subject: [PATCH] Added CSS classes to TableBody component to render ItemTable with one vertical scrollbar --- package-lock.json | 26 ++++ package.json | 2 +- src/components/ItemTable/ItemTable.js | 179 ++++++++++---------------- 3 files changed, 98 insertions(+), 109 deletions(-) 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} - - ); - } - }) - ))} - - ); - })} */} +
- + ) ); };