GridHeaderCell

Copy Codeclass App extends React.PureComponent {
   state = {
       details: false,
       data: [
              { foo: 'A1', bar: 'B1', b1: 1, b2:2 },
              { foo: 'A2', bar: 'B2', b1: 3, b2:4 },
              { foo: 'A3', bar: 'B2', b1: 5, b2:6 }
          ]
   };

   CustomHeaderCell = (props) =>
       <span>
           {props.title || props.field + ' '}
           <button onClick={() => this.setState({ barDetails: !this.state.barDetails })}>
               {this.state.barDetails ? 'collapse' : 'expand'}
           </button>
           {props.children}
       </span>

   render() {
       return (
           <Grid
               style={{ height: '420px' }}
               data={this.state.data}
               reorderable={true}
           >
               <GridColumn field="foo" />
               <GridColumn field="bar" headerCell={this.CustomHeaderCell}>
                   {this.state.barDetails && [
                       <GridColumn field="b1" />,
                       <GridColumn field="b2" />
                   ]}
               </GridColumn>
           </Grid>
       );
   }
}

ReactDOM.render(<App />, document.querySelector('my-app'));