JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table"
				data-sap-ui-theme="sap_bluecrystal">
		</script>

		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("learning");
				var view = sap.ui.view({id:"idfirst1", viewName:"learning.first", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

JavaScript

/*var oData = {
				root : {
					name : "root",
					description : "root description",
					checked : "Checked",
					0 : {
						name : "item1",
						description : "item1 description",
						checked : "Checked",
						0 : {
							name : "subitem1-1",
							description : "subitem1-1 description",
							checked : "Checked",
							0 : {
								name : "subsubitem1-1-1",
								description : "subsubitem1-1-1 description",
								checked : "Checked"
							},
							1 : {
								name : "subsubitem1-1-2",
								description : "subsubitem1-1-2 description",
								checked : "Checked"
							}
						},
						1 : {
							name : "subitem1-2",
							description : "subitem1-2 description",
							checked : "Checked",
							0 : {
								name : "subsubitem1-2-1",
								description : "subsubitem1-2-1 description",
								checked : "Checked"
							}
						}

					},
					1 : {
						name : "item2",
						description : "item2 description",
						checked : "Mixed",
						0 : {
							name : "subitem2-1",
							description : "subitem2-1 description",
							checked : "Checked"
						},
						1 : {
							name : "subitem2-2",
							description : "subitem2-2 description",
							checked : "Unchecked"
						}
					},
					2 : {
						name : "item3",
						description : "item3 description",
						checked : "Checked"
					}

				}
			};*/
      
      var oData = {
				root : {
					name : "root",
					description : "root description",
					checked : "Checked",
					0 : {
						name : "item1",
						description : "item1 description",
						checked : "Checked",
						},
					1 : {
						name : "item2",
						description : "item2 description",
						checked : "Mixed",
						},
					2 : {
						name : "item3",
						description : "item3 description",
						checked : "Checked"
					}
				}
			};

			for ( var i = 0; i < 5; i++) {
				oData["root"][2][i] = {
					name : "subitem3-" + i,
					description : "subitem3-" + i + " description",
					checked :...