Please help me, I have no idea how to solve that problem when user press ctrl +Left click table row should highlight the row, and in shift + left click It should highlight all the row data where the user clicks from 1 row to 2 last row (example like react-Table multiple row selection). Not using any 3 party library.
Code:-
const ClickHighlight = (event, ID, ChannelName) => {
if (event.ctrlKey) {
}
if(event.shiftKey) {
console.log("helloShift");
}
}
return (
<div className="mainContent">
<div className="tableHeaderBody">
<div className="TableText">PlayList</div> <div className="ClossIcon"><FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} /></div>
</div>
<div className="tableBody" >
<table className="table" id="tableStudent" data-multiple-select-row="true"
data-click-to-select="true">
<Header
headers={headers}
/>
<tbody>
{comments.map((comment) => {
return (
<tr key={comment.idx} tabIndex={comment.idx} className="border_bottom" onMouseDown={(e) => ClickHighlight(e, comment.ClipName, comment.ChannelName)}>
<td style={{ color: "white", width: "200px" }}>
<img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="50%" />
</td>
<td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>
<td style={{ color: "white", width: "250px" }}>{comment.SlugName}</td>
<td style={{ color: "white", width: "250px" }}>{comment.ChannelName}</td>
Please help.
I've assumed your component is a functional one, but hopefully this gives you the idea on how to do it anyway. I've also assumed comments is a prop of your component:
const [highlightedRows, setHighlightedRows] = useState([]);
const ClickHighlight = (event, id, ChannelName) => {
if (event.ctrlKey || event.shiftKey) {
// add to highlighted
setHighlightedRows((current) => {
if (current.includes(id)) {
// row is already highlighted. Unhighlight but keep the others
return current.filter((entry) => entry !== id);
} else {
// add row to the current list of highlighted ones
return [...current, id];
}
});
} else {
// highlight clicked row and de-highlight others
setHighLightedRows([id]);
}
}
Now in your return statement you can use the state to either render the row as highlighted or not by matching to the comment's idx. Here i've just given each highlighted item a yellow background, but you can style this any way you want.
<tbody>
{comments.map((comment) => {
const isHighlighted = highlightedRows.includes(comment.idx);
// we can now conditionally render based on if this flag is true or not
return (
<tr
key={comment.idx}
tabIndex={comment.idx}
className="border_bottom"
onMouseDown={(e) => ClickHighlight(e, comment.idx, comment.ChannelName)}
style={ isHighlighted ? { backgroundColor: 'yellow' } : {}}
>
<td style={{ color: "white", width: "200px" }}>
<img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="50%" />
</td>
<td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>
<td style={{ color: "white", width: "250px" }}>{comment.SlugName}</td>
<td style={{ color: "white", width: "250px" }}>{comment.ChannelName}</td>
...