hide delete icon from first row of table - reactjs

Question

I have a table with multiple rows and delete icon with each row. I have to hide that delete icon from first row so user can not able to delete the first row.

I have tried this so far.

Code :

<div className="panel-body">
  <div className="row grid-divider">
    <div className="col-sm-6">
      <div className="col-padding">
        <div className="pos-div"><h4>{_labels.LOCATION_PANEL_CFG_LOCATION}</h4><a data-toggle="toggle" data-target="#jdCheckbox2" className="jdClickable2" onClick={() => this.deleteChekedAll()} style={this.props.conLocations.length < 2 ? {pointerEvents: 'none' }:null}>{_labels.LOCATION_PANEL_SELECT_ALL}</a><button className="allLargeBtn" onClick={() => this.delAllChecked()} disabled={this.props.conLocations.length < 2}> {_labels.LOCATION_PANEL_REMOVE} </button></div>
        <div><table className="table configTableColor"><thead>{this.props.conLocations.map((locc, index) => <tr key={index}><th><input type="checkbox" id="#jdCheckbox2" onChange={() => this.deleteToggle(locc.mruCode)} checked={this.props.isDeleted.find(chkItems => chkItems.mruCode === locc.mruCode)} /><label></label></th><th className="configLocationInfo">{locc.mruCode} - {_labels[locc.division]} - {locc.country}</th><th className="text-right"><img alt="DeleteIcon" onClick={() => this.handleRemove(locc.mruCode)} className={this.props.conLocations.length===1?"deleteIconStyle1":"deleteIconStyle"} src="img/delete_large_active.png" /></th></tr>)}</thead></table></div>
      </div>
    </div>
  </div>
</div>

css code:


.deleteIconStyle {
    width: 16px;
    cursor: pointer;
}

.deleteIconStyle1{
    opacity: 0;
}

how to hide delete icon from first row of a table in react js

Simply do not show the anchor tag by validating, if you are using array.map(), then use index, index == 0 ? null : <a></a>. — Saif Ali Khan
– Saif Ali Khan, Commented Aug 3, 2019 at 12:54

ravibagul91 · Accepted Answer · 2019-08-03 12:56:34Z

1

You can make use of index to conditionally render delete button, you don't need any CSS for this.

{index !== 0 && <img alt="DeleteIcon" onClick={()=> this.handleRemove(locc.mruCode)} className={this.props.conLocations.length===1?"deleteIconStyle1":"deleteIconStyle"} src="img/delete_large_active.png" />}

answered Aug 3, 2019 at 12:56

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

Comments

Prabu samvel · Accepted Answer · 2019-08-03 12:58:58Z

1

You can simply skip the DeleteIcon if the index is 0.

Like this.

<th className="text-right">
    {index !== 0 && <img
      alt="DeleteIcon"
      onClick={() => this.handleRemove(locc.mruCode)}
      className={
        this.props.conLocations.length === 1
          ? "deleteIconStyle1"
          : "deleteIconStyle"
      }
      src="img/delete_large_active.png"
    />}
 </th>

answered Aug 3, 2019 at 12:58

Prabu samvel

1,2138 silver badges20 bronze badges

Comments

dybzon · Accepted Answer · 2019-08-03 13:00:30Z

1

You could render the delete icon conditionally like this:

this.props.conLocations.map(
(locc, index) => 
  <tr key={index}>
    <th><input /><label></label></th>
    <th className="configLocationInfo"></th>
    <th className="text-right">
      {index > 0 && <img alt="DeleteIcon" />}
    </th>
  </tr>)

This line renders the delete icon for any row except the first one:

{index > 0 && <img alt="DeleteIcon" />}

answered Aug 3, 2019 at 13:00

dybzon

1,6542 gold badges18 silver badges22 bronze badges

Collectives™ on Stack Overflow

hide delete icon from first row of table - reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related