Hide columns of a Reactjs table

Question

In my application I have table that has been rendered using React JS. The Requirement is to hide the enter column (both th and td) when the button in each column is clicked. I am not sure how to achieve it.

https://stackblitz.com/edit/react-cjzst8

import React, { Component } from 'react';
import { render } from 'react-dom';

var tableData = [
  {
    "_id": "5de8d7",
    "name": "Oneill Chang",
    "company": "TINGLES",
    "email": "[email protected]",
    "phone": "+1 (826) 583-3110"
  },
  {
    "_id": "5de8d5",
    "name": "Rogers Davis",
    "company": "ENTALITY",
    "email": "[email protected]",
    "phone": "+1 (918) 571-2672"
  },
  {
    "_id": "8d05243",
    "name": "Barlow Alford",
    "company": "BRISTO",
    "email": "[email protected]",
    "phone": "+1 (855) 527-2874"
  },
  {
    "_id": "6f5b6",
    "name": "Hopper Cote",
    "company": "BEZAL",
    "email": "[email protected]",
    "phone": "+1 (968) 565-2872"
  }
]

class App extends Component {
  constructor() {
    super();
    this.state = {
      data:[]
    };
  }

  componentDidMount(){
     this.setState({
       data:tableData
     })
  }

  render() {
    return (
       <table className="table" >
          <thead>
             <tr>
               <td> Id <br/> <button> Hide </button>  </td>
               <td> Name <br/> <button> Hide </button> </td>
               <td> Company <br/> <button> Hide </button> </td>
               <td> Email <br/> <button> Hide </button> </td>
               <td> Phone <br/> <button> Hide </button> </td>
             </tr>
          </thead>
          <tbody>
             {this.state.data.map((item,index)=>{
                return(
                  <tr>
                    <td> {item._id} </td>
                    <td> {item.name} </td>
                    <td> {item.company} </td>
                    <td> {item.email} </td>
                    <td> {item.phone} </td>
                  </tr>
                )
             })}
          </tbody>
       </table>
    );
  }
}

render(<App />, document.getElementById('root'));

Checkout this.. A very vague way of doing this stackblitz.com/edit/react-tmnbse — Panther
– Panther, Commented Dec 5, 2019 at 10:47

Pardeep Sharma · Accepted Answer · 2019-12-05 12:52:01Z

In the given code I hide name column. you can do this for remaining.

class App extends Component {
 constructor() {
 super();
 this.state = {
  data:[],
  hiddenCol: {}
 };
}

componentDidMount(){
 this.setState({
   data:tableData
 })
} 

hideCol = (value) => {
let hiddenCol = this.state.hideCol;
hiddenCol={...hiddenCol,value};

  this.setState{
   hiddenCol
  }
}

render() {
return (
   <table className="table" >
      <thead>
         <tr>
           <td> Id <br/> <button> Hide </button>  </td>
           {!this.state.hiddenCol.name && <td> Name <br/> <button onClick={()=>this.hideCol('name')}> Hide </button> </td>}
           <td> Company <br/> <button> Hide </button> </td>
           <td> Email <br/> <button> Hide </button> </td>
           <td> Phone <br/> <button> Hide </button> </td>
         </tr>
      </thead>
      <tbody>
         {this.state.data.map((item,index)=>{
            return(
              <tr>
                <td> {item._id} </td>
                {!this.state.hiddenCol.name && <td> {item.name} </td>}
                <td> {item.company} </td>
                <td> {item.email} </td>
                <td> {item.phone} </td>
              </tr>
            )
         })}
      </tbody>
   </table>
);
}
}

render(<App />, document.getElementById('root'));

Diogo Peres · Accepted Answer · 2019-12-05 11:15:20Z

I've tried to do it on a more dynamic way, without repeating code so many times. I've created an object for the header called tableHeader and created an array in the state to manage the column indexes to hide called indexesToHide. Then I iterate by the number of columns and if a given column index is in the indexesToHide array, I don't show it.

Here is a working code snippet: https://stackblitz.com/edit/react-jhk9pk

Here is the code:

import React, { Component } from 'react';
import { render } from 'react-dom';

var tableData = [
  {
    "_id": "5de8d7",
    "name": "Oneill Chang",
    "company": "TINGLES",
    "email": "[email protected]",
    "phone": "+1 (826) 583-3110"
  },
  {
    "_id": "5de8d5",
    "name": "Rogers Davis",
    "company": "ENTALITY",
    "email": "[email protected]",
    "phone": "+1 (918) 571-2672"
  },
  {
    "_id": "8d05243",
    "name": "Barlow Alford",
    "company": "BRISTO",
    "email": "[email protected]",
    "phone": "+1 (855) 527-2874"
  },
  {
    "_id": "6f5b6",
    "name": "Hopper Cote",
    "company": "BEZAL",
    "email": "[email protected]",
    "phone": "+1 (968) 565-2872"
  }
]

var tableHeader = {
  "_id": "ID",
  "name": "Name",
  "company": "Company",
  "email": "Email",
  "phone": "Phone"
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      data:[],
      indexesToHide: []
    };
  }

  componentDidMount(){
     this.setState({
       data:tableData
     })
  }

  hide( indexToHide ) {
    this.setState({ indexesToHide: this.state.indexesToHide.concat(indexToHide) });
  }

  render() {

    let header = Object.entries(tableHeader).map( (headerData, index) => {
      if( !this.state.indexesToHide.includes(index) )
        return <td> {headerData[1]} <br/> <button onClick={() => this.hide(index)}> Hide </button>  </td>
    });

    return (
       <table className="table" >
          <thead>
             <tr>
               {header}
             </tr>
          </thead>
          <tbody>
             {this.state.data.map((item,index)=>{

              let data = Object.entries(item).map( (itemData, index) => {
                if( !this.state.indexesToHide.includes(index) )
                 return <td> {itemData[1]} </td>
              });

              return( <tr> {data} </tr> )
             })}
          </tbody>
       </table>
    );
  }
}

render(<App />, document.getElementById('root'));

MubashirEbad · Accepted Answer · 2019-12-05 11:05:56Z

You need to maintain an array or something which keeps track of which hide button was clicked.

<thead>
             <tr>
               <td> Id <br/> <button onClick={this.buttonClicked(0)}> Hide </button> </td>
               <td> Name <br/> <button onClick={this.buttonClicked(0)}> Hide </button> </td>
               <td> Company <br/> <button onClick={this.buttonClicked(0)}> Hide </button> </td>
               <td> Email <br/> <button onClick={this.buttonClicked(0)}> Hide </button> </td>
               <td> Phone <br/> <button onClick={this.buttonClicked(0)}> Hide </button> </td>
             </tr>
          </thead>

and the onClicked button would be

onButtonClicked = (rowNum) => {
  if(this.state.hiddenColumns.indexOf(rowNum) === -1 ) {
    const newArray = [...this.state.hiddenColumns, rowNum];
  }
}

and then finally in your render:

<tbody>
             {this.state.data.map((item,index)=>{
                return(
                  <tr>
                    this.state.hiddenColumns.indexOf(0) === -1 && <td> {item._id} </td>
                    this.state.hiddenColumns.indexOf(0) === -1 && <td> {item.name} </td>
                    this.state.hiddenColumns.indexOf(0) === -1 && <td> {item.company} </td>
                    this.state.hiddenColumns.indexOf(0) === -1 && <td> {item.email} </td>
                    this.state.hiddenColumns.indexOf(0) === -1 && <td> {item.phone} </td>
                  </tr>
                )
             })}
          </tbody>

Collectives™ on Stack Overflow

Hide columns of a Reactjs table

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