score:7

Accepted answer

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

score:0

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

score:0

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.


Related Query

More Query from same tag