ag-Grid Tree (WIP)

<html>
<head>
    <script src="https://unpkg.com/ag-grid/dist/ag-grid.js"></script>
    <script src="example3.js"></script>
    <!-- <link rel="stylesheet" href="example3.css" /> -->
</head>
<body>
    <div id="myGrid" style="height: 90%;" class="ag-fresh"></div>
</body>
</html>

[{
  "hasChild": true,
  "partno": "11111-11111",
  "supplier": "1019",
  "quantity": 1,
  "detail": "total",
  "price": 3000,
  "children": [{
    "hasChild": true,
    "partno": "22222-22222",
    "supplier": "1666",
    "quantity": 1,
    "detail": "process",
    "price": 2000,
    "children": [{
      "hasChild": false,
      "partno": "22222-22222",
      "supplier": "1666",
      "quantity": 1,
      "detail": "assembly",
      "price": 1500
    },{
      "hasChild": false,
      "partno": "22222-22222",
      "supplier": "1666",
      "quantity": 1,
      "detail": "buffing",
      "price": 500
    }
    ]
  },
  {
  "hasChild": true,
    "partno": "33333-33333",
    "supplier": "2625",
    "quantity": 1,
    "detail": "bop",
    "price": 1000,
    "children": [{
      "hasChild": false,
      "partno": "33333-33333",
      "supplier": "2625",
      "quantity": 1,
      "detail": "75867-*****",
      "price": 1000
    }]
}
  ]
}]

var columnDefs = [{
  headerName: "Part No.",
  field: "partno",
  editable: true,
  //checkboxSelection: true,
  cellRenderer: 'group',
  width: 150
}, {
  headerName: "Supplier",
  field: "supplier",
  editable: true,
  width: 90
}, {
  headerName: "Quantity",
  field: "quantity",
  editable: true,
  cellRenderer: numberRenderer,
  cellStyle: {
    "text-align": "right"
  },
  width: 90
}, {
  headerName: "Detail",
  field: "detail",
  editable: true,
  cellRenderer: 'group',
  width: 120
}, {
  headerName: "Price",
  field: "price",
  editable: true,
  //aggFunc: 'sum',
  cellRenderer: numberRenderer,
  cellStyle: {
    "text-align": "right"
  },
  width: 110
}];

var gridOptions = {
  columnDefs: columnDefs,
  enableSorting: true,
  enableFilter: true,
  rowSelection: 'multiple',
  suppressRowClickSelection: true,
  enableColResize: true,
  headerHeight: 48,
  //rowGroupPanelShow: 'always',
  //pivotPanelShow: 'always',
  //enableRangeSelection: true,
  groupMultiAutoColumn: true,
  pagination: true,
  getNodeChildDetails: function(data) {
    if (data.hasChild) {
      return {
        group: true,
        children: data.children,
        expanded: data.open
      };
    } else {
      return null;
    }
  },
};

function numberRenderer(params) {
  if (params.value === null || params.value === undefined) {
    return null;
  } else if (isNaN(params.value)) {
    return 'NaN';
  } else {
    // if we are doing 'count', then we do not show pound sign
    if (params.node.group && params.column.aggFunc === 'count') {
      return params.value;
    } else {
      return Math.floor(params.value).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
    }
  }

}

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);

  // do http request to get our sample data - not using any framework to keep the example self contained.
  // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
  var httpRequest = new XMLHttpRequest();
  httpRequest.open('GET', './data.json');
  httpRequest.send();
  httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      var httpResult = JSON.parse(httpRequest.responseText);
      gridOptions.api.setRowData(httpResult);
    }
  };
});