CODEWITHSUNDEEP
reactjsantd
SqeezeBug
SqeezeBug

Reputation: 31

React - Antd - Show/Hide Columns in table

I would like to resolve one problem. How can I show/hide columns in table using Ant Design in React?

export const columns = () => [
 {
   key: "anyKeyOne",
   title: "Title one",
   dataSource: "AnyOne",
   hide: true
 },
 {
   key: "anyKeyTwo",
   title: "TitleTwo",
   dataSource: "AnyTwo",
   hide: false
 }
]

hideColumns = () => {
 // 
}

render() {
 return (
  <div>
   <Table 
     dataSource={store.data}
     columns={this.hideColumns}
   />
  </div>
 )
}

Thank you for answers.

Upvotes: 2

Views: 6461

Answers (3)

sundeepg
sundeepg

Reputation: 440

You can add a className field in the object and add a css property 'display: none' to that class

 {
   key: "anyKeyOne",
   title: "Title one",
   dataSource: "AnyOne",
   className: "hide"
 }

Upvotes: 0

Shivam Gupta
Shivam Gupta

Reputation: 1238

Use this function to build your visible column array. It uses dataIndex to compare the column name needed to be shown.

Form the arrayOfColumnNeeded by pushing values from a checkbox group maybe. 

let  columnsDisplayed = _.remove(columns, function(n) {
  return arrayOfColumnsNeeded.includes(n.dataIndex);
});

Upvotes: 1

Root
Root

Reputation: 2361

You can set a boolean state property like hideColumn

<div>
   <Table 
     dataSource={store.data}
     columns={this.state.hideColumn? this.state.columns: this.state.columns}
   />
  </div>

Upvotes: 1

Related Questions