How to select multiple row in Table row ?Using(ctrl+click) and (Shift+click) in react js

Question

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.

Answer 1

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>
         ...