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

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.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source