无法将数据加载到Ag-Grid组件中

Question

     import React, { Component } from 'react';
        import {AgGridReact} from "ag-grid-react";
        import "ag-grid/dist/styles/ag-grid.css";
        import "ag-grid/dist/styles/theme-blue.css";
        export default class TableComponent extends Component {

        constructor(props) {
            super(props);
            this.state = {
            };
          }

          createHeader(){

              let columns = this.props.data.columns.map((col) => {
                      return {headerName:col.toUpperCase(),field:col}
                    });

              return columns; 
            }

             tableData(){

                    var res = this.props.data.columns;
                    var columns_name = res.map((col) => {
                                 return col
                               });
                    console.log(res);
                    console.log(columns_name);
                    var temp =[];
                    for(var i =1; i< res[0].length;i++){
                     var draft={};
                     for(var j =0; j< columns_name.length; j++){
                       draft[columns_name[j]] = '';
                     }

                     temp.push(draft);

                    }
                     console.log(temp);
                     for(var i =0; i< columns_name.length; i++){
                         for(var j =0; j<temp.length; j++){

                            temp[j][columns_name[i]] = res[i][j+1];

                         }

                     }


                      return temp;
                          }

          render() {
             return (
             <div style={containerStyle} className="ag-blue">
                    <AgGridReact
                        columnDefs={this.createHeader()}
                        rowData={this.tableData()}
                        enableFilter
                        enableSorting>
                    </AgGridReact>
                    </div>
           );
         }
        }

I am getting the table data in the following format.

Response format From this format i am trying to load the data in the tabular format. I can able to get the headers but the data is not populating.

I am getting the output in below

output which i am getting .

But how to get the proper data from the chart_data key from response which i am getting.

may i know what i am doing wrong here.

Answer 1

Just return chart_data because your response already in ag-grid row format.

tableData() { 
  return res.chart_data;
}