how do i dynamically create ColumnDefs and Headers in ag-grid for Angular?

Question

I have a JSON file:

{
 "Tab1" : [   
            { "Column1" : "DummyData1",  
              "Column2"  : "DummyData2",
              "Column3" : "DummyData3",
            }
          ],                            
 "Tab2": [   
            { "SomeColumn4" : "DummyData4",  
              "SomeColumn5" : "DummyData5",
            }
          ],
 "Tab3": [   
            { "SomeColumn6" : "DummyData6",  
              "SomeColumn7" : "DummyData7",
            }
          ]
}

I have a page with the 3 tabs given above. when i click on the Tab1 then only Tab1 columns should be populated in ag grid. I am using angular 4 with ag grid. It's basically getting dynamically the column headers whenever i click on a particular tab