Hide Column

[cdesch]

Is there anyway to hide a column and the column header dynamically such that they can be toggled on or toggled off as user wants to see more or less columns?

[juanpasolano]

May be the hidden attr is what you're looking for. http://allenfang.github.io/react-bootstrap-table/docs.html#hidden

[cdesch]

Thanks @juanpasolano. That works. Then I can do:

       <TableHeaderColumn dataField="Name" dataSort hidden={true}>Name</TableHeaderColumn>

Or I could then put a function or a value from this.state.columnHidden.

Is there any shortcut that would allow me to Click to hide the column by the header? I suppose I would need to index them and provide a list of the ones I want to be hidable. Maybe if I could add a button or something to each column to fire off a function with the sender of the btnClick attached.

[juanpasolano]

@cdesch You could add a click handler to the children of the header. You cannot get a reference from the Component itself but you can handle the state yourself. Note how onHeaderClick is a function that returns a function so you can pass a reference to the name you need.

onHeaderClick = val => e => {
    this.setState({[val]: !this.state[val]})
}

render() {
  return (
    <BootstrapTable data={ data }>
        <TableHeaderColumn 
        dataField="name" 
        dataSort 
        hidden={this.state.name}>
           <span onClick={this.onHeaderClick("name")}>Name</span>
        </TableHeaderColumn>
    </BootstrapTable>
  );
}

[Moise1]

Hi @AllenFang and others who may help, how can I get those vertical lines which separate columns for react bootstrap table? Thanks.