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: CustomCellProps) => (
      <td
          {...props.tdProps}
          colSpan={1}>
          <span>
              {props.title || props.field + ' '}
              <button onClick={() => setBarDetails(!barDetails)}>
                  {barDetails ? 'collapse' : 'expand'}
              </button>
              {props.children}
          </span>
      </td>
    );

    return (
        <Grid style={{ height: '420px' }} data={data} reorderable={true}>
            <GridColumn field="foo" />
            <GridColumn field="bar" cells={{ 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.