Multiple Feature Tables for each Feature Layer in Map (JS 4.24)

moremeowbell

I am trying to add in multiple feature tables into my web application. I have seen the post below, but they were using JS 3.x and I am using 4.x.

https://community.esri.com/t5/arcgis-api-for-javascript-questions/display-several-feature-tables/td-p/351361

Basically, I am hoping that I can add a tab that allows users to select which feature table they want to view. Here is the code I have so far that works, but it only displays one table...

JS

      // Create the feature table
      const featureTable = new FeatureTable({
        view: view, // Required for feature highlight to work
        layer: featureLayer,
        multiSortEnabled: true,
        visibleElements: {
          // Autocast to VisibleElements
          menuItems: {
            clearSelection: true,
            refreshData: true,
            toggleColumns: true,
            selectedRecordsShowAllToggle: true,
            selectedRecordsShowSelectedToggle: true,
            zoomToSelection: true
          }
        },
        container: document.getElementById("tableDiv")
      });

      // Listen for the view's click event and access the associated graphic.
      view.on("immediate-click", (event) => {
        view.hitTest(event).then((response) => {
          tableCandidate = response.results.find((result) => {
            return (
              result.graphic &&
              result.graphic.layer &&
              result.graphic.layer === featureLayer
            );
          });

          // Add the graphic's ObjectId into the collection of highlightIds.
          // Check that the featureTable.highlightIds collection
          // does not include an already highlighted feature.
          if (tableCandidate) {
            const objectId = tableCandidate.graphic.getObjectId();

            if (featureTable.highlightIds.includes(objectId)) {
              // Remove feature from current selection if feature
              // is already added to highlightIds collection
              featureTable.highlightIds.remove(objectId);
            } else {
              // Add this feature to the featureTable highlightIds collection
              featureTable.highlightIds.add(objectId);
            }
          }
        });
      });

      // Watch the featureTable's highlightIds.length property,
      // and get the count of highlighted features within
      // the table.

      featureTable.watch("highlightIds.length", (ids) => {
        highlightIdsCount = ids;

        // Iterate through the filters within the table.
        // If the active filter is "Show selection",
        // changes made to highlightIds (adding/removing)
        // are reflected.

        featureTable.viewModel.activeFilters.forEach((filter) => {
          if (filter.type === "selection") {
            selectionIdCount = filter.objectIds.length; // the filtered selection's id count
            // Check that the filter selection count is equal to the
            // highlightIds collection count. If not, update filter selection.
            if (selectionIdCount !== highlightIdsCount) {
              featureTable.filterBySelection();
            }
          }
        });
      });
    });

 

HTML

    <div id="mainWindow">
        <div class="container">
            <div id="tableDiv"></div>
          </div>
    </div>

RRubalcava

You would need some logic using use DOMElement remove

https://developer.mozilla.org/en-US/docs/Web/API/Element/remove