agGrid-列分组获取空标题

Question

我正在尝试将子列添加到AgGrid中的一列中，并且子列添加正确。但是我看到所有没有子列的普通列的标题都是空的。

请查看下面的代码和屏幕截图。

Screen shot of Epty header- agGrid   这是代码链接https://plnkr.co/edit/5OE5YyxdPUnsicTwtFNn?p=preview？

import React, {
  Component
}
from "react";
import {
  render
}
from "react-dom";
import {
  AgGridReact
}
from "ag-grid-react";

class GridExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: [{
        headerName: "Athlete",
        field: "athlete",
        width: 150,
        filter: "agTextColumnFilter"
      }, {
        headerName: "Athlete Details",
        children: [

          {
            headerName: "Age",
            field: "age",
            width: 90,
            filter: "agNumberColumnFilter"
          }, {
            headerName: "Country",
            field: "country",
            width: 120
          }
        ]
      }, {
        headerName: "Sports Results",
        children: [{
            headerName: "Sport",
            field: "sport",
            width: 110
          }, {
            headerName: "Total",
            field: "total",
            width: 100,
            filter: "agNumberColumnFilter"
          }

        ]
      }, {
        headerName: "Gold",
        field: "gold",
        width: 100,
        filter: "agNumberColumnFilter"
      }, {
        headerName: "Silver",

        field: "silver",
        width: 100,
        filter: "agNumberColumnFilter"
      }, {
        headerName: "Bronze",

        field: "bronze",
        width: 100,
        filter: "agNumberColumnFilter"
      }],
      rowData: []
    };
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    const httpRequest = new XMLHttpRequest();
    const updateData = data => {
      this.setState({
        rowData: data
      });
    };

    httpRequest.open(
      "GET",
      "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
    );
    httpRequest.send();
    httpRequest.onreadystatechange = () => {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        updateData(JSON.parse(httpRequest.responseText));
      }
    };
  }

  render() {
    return ( < div style = {
        {
          width: "100%",
          height: "100%"
        }
      } >
      < div id = "myGrid"
      style = {
        {
          boxSizing: "border-box",
          height: "100%",
          width: "100%"
        }
      }
      className = "ag-theme-balham" >
      < AgGridReact columnDefs = {
        this.state.columnDefs
      }
      debug = {
        true
      }
      enableSorting = {
        true
      }
      enableFilter = {
        true
      }
      enableColResize = {
        true
      }
      onGridReady = {
        this.onGridReady.bind(this)
      }
      rowData = {
        this.state.rowData
      }
      /> < /div> < /div>
    );
  }
}