GridHeaderCell

A Functional Component.

jsx

const App = () => {
    const [data, setData] = useState([
        { foo: 'A1', bar: 'B1', b1: 1, b2: 2 },
        { foo: 'A2', bar: 'B2', b1: 3, b2: 4 },
        { foo: 'A3', bar: 'B2', b1: 5, b2: 6 }
    ]);
    const [barDetails, setBarDetails] = useState(false);

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

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

export default App;

Name	Type	Default	Description
props	GridHeaderCellProps		The props of the GridHeaderCell component.