Angular Material Table with Sections spanning full row with expandable sub sections

I am trying to do like the image below. I am using angular and material. I have an object which is something like this, where I have a Section which can contain elements. I then need this to be set into a table which will have the section name at the top and the element in the array of that section below it. I have already tried a tree instead of a table, but I couldn't get the desired effect, since I do require the table header at the top and the text from the sub sections need to be aligned correctly.

Therefore I want to know if anyone has any kind of ideas if this is possible.. I know I didn't provide a codebase, but I don't have anything except the Table with expandable rows from material.angular.io

interface Section {
    Title: string
    Description?: string;
    Elements: Element[];
}

interface Element {
    Name: string;
    Weight: string;
    Symbol: string;
    Position: number;
}

Image was created using Chrome Developer tool after compiling