0

I saw this response on how to hide a column. I need a little more complicated behavior. I have a react table like this

var StockTable = React.createClass({
    render: function () {        
        var items = [];
        for (var symbol in this.props.stocks) {
            var stock = this.props.stocks[symbol];
                items.push(<OptionRow key={stock.symbol} stock={stock} bid={this.props.bid} ask = {this.props.ask}  />); 
        }

        return (        
            <table table-head id="stocktable">
            ...

I need to detect when a user clicks on the header of the table, get the column she clicked on, and hide that column. Then, if a user clicks a separate button on the page, I need all the columns that are hidden to display again.

It would also be nice if the cursor changed to something like a hand when in the table header to alert the user that an action is possible. Like it does when you hover over a button.

Community
  • 1
  • 1
Ivan
  • 7,448
  • 14
  • 69
  • 134

1 Answers1

1

I would have a list of hidden table headers in state

this.state = {hidden: []}

and event handlers for each header

<th onClick={() => hideHeader('cost')}>

to avoid rendering them

hidden.indexOf('cost') !=== -1 ? <someheader/> : null

Rendering null is a valid way to avoid rendering something.

To change pointers: How can I make the cursor a hand when a user hovers over a list item?

Community
  • 1
  • 1
Jesvin Jose
  • 22,498
  • 32
  • 109
  • 202