How To Display Nested Data in Table in EJS Vertically

I'm using Nodejs Express to call a GraphQL endpoint that gets rendered in an ejs table.

My data is being displayed in the table horizontally (only 1 row)...

| Datasource | Field |

| ds-title1 | f-title1 | f-title2 | f-title3 | f-title4 |...

I want it to display vertically with the 1 same datasource seen over multiple rows for each different field...

| Datasource | Field |

| ds-title1 | f-title1 |

| ds-title1 | f-title2 |

| ds-title1 | f-title3 |

| ds-title1 | f-title4 |

Here is my code

server.js

  app.get('/gql', async (req, res) => {
    var options = {
      'method': 'POST',
      'url': 'site.com/graphql',
      'headers': {
        'Auth': 'abc-123',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        query: `query {
                publishedDatasources (filter: {name: "Datasource_Model"}) {
                      name
                      fields (orderBy: {field: NAME, direction: ASC}) {
                              name
                              }
                        }
                  }`,
        variables: {}
      })
    };
    try {
    request(options, function (error, response, body) 
    {
      if (error) throw new Error(error);
      const publishedDataSource = JSON.parse(body);
      const pubDataSource = publishedDataSource.data.publishedDatasources.map(item => item );
      
      res.render('gql.ejs', {pubDataSource});
      console.log(pubDataSource);
    });
  } catch(e) {
    console.log("Something went wrong", e)
  }
  });

I have no issues with getting and displaying data.

The data is returned in this format...

{
  "data": {
    "publishedDatasources": [
      {
        "name": "ds-title1",
        "fields": [
          {
            "name": "f-title1"
          },
          {
            "name": "f-title2"
          },
          {
            "name": "f-title3"
          },
          {
            "name": "f-title4"
          },
          {
            "name": "f-title5"
          },
          {
            "name": "f-title6"
          },
          {
            "name": "f-title7"
          },
          {
            "name": "f-title8"
          },
          {
            "name": "f-title9"
          }
        ]
      }
    ]
  }
}

The ejs table is structured like this

gql.ejs

                        <table>

                            <tr>
                                <th>Datasource-Title</th>
                                <th>Field-Title</th>
                            </tr>
                            
                            <% pubDataSource.forEach(function(pds){ %>
                            <tr>
                                <td>
                                    <%= pds.name %>
                                </td>

                                <% pds.fields.forEach(function(field) { %>
                                    <td>
                                        <%= field.name %> 
                                    </td>  
                                <% }) %>
                               </tr>
                            <% }) %>
                            
                        </table>

I'm guessing the horizontal display has something to do with how my table is structured with the ejs tags, but I've tried many different configurations and cannot get it to display in the desired vertical display. Ultimately, I will need to display even further nested children and grandchildren in the same table, but if I can get this 2-level version to work, I'm hoping the solution can be applied to 2+-levels.

Thank you for any help you can provide.