React - Antd - Показать / Скрыть столбцы в таблице

Question

Я бы хотел решить одну проблему.Как показать / скрыть столбцы в таблице с помощью Ant Design в 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>
 )
}

Спасибо за ответы.

Answer 1

Используйте эту функцию для построения видимого массива столбцов.Он использует dataIndex для сравнения имени столбца, которое нужно показать.

Сформировать arrayOfColumnNeeded, нажав значения из группы флажков.

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

Answer 2

Вы можете установить свойство логического состояния, например hideColumn

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