Laravel datatable nested row-details on nested relationships - laravel

Question

I am trying to view laravel datatable with nested row details on nested relationships. Here are the details of what I have done
Database relationships
I want the datatable to view all products on page load, then first level of row detail will show all components of a product. Second level of row detail will show all sub-components from a component.
This is the current result of my datatable view
As shown in the illustration, the datatable fails to show the rawmaterial name of a sub-component.
Here are my Eloquent models and relationships.
Product Model
protected $table = 'products';
public function components() {
return $this->hasMany('App\Component', 'product_id', 'id');
}
Component Model
protected $table = 'components';
public function comp_subcomps() {
/*The syntax ->with('subcomponents') seems WORKING fine in resulting
the second level row detail ( viewing the subcomponents of a component )*/
return $this->hasMany('App\CompToSubComp', 'component_id', 'id')->with('subcomponents');
}
CompToSubComp Model
protected $table = 'comp_subcomp';
public function subcomponents() {
/* This syntax ->with('rawmaterials') seems NOT WORKING to
get the material name in the second level row detail */
return $this->belongsTo('App\SubComponent', 'subcomponent_id', 'id')->with('rawmaterials');
}
SubComponent Model
protected $table = 'subcomponents';
public function rawmaterials() {
return $this->belongsTo('App\Rawmaterial', 'rawmaterial_id', 'id');
}
CONTROLLER
/* On page load */
public function viewTable() {
$products = Product::select();
return Datatables::of($products)
->addColumn('details_url', function($product) {
return url('/product/getdetaildata/' . $product->id);
})->make(true);
}
/* First level row detail ( showing components of a product ) */
public function getDetailsData($id)
{
$components = Product::find($id)->components();
return Datatables::of($components)
->addColumn('moredetails_url', function($component) {
return url('/product/getmoredetail/' . $component->id);
})->make(true);
}
/* Second level row detail ( showing sub-components of a component ) */
public function getMoreDetailsData($id) {
$compsubcomp = Component::find($id)->comp_subcomps();
return Datatables::of($compsubcomp )->make(true);
}
JS DATATABLE
/* On load: Its working */
var dt = $('#example').DataTable({
...
"columns": [
{ "data": "id", "name": "id" },
{ "data": "name", "name": "name"}
]
});
/* First level row detail: Its working */
var tabComponent = $('#' + tableId).DataTable({
...
"columns": [
{ "data": "id", "name": "id" },
{ "data": "name", "name": "name" }
]
});
/* Second level: This PROBLEM exists where RAWMATERIAL NAME is not showing */
$('#' + tableId).DataTable({
...
"columns": [
{ "data": "id", "name": "subcomponents.id" },
{ "data": "name", "name": "subcomponents.name" },
{ "data": "rawmaterial_id", "name": "subcomponents.rawmaterial_id" },
{ "data": "subcomponents.rawmaterials.name", "name": "subcomponents.rawmaterials.name" }
]
});
How to correctly view the relationship between 'rawmaterials' and 'subcomponents' inside my datatable?
Any help to identify my errors would be appreciated. Thanks in advance.