Skip to content

Commit

Permalink
Added CSS classes to TableBody component to render ItemTable with one…
Browse files Browse the repository at this point in the history 
… vertical scrollbar
  • Loading branch information
@wrigh393
wrigh393 committed Apr 19, 2021
1 parent b499f8d commit e4ca2f8
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 109 deletions.
26 changes: 26 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
179 changes: 71 additions & 108 deletions src/components/ItemTable/ItemTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
Expand Down Expand Up @@ -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();

Expand All @@ -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 }) => <RelativeTime value={value} /> },

], []);
const tableInstance = useTable(
{
Expand Down Expand Up @@ -99,7 +103,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
)
: (
<TableContainer>
<Table stickyHeader {...getTableProps()} className="table" size="small">
<Table stickyHeader {...getTableProps()} size="small">
<TableHead>
{headerGroups.map(headerGroup => (
<TableRow {...headerGroup.getHeaderGroupProps()} className="tr">
Expand Down Expand Up @@ -144,115 +148,74 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
))}
</TableHead>

<TableBody {...getTableBodyProps()}>
<FixedSizeList
height={800}
itemCount={rows.length}
itemSize={120}
width="100%"
>
{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>
);
}, areEqual,
[prepareRow, rows]
<TableBody {...getTableBodyProps()} classes={{ root: classes.VirtualizedTableHeight }} >
<AutoSizer disableWidth>
{({ height,width }) => (
<FixedSizeList
className="Table"
height={height}
width={width}
itemCount={rows.length}
itemSize={100}
>
{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>
);
}, areEqual, [prepareRow, rows]
)}
</FixedSizeList>
)}
</FixedSizeList>
{/* {rows.map((row) => {
prepareRow(row);
let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
return (
<TableRow
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()}
>
{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>
);
})} */}
</AutoSizer>
</TableBody>
</Table>
</TableContainer>
</TableContainer >
)
);
};
Expand Down

0 comments on commit e4ca2f8

Please sign in to comment.