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.

have you tried holding the highlighted rows (or their ids) in state? That way you can add and remove them in your clickhandler — Tom
– Tom, Commented Feb 10, 2022 at 8:50

Tom · Accepted Answer · 2022-02-11 08:33:10Z

3

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

answered Feb 11, 2022 at 8:33

Tom

1,1888 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user18036812 Over a year ago

thanks,works for ctrl can you tell me,is this ok for shiftkey to highlight all the row start to end else if (event.shiftKey) { setHighlightedRows((current) => { if (current.includes(id)) { return current.filter((previousRow) => previousRow !== id); } else { previousRow.push(id); console.log(previousRow); return [...current,previousRow]; });

Tom Over a year ago

That is more complicated functionality, as each row needs to know where it is in the order so that it can update the state correctly. Your filter won't work because previousRow will only match with id once

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related