GridHeaderCell
A subclass of React.Component.
class 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'));
Name | Type | Default | Description |
---|---|---|---|
props |
|
The props of the GridHeaderCell component. |