Using field alias for query widget in html maps

[Rice_GIS]

Hello,

I am new to developing html and am working on a project for my organization. For this project I'm referencing this code sample, I'm just using my own service url and related table: https://developers.arcgis.com/javascript/latest/sample-code/query-related-features/ 

For the life of me, I can't figure out how to show the field alias in my column headings for the query results. In the script below, I have the fields next to my outFields call as "SpeciesGroup", "CommonName", and "ProtectionLevels" (LINE 48). But I want these field names displayed on the web page with a space between them. The tables that these are referencing have the desired field alias, but it's showing the actual field name. I'm not sure what or where the code should be to get the desired field name. Any help would be greatly appreciated. Thank you in advance!

 // Add widgets to the view
        view.ui.add(document.getElementById("gridDiv"), "bottom-left");
        view.ui.add(legendExpand, "top-right");

        // Initialize variables
        let highlight, grid;

        // call clearMap method when clear is clicked
        const clearbutton = document.getElementById("clearButton");
        clearbutton.addEventListener("click", clearMap);

        layer.load().then(function () {
          return (g = new Grid());
        });

        view.on("click", function (event) {
          clearMap();
          queryFeatures(event);
        });

        function queryFeatures(screenPoint) {
          const point = view.toMap(screenPoint);

          // Query the for the feature ids where the user clicked
          layer
            .queryObjectIds({
              geometry: point,
              spatialRelationship: "intersects",
              returnGeometry: false,
              outFields: ["*"]
            })

            .then(function (objectIds) {
              if (!objectIds.length) {
                return;
              }

              // Highlight the area returned from the first query
              view.whenLayerView(layer).then(function (layerView) {
                if (highlight) {
                  highlight.remove();
                }
                highlight = layerView.highlight(objectIds);
              });

              // Query the for the related features for the features ids found
              return layer.queryRelatedFeatures({
                outFields: ["SpeciesGroup", "CommonName", "ProtectionLevels"],
                relationshipId: layer.relationships[0].id,
                objectIds: objectIds
              });
            })

            .then(function (relatedFeatureSetByObjectId) {
              if (!relatedFeatureSetByObjectId) {
                return;
              }
              // Create a grid with the data
              Object.keys(relatedFeatureSetByObjectId).forEach(function (
                objectId
              ) {
                // get the attributes of the FeatureSet
                const relatedFeatureSet = relatedFeatureSetByObjectId[objectId];
                const rows = relatedFeatureSet.features.map(function (feature) {
                  return feature.attributes;
                });

                if (!rows.length) {
                  return;
                }

                // create a new div for the grid of related features
                // append to queryResults div inside of the gridDiv
                const gridDiv = document.createElement("div");
                const results = document.getElementById("queryResults");
                results.appendChild(gridDiv);

                // destroy current grid if exists
                if (grid) {
                  grid.destroy();
                }
                // create new grid to hold the results of the query
                grid = new Grid(
                  {
                    columns: Object.keys(rows[0]).map(function (fieldName) {
                      return {
                        label: fieldName,
                        field: fieldName,
                        sortable: true
                      };
                    })
                  },
                  gridDiv
                );

                // add the data to the grid
                grid.renderArray(rows);
              });
              clearbutton.style.display = "inline";
            })
            .catch(function (error) {
              console.error(error);
            });
        }

        function clearMap() {
          if (highlight) {
            highlight.remove();
          }
          if (grid) {
            grid.destroy();
          }
          clearbutton.style.display = "none";
        }
      });