JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
</head>
<body><div id=tabulator></div></body>
</html>

JavaScript

new Tabulator("#tabulator", {
	dataTree:true,
	dataTreeStartExpanded:true,
	columns:[
		{title:"",field:"Tree"},
	 	{title:"Part",field:"Part",headerFilter:"input"},
	 	{title:"Count", field:"Count",editor:"input",
			cellEdited:function(cell) {
				var row = cell.getRow();
				var data = row.getData();
				data.Value = data.Count * data.Cost;
				row.getTable().updateData([data]);
			}
		},
	 	{title:"Cost", field:"Cost",headerFilter:"input"},
	 	{title:"Value", field:"Value"},
	],
	data:[
  	{id:1,Part:"One",Cost:100,
    	_children:{id:2,Part:"Two",Cost:150,
      	_children:{id:3,Part:"Three",Cost:110},
      },
    },
    {id:4,Part:"Four",Cost:150}],
});