How to create an HTML table from a graph?

Question

I am trying to create a table from a data structure like grapho.

I have the following tree structure

{
    "category": {
        "name": "Main Category",
        "items": []
    },
    "childs": [
        {
            "category": {
                "name": "First Partial",
                "items": []
            },
            "childs": [
                {
                    "category": {
                        "name": "Activities",
                        "items": []
                    },
                    "childs": [
                        {
                            "category": {
                                "name": "Online",
                                "items": [
                                    {"name": "Activity 1"},
                                    {"name": "Activity 2"}
                                ]
                            },
                            "category": {
                                "name": "Class",
                                "items": [
                                    {"name": "Activity 3"},
                                    {"name": "Activity 4"}
                                ]
                            }
                        }
                    ]
                },
                {
                    "category": {
                        "name": "Quizzes",
                        "items": [
                            {"name": "Quiz 1"},
                            {"name": "Quiz 2"}
                        ]
                    },
                    "childs": []
                }
            ]
        },
        {
            "category": {
                "name": "Second Partial",
                "items": []
            },
            "childs": [
                {
                    "category": {
                        "name": "Activities",
                        "items": []
                    },
                    "childs": [
                        {
                            "category": {
                                "name": "Online",
                                "items": [
                                    {"name": "Activity 5"},
                                    {"name": "Activity 6"}
                                ]
                            },
                            "category": {
                                "name": "Class",
                                "items": [
                                    {"name": "Activity 7"},
                                    {"name": "Activity 8"}
                                ]
                            }
                        }
                    ]
                },
                {
                    "category": {
                        "name": "Quizzes",
                        "items": [
                            {"name": "Quiz 3"},
                            {"name": "Quiz 4"}
                        ]
                    },
                    "childs": []
                }
            ]
        },
    ]
}

And I have to print it in a table as follows:

What I need is some idea to walk the tree with JS to print it like this.

It is worth mentioning that the tree configuration may vary depending on the course, but the solution must still be valid.

In some cases, only the main category and pure items can be found.

Please, any ideas that help me find my way, I will thank you.