Grid Header/Footer does not set in Grid Details


I have a scenario to display table within Grid details, however I am not able to acheive using Grid in Grid Details of the parent Grid. I also tried replacing Table instead of Grid in Details with no use.

Below is my init method of the view

private void init() {

    // Create a grid bound to the container
    Grid grid = new Grid();
    grid.addColumn("firstName", String.class);
    grid.addColumn("lastName", String.class);
    grid.addColumn("DOB", Integer.class);
    grid.addColumn("age", Integer.class);

    grid.addRow("Tycho", "Brahe", 1923, 56);
    grid.addRow("Giordano", "Bruno", 1933, 46);
    grid.addRow("Nicolaus", "Copernicus", 1473, 70);

/* HeaderRow hr = grid.prependHeaderRow();
hr.join(“firstName”, “lastName”).setText(“Names”);
hr.join(“DOB”, “age”).setText(“Years”);

    FooterRow fr = grid.appendFooterRow();
    fr.getCell("DOB").setText("ALL AGES");

grid.setDetailsGenerator(new DetailsGenerator() {
private static final long serialVersionUID = 1L;

        public Component getDetails(RowReference rowReference) {
            Panel panel = new Panel("Details");
            Grid grid1 = new Grid();
            grid1.addColumn("id", Integer.class);
            grid1.addColumn("color", String.class);
            grid1.addColumn("count", Integer.class);

            grid1.addRow(1, "Grey", 10);
            grid1.addRow(2, "White", 30);
            grid1.addRow(3, "Red", 40);
            //HeaderRow hr1 = grid1.prependHeaderRow();
            FooterRow fr1 = grid1.appendFooterRow();
            return panel;

    grid.addItemClickListener(new ItemClickListener() {
        private static final long serialVersionUID = 1L;

        public void itemClick(ItemClickEvent event) {
            if (event.isDoubleClick()) {
                Object itemId = event.getItemId();
                grid.setDetailsVisible(itemId, !grid.isDetailsVisible(itemId));

Many Thanks in advance.