Search code examples
reactjsantd

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.

Solution

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