Ant Design for React : Show/Hide columns

Question

I am looking for a way to Hide/Show columns for the Table Component in Ant Design

The idea is to have a checkbox with each column name. When unchecking the column name, the column becomes Hidden.

I have used react-table before and it was as easy as passing a parameter in the column name as a prop

However, this option is not available in Ant Design. Any idea on the way I should go in terms of logic?

Thanks!

Answer 1

You can have the columns in the component as a function.

Then according to the state you can hide or show different columns. You can add a className to the columns or directly not render it.

getColumns = () => [
  {
    title: 'Client Name',
    dataIndex: 'clientName',
    className: this.state.columns['clientName'] ? "show" : "hide"
  }
];
render() {
  return <Table columns={this.getColumns()}>
}