diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 970fa0a..d2e0ed0 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -90,57 +90,6 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
);
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
- const RenderRow = 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]
- )
return (
loading
? (
@@ -150,7 +99,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
)
: (
-
+
{headerGroups.map(headerGroup => (
@@ -202,7 +151,57 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
itemSize={120}
width="100%"
>
- {RenderRow}
+ {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);