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()}>
}

Answer 2

I managed to solve such a problem by creating a copy of the original column array and an array that would hold the dataIndex that is equal for each. Then I replace the current column array with the filtered one. Below the code:

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

class App extends React.Component {
  state = {
    value: false,
    checkedColumns: [],
    visibleMenuSettings: false,
     columns: [
  {
    title: 'Name',
    dataIndex: 'name',
    
  },
  {
    title: 'Age',
    dataIndex: 'age',

  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
],
initialColumns: []
  };

  componentDidMount() {
    this.setState({initialColumns: this.state.columns})
  }

  handleVisibleChange = flag => {
    this.setState({ visibleMenuSettings: flag });
  };

  onChange = (e) => {
    var checkedColumns = this.state.checkedColumns
    if(e.target.checked){
    checkedColumns = checkedColumns.filter(id => {return id !== e.target.id})
    
    }
    else if(!e.target.checked){
    checkedColumns.push(e.target.id)
  
    }

  var filtered = this.state.initialColumns;
    for(var i =0;i< checkedColumns.length; i++)
    filtered = filtered.filter(el => {return el.dataIndex !== checkedColumns[i]})

    this.setState({columns: filtered, checkedColumns: checkedColumns})
  }

  render() {
      const menu = (
          <Menu>  
            <Menu.ItemGroup title="Columns" >
              <Menu.Item  key="4"><Checkbox id="age" onChange={this.onChange} defaultChecked>Age</Checkbox></Menu.Item>
              <Menu.Item key="5"><Checkbox id="address" onChange={this.onChange} defaultChecked>Address</Checkbox></Menu.Item>
            </Menu.ItemGroup>
          </Menu>
      );

    return (
      <div>
      <Dropdown
        overlay={menu}
        onVisibleChange={this.handleVisibleChange}
        visible={this.state.visibleMenuSettings}
      >
        <Button>Show/Hide</Button>
      </Dropdown>
        <Table columns={this.state.columns} dataSource={data} />
      </div>
    );
  }
}

Also here is a working example: https://stackblitz.com/edit/antd-showhidecolumns

Answer 3

More elegant solution (use conditional array element):

const cols= [
  {
    title: 'Name',
    dataIndex: ['name'],
    key: 'name',
  },
    isElectron()?
    {
      title: 'Download',
      render: (val) => (<Button icon={<DownloadOutlined />} onClick={()=>downloadReportElectron(val)} />),
      width: 100,
    } : 
    {
      width: 0,
    },
  {
    title: 'Some',
    dataIndex: ['some'],
    key: 'some',
  },

Just something to know:

[{x},con?{x}:{},{x}] //would have worked, but it will render a col with width

That's where {width: 0,} comes from.