JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.treegrid.css" rel="stylesheet"></link>
<table id="treegrid1"></table>
JavaScript
$(function () {
var dataSource = [
{
"number": "1000", "name": "Assets", "balance": "", "assets": [
{
"number": "1003", "name": "Fixed assets", "balance": "", "assets": [
{
"number": "1115", "name": "Lands and Buildings", "balance": "", "assets": [
{ "number": "1120", "name": "Lands and Buildings", "balance": 167 },
{ "number": "1130", "name": "Increases during the year", "balance": 147 },
{ "number": "1140", "name": "Decreases during the year", "balance": 345 },
{ "number": "1132", "name": "Accum. Depreciation, Buildings", "balance": 526 },
{ "number": "1142", "name": "Lands and Buildings, Total", "balance": 953 }
]
},
{
"number": "1200", "name": "Operating Equipment", "balance": "", "assets": [
{ "number": "1290", "name": "Operating Equipment, Total", "balance": 998 }
]
},
{
"number": "1300", "name": "Vehicles", "balance": "", "assets": [
{ "number": "1390", "name": "Vehicles, Total", "balance": 758 }
]
},
{ "number": "1990", "name": "Fixed assets, Total", "balance": 1128 }
]
},
{
"number": "2000", "name": "Current assets", "balance": "", "assets": [
...