Skip to content

Commit

Permalink
Rough implementation of virtualization.
Browse files Browse the repository at this point in the history
  • Loading branch information
@wrigh393
wrigh393 committed Apr 9, 2021
1 parent 779f616 commit dd297ac
Showing 1 changed file with 91 additions and 34 deletions.
125 changes: 91 additions & 34 deletions src/components/ItemTable/ItemTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { memo, useState } from "react";
import PropTypes from "prop-types";
import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Box, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
Expand All @@ -9,6 +9,7 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
import ItemTableCell from "../ItemTableCell";
import LastUpdatedCell from "../LastUpdatedCell/";
import jester from "./loading-annimation.gif";
import { FixedSizeList, areEqual } from 'react-window';

export default function ItemTable({ data, rowCanBeSelected, loading }) {
const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
Expand All @@ -22,7 +23,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
},
hoverBackgroundColor: {
"&:hover": {
// The !important is placed here to enforce CSS specificity.
// The !important is placed here to enforce CSS specificity.
// See: https://material-ui.com/styles/advanced/#css-injection-order
backgroundColor: `${theme.palette.primary[200]} !important`,
},
Expand Down Expand Up @@ -89,28 +90,75 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
);
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;

return (
loading
? (
<Box className={classes.loadingAnnimation}>
<img src={jester} alt="Items are loading." />
</Box>
const RenderRow = memo(({ index, style }) => {
const row = rows[index]
prepareRow(row)
let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
return (
<TableRow
style={style}
hover
onClick={() => {
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 (
<ItemTableCell TableCellProps={cell.getCellProps()}>
<RelativeTime value={cell.value} />
</ItemTableCell>
);
case "lastUpdated":
return (
<LastUpdatedCell
time={cell.value}
ItemTableCellProps={cell.getCellProps()}
/>
);
default:
return (
<ItemTableCell TableCellProps={cell.getCellProps()}>
{cell.value}
</ItemTableCell>
);
}
})
))}
</TableRow>
)
: (
<TableContainer>
<Table
{...getTableProps}
aria-label="Table of Queue Items"
size="small"
>
<TableHead>
{headerGroups.map(headerGroup => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<TableCell {...column.getHeaderProps()}>
}, areEqual,
[prepareRow, rows]
)
return (
loading
? (
<Box className={classes.loadingAnnimation}>
<img src={jester} alt="Items are loading." />
</Box>
)
: (
<TableContainer>
<Table stickyHeader {...getTableProps()} className="table" size="small">
<TableHead>
{headerGroups.map(headerGroup => (
<TableRow {...headerGroup.getHeaderGroupProps()} className="tr">
{headerGroup.headers.map(column => (
<TableCell {...column.getHeaderProps()} className="th">
<Grid container spacing={0}>
<Grid item sm={10} >
{column.render("Filter")}
<Grid item sm={10}>
{column.render('Filter')}
</Grid>
<Grid item sm={2} alignItems='center' justify='center'>
<ButtonGroup orientation="vertical" size="small">
Expand Down Expand Up @@ -142,12 +190,21 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
</Grid>
</Grid>
</TableCell>
))}
</TableRow>
))}
</TableHead>
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
))}
</TableRow>
))}
</TableHead>

<TableBody {...getTableBodyProps()}>
<FixedSizeList
height={800}
itemCount={rows.length}
itemSize={120}
width="100%"
>
{RenderRow}
</FixedSizeList>
{/* {rows.map((row) => {
prepareRow(row);
let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
return (
Expand All @@ -157,7 +214,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
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
// 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={{
Expand Down Expand Up @@ -193,11 +250,11 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
))}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)
})} */}
</TableBody>
</Table>
</TableContainer>
)
);
};

Expand Down

0 comments on commit dd297ac

Please sign in to comment.