I've incorporated a material-ui Table into my project and have successfully implemented multi-select functionality. Here are the requirements I've fulfilled so far:
Checkboxesare initially hidden - COMPLETED- Hovering over a row reveals its checkbox - COMPLETED
- Once one
Checkboxis checked, all otherCheckboxelements on different rows should remain visible.
While I have achieved the first two requirements, I am struggling to accomplish the final one.
How can I make all checkboxes visible (by adjusting the opacity) when any one of them is checked?
Below is my current progress:
https://codesandbox.io/s/hover-table-row-checkbox-11ozf?fontsize=14&hidenavigation=1&theme=dark
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
TableBody from "@material-ui/core/TableBody";
TableCell from "@material-ui/core/TableCell";
TableContainer from "@material-ui/core/TableContainer";
TableHead from "@material-ui/core/TableHead";
TableRow from "@material-ui/core/TableRow";
Paper from "@material-ui/core/Paper";
Checkbox from "@material-ui/core/Checkbox";
const useStyles = makeStyles({
rowIconStyle: {
minWidth: 50,
minHeight: 50
},
tableRowStyle: {
cursor: "pointer",
"&hover": {
backgroundColor: "darkGrey"
}
},
rowSelectionCheckboxStyle: {
//opacity: "calc(var(--oneRowSelected))",
opacity: 0,
"$tableRowStylehover &": {
opacity: 1
}
}
});
export default function MyTableComponent(props) {
const styles = useStyles();
const DEFAULT_TABLEROWICONCOLOR = "grey";
return (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>
<Checkbox className={styles.rowSelectionCheckboxStyle} />
</TableCell>
<TableCell>Icon</TableCell>
<TableCell>Name</TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.tableRowsData.map(row => {
const RowIcon =
row.icon && row.icon.iconElement
? row.icon.iconElement
: ()=> <div />;
let iconElement = (
<RowIcon
className={styles.rowIconStyle}
style={{
color:
row.icon && row.icon.color
? row.icon.color
: DEFAULT_TABLEROWICONCOLOR
}}
/>
);
return (
<TableRow key={row.name} className={styles.tableRowStyle}>
<TableCell>
<Checkbox className={styles.rowSelectionCheckboxStyle} />
</TableCell>
<TableCell>{iconElement}</TableCell>
<TableCell>{row.projectName}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
}
MyTableComponent.propTypes = {
tableRowsData: PropTypes.array
};